gulp-example initial commit

nikonst · nikonst · commit d7760d62deb1 · 2020-12-28T11:04:31.000+02:00
diff --git a/gulp-example/gulpfile.js b/gulp-example/gulpfile.js
@@ -0,0 +1,2 @@
+import gulp from 'gulp';
+
diff --git a/gulp-example/package.json b/gulp-example/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "gulp-example",
+  "version": "1.0.0",
+  "description": "Gulp example",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "gulp",
+    "javascript"
+  ],
+  "author": "Nikos Konstantakis",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2"
+  }
+}
diff --git a/gulp-example/src/css/main.css b/gulp-example/src/css/main.css
@@ -0,0 +1,10 @@
+body {
+    padding-left: 10%;
+    padding-right: 10%;
+    font-family: 'Open Sans', sans-serif;
+}
+
+img {
+    max-width: 30%;
+    height: auto;
+}
diff --git a/gulp-example/src/data/data.json b/gulp-example/src/data/data.json
@@ -0,0 +1,50 @@
+[
+	{
+		"id": "16980613 6066",
+		"name": "Erich",
+		"sirname": "Good",
+		"email": "magnis.dis.parturient@lacus.edu"
+	},
+	{
+		"id": "16230507 1231",
+		"name": "Kylynn",
+		"sirname": "Petty",
+		"email": "iaculis.quis.pede@felis.co.uk"
+	},
+	{
+		"id": "16710620 4006",
+		"name": "Veronica",
+		"sirname": "Ramsey",
+		"email": "tellus.faucibus.leo@molestie.edu"
+	},
+	{
+		"id": "16330930 1566",
+		"name": "Tasha",
+		"sirname": "Cervantes",
+		"email": "posuere@SuspendissesagittisNullam.ca"
+	},
+	{
+		"id": "16010307 8473",
+		"name": "Damian",
+		"sirname": "Downs",
+		"email": "amet.risus.Donec@lectus.co.uk"
+	},
+	{
+		"id": "16131017 5219",
+		"name": "Phyllis",
+		"sirname": "Macias",
+		"email": "Cras.vulputate@ante.org"
+	},
+	{
+		"id": "16321122 2496",
+		"name": "Dahlia",
+		"sirname": "Barry",
+		"email": "erat.semper.rutrum@Loremipsumdolor.co.uk"
+	},
+	{
+		"id": "16501126 1855",
+		"name": "Talon",
+		"sirname": "Mcgowan",
+		"email": "posuere.enim@consectetuer.org"
+    }
+]
diff --git a/gulp-example/src/imgs/gulp.png b/gulp-example/src/imgs/gulp.png
diff --git a/gulp-example/src/index.html b/gulp-example/src/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Culp Example</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+    <h1>A Gulp Example Page</h1>
+    <hr>
+    <p>This is a Gulp test page.</p>
+    <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>
+</body>
+
+</html>
