academind · elnfar · Oct 1, 2021 · Oct 4, 2021 · Oct 4, 2021 · Oct 26, 2021
diff --git a/code/00-starting-project/app.js b/code/00-starting-project/app.js
@@ -0,0 +1,5 @@
+const express = require('express');
+
+const app = express();
+
+app.listen(3000);
diff --git a/code/00-starting-project/package.json b/code/00-starting-project/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "web-dev-complete-guide",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon app.js"
+  },
+  "keywords": [],
+  "author": "Maximilian Schwarzmüller",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.12"
+  }
+}
diff --git a/code/01-adding-ejs-first-views/app.js b/code/01-adding-ejs-first-views/app.js
@@ -0,0 +1,14 @@
+const path = require('path');
+
+const express = require('express');
+
+const authRoutes = require('./routes/auth.routes');
+
+const app = express();
+
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views'));
+
+app.use(authRoutes);
+
+app.listen(3000);
diff --git a/code/01-adding-ejs-first-views/controllers/auth.controller.js b/code/01-adding-ejs-first-views/controllers/auth.controller.js
@@ -0,0 +1,12 @@
+function getSignup(req, res) {
+  // ...
+}
+
+function getLogin(req, res) {
+  // ...
+}
+
+module.exports = {
+  getSignup: getSignup,
+  getLogin: getLogin
+};
diff --git a/code/01-adding-ejs-first-views/package.json b/code/01-adding-ejs-first-views/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "web-dev-complete-guide",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon app.js"
+  },
+  "keywords": [],
+  "author": "Maximilian Schwarzmüller",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.6",
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.12"
+  }
+}
diff --git a/code/01-adding-ejs-first-views/routes/auth.routes.js b/code/01-adding-ejs-first-views/routes/auth.routes.js
@@ -0,0 +1,11 @@
+const express = require('express');
+
+const authController = require('../controllers/auth.controller');
+
+const router = express.Router();
+
+router.get('/signup', authController.getSignup);
+
+router.get('/login', authController.getLogin);
+
+module.exports = router;
diff --git a/code/01-adding-ejs-first-views/views/customer/auth/login.ejs b/code/01-adding-ejs-first-views/views/customer/auth/login.ejs
diff --git a/code/01-adding-ejs-first-views/views/customer/auth/signup.ejs b/code/01-adding-ejs-first-views/views/customer/auth/signup.ejs
@@ -0,0 +1,11 @@
+<%- include('../includes/head', { pageTitle: 'Signup' }) %>
+</head>
+<body>
+  <%- include('../includes/header') %>
+  <main>
+    <h1>Create New Account</h1>
+    <form action="" method="">
+
+    </form>
+  </main>
+<%- include('../includes/footer') %>
diff --git a/code/01-adding-ejs-first-views/views/customer/includes/footer.ejs b/code/01-adding-ejs-first-views/views/customer/includes/footer.ejs
@@ -0,0 +1,2 @@
+</body>
+</html>
diff --git a/code/01-adding-ejs-first-views/views/customer/includes/head.ejs b/code/01-adding-ejs-first-views/views/customer/includes/head.ejs
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= pageTitle %></title>
diff --git a/code/01-adding-ejs-first-views/views/customer/includes/header.ejs b/code/01-adding-ejs-first-views/views/customer/includes/header.ejs
@@ -0,0 +1,4 @@
+<header>
+  <div><a href="/">WDE</a></div>
+  <nav></nav>
+</header>
diff --git a/code/02-adding-base-css/app.js b/code/02-adding-base-css/app.js
@@ -0,0 +1,16 @@
+const path = require('path');
+
+const express = require('express');
+
+const authRoutes = require('./routes/auth.routes');
+
+const app = express();
+
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views'));
+
+app.use(express.static('public'));
+
+app.use(authRoutes);
+
+app.listen(3000);
diff --git a/code/02-adding-base-css/controllers/auth.controller.js b/code/02-adding-base-css/controllers/auth.controller.js
@@ -0,0 +1,12 @@
+function getSignup(req, res) {
+  res.render('customer/auth/signup');
+}
+
+function getLogin(req, res) {
+  // ...
+}
+
+module.exports = {
+  getSignup: getSignup,
+  getLogin: getLogin
+};
diff --git a/code/02-adding-base-css/package.json b/code/02-adding-base-css/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "web-dev-complete-guide",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon app.js"
+  },
+  "keywords": [],
+  "author": "Maximilian Schwarzmüller",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.6",
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.12"
+  }
+}
diff --git a/code/02-adding-base-css/public/styles/auth.css b/code/02-adding-base-css/public/styles/auth.css
diff --git a/code/02-adding-base-css/public/styles/base.css b/code/02-adding-base-css/public/styles/base.css
@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Montserrat', 'sans-serif';
+}
diff --git a/code/02-adding-base-css/public/styles/forms.css b/code/02-adding-base-css/public/styles/forms.css
diff --git a/code/02-adding-base-css/routes/auth.routes.js b/code/02-adding-base-css/routes/auth.routes.js
@@ -0,0 +1,11 @@
+const express = require('express');
+
+const authController = require('../controllers/auth.controller');
+
+const router = express.Router();
+
+router.get('/signup', authController.getSignup);
+
+router.get('/login', authController.getLogin);
+
+module.exports = router;
diff --git a/code/02-adding-base-css/views/customer/auth/login.ejs b/code/02-adding-base-css/views/customer/auth/login.ejs
diff --git a/code/02-adding-base-css/views/customer/auth/signup.ejs b/code/02-adding-base-css/views/customer/auth/signup.ejs
@@ -0,0 +1,49 @@
+<%- include('../includes/head', { pageTitle: 'Signup' }) %>
+  <link rel="stylesheet" href="/styles/forms.css">
+  <link rel="stylesheet" href="/styles/auth.css">
+</head>
+<body>
+  <%- include('../includes/header') %>
+  <main>
+    <h1>Create New Account</h1>
+    <form action="" method="">
+      <p>
+        <label for="email">E-Mail</label>
+        <input type="email" id="email" name="email" required>
+      </p>
+      <p>
+        <label for="confirm-email">Confirm Email</label>
+        <input type="email" id="confirm-email" name="confirm-email" required>
+      </p>
+      <p>
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" minlength="6" required>
+      </p>
+      <hr>
+      <p>
+        <label for="fullname">Full Name</label>
+        <input type="text" id="fullname" name="fullname" required>
+      </p>
+      <p>
+        <label for="street">Street</label>
+        <input type="text" id="street" name="street" required>
+      </p>
+      <p>
+        <label for="postal">Postal Code</label>
+        <input 
+          type="text" 
+          id="postal" 
+          name="postal" 
+          minlength="5" 
+          maxlength="5" 
+          required>
+      </p>
+      <p>
+        <label for="city">City</label>
+        <input type="text" id="city" name="city" required>
+      </p>
+      <button class="btn">Create Account</button>
+      <p id="switch-form"><a href="/login">Login instead</a></p>
+    </form>
+  </main>
+<%- include('../includes/footer') %>
diff --git a/code/02-adding-base-css/views/customer/includes/footer.ejs b/code/02-adding-base-css/views/customer/includes/footer.ejs
@@ -0,0 +1,2 @@
+</body>
+</html>
diff --git a/code/02-adding-base-css/views/customer/includes/head.ejs b/code/02-adding-base-css/views/customer/includes/head.ejs
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= pageTitle %></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/styles/base.css">
+
diff --git a/code/02-adding-base-css/views/customer/includes/header.ejs b/code/02-adding-base-css/views/customer/includes/header.ejs
@@ -0,0 +1,4 @@
+<header>
+  <div><a href="/">WDE</a></div>
+  <nav></nav>
+</header>
diff --git a/code/03-adding-css-variables/app.js b/code/03-adding-css-variables/app.js
@@ -0,0 +1,16 @@
+const path = require('path');
+
+const express = require('express');
+
+const authRoutes = require('./routes/auth.routes');
+
+const app = express();
+
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views'));
+
+app.use(express.static('public'));
+
+app.use(authRoutes);
+
+app.listen(3000);
diff --git a/code/03-adding-css-variables/controllers/auth.controller.js b/code/03-adding-css-variables/controllers/auth.controller.js
@@ -0,0 +1,12 @@
+function getSignup(req, res) {
+  res.render('customer/auth/signup');
+}
+
+function getLogin(req, res) {
+  // ...
+}
+
+module.exports = {
+  getSignup: getSignup,
+  getLogin: getLogin
+};
diff --git a/code/03-adding-css-variables/package.json b/code/03-adding-css-variables/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "web-dev-complete-guide",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon app.js"
+  },
+  "keywords": [],
+  "author": "Maximilian Schwarzmüller",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.6",
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.12"
+  }
+}
diff --git a/code/03-adding-css-variables/public/styles/auth.css b/code/03-adding-css-variables/public/styles/auth.css
diff --git a/code/03-adding-css-variables/public/styles/base.css b/code/03-adding-css-variables/public/styles/base.css
@@ -0,0 +1,40 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: "Montserrat", "sans-serif";
+
+  --color-gray-50: rgb(243, 236, 230);
+  --color-gray-100: rgb(207, 201, 195);
+  --color-gray-300: rgb(99, 92, 86);
+  --color-gray-400: rgb(70, 65, 60);
+  --color-gray-500: rgb(37, 34, 31);
+  --color-gray-600: rgb(32, 29, 26);
+  --color-gray-700: rgb(31, 26, 22);
+
+  --color-primary-50: rgb(253, 224, 200);
+  --color-primary-100: rgb(253, 214, 183);
+  --color-primary-200: rgb(250, 191, 143);
+  --color-primary-400: rgb(223, 159, 41);
+  --color-primary-500: rgb(212, 136, 14);
+  --color-primary-700: rgb(212, 120, 14);
+  --color-primary-200-contrast: rgb(100, 46, 2);
+  --color-primary-500-contrast: white;
+
+  --color-error-100: rgb(255, 192, 180);
+  --color-error-500: rgb(199, 51, 15);
+
+  --color-primary-500-bg: rgb(63, 60, 58);
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+
+  --border-radius-small: 4px;
+  --border-radius-medium: 6px;
+
+  --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
diff --git a/code/03-adding-css-variables/public/styles/forms.css b/code/03-adding-css-variables/public/styles/forms.css
diff --git a/code/03-adding-css-variables/routes/auth.routes.js b/code/03-adding-css-variables/routes/auth.routes.js
@@ -0,0 +1,11 @@
+const express = require('express');
+
+const authController = require('../controllers/auth.controller');
+
+const router = express.Router();
+
+router.get('/signup', authController.getSignup);
+
+router.get('/login', authController.getLogin);
+
+module.exports = router;
diff --git a/code/03-adding-css-variables/views/customer/auth/login.ejs b/code/03-adding-css-variables/views/customer/auth/login.ejs