Put js code in js file

nikonst · nikonst · commit 1c8816938a0c · 2020-12-28T11:46:48.000+02:00
diff --git a/gulp-example/src/index.html b/gulp-example/src/index.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Culp Example</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/main.css">
 </head>
 
@@ -15,29 +17,7 @@ <h1>A Gulp Example Page</h1>
     <img src="imgs/gulp.png" />
     <h3>Data</h3>
     <p id="dataTable"></p>
-
-    <script>
-        function buildHtmlTable(data) {
-            console.log(data)
-            let htmlStr = "<table>"
-            for (let i = 0; i < data.length; i++) {
-                htmlStr += "<tr><td>" + data[i].id + "</td>" +
-                    "<td>" + data[i].name + "</td>" +
-                    "<td>" + data[i].sirname + "</td>" +
-                    "<td>" + data[i].email + "</td></tr>"
-            }
-            htmlStr = htmlStr + "</table>"
-            return htmlStr
-        }
-
-        let data = ""
-        fetch('data/data.json')
-            .then(response => response.json())
-            .then(jsonData => data = jsonData)
-            .then(data => document.getElementById("dataTable").innerHTML=buildHtmlTable(data))
-            .catch(err => console.log(err))
-        
-    </script>
+    <script src = "js/loadData.js"></script>
 </body>
 
 </html>
diff --git a/gulp-example/src/js/loadData.js b/gulp-example/src/js/loadData.js
@@ -0,0 +1,19 @@
+function buildHtmlTable(data) {
+    console.log(data)
+    let htmlStr = "<table>"
+    for (let i = 0; i < data.length; i++) {
+        htmlStr += "<tr><td>" + data[i].id + "</td>" +
+            "<td>" + data[i].name + "</td>" +
+            "<td>" + data[i].sirname + "</td>" +
+            "<td>" + data[i].email + "</td></tr>"
+    }
+    htmlStr = htmlStr + "</table>"
+    return htmlStr
+}
+
+let data = ""
+fetch('data/data.json')
+    .then(response => response.json())
+    .then(jsonData => data = jsonData)
+    .then(data => document.getElementById("dataTable").innerHTML = buildHtmlTable(data))
+    .catch(err => console.log(err))
