Add layout

Benjamin-Re · Apr 10, 2022 · 8e5d39d · 8e5d39d
1 parent 2e88007
commit 8e5d39d
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 20 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,9 +1,19 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Output Management</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="dist/main.js"></script></head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script defer src="./main.js"></script></head>
   <body>
+    <header>TODOs</header>
+    <aside>
+      Projects
+    </aside>
+    <main class="content">
+      <input type="text" name="todoInputField" id="todoInputField">
+      <button>+</button>
+    </main>
+    <footer>Made by Benjamin-Re</footer>
   </body>
-</html>
+</html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Output Management</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <header>TODOs</header>
+    <aside>
+      Projects
+    </aside>
+    <main class="content">
+      <input type="text" name="todoInputField" id="todoInputField">
+      <button>+</button>
+    </main>
+    <footer>Made by Benjamin-Re</footer>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,27 @@
-import printMe from "./print.js";
+import Todo from "./todo.js";
+// import {} from "./project";
 import css from './style.css';
-printMe();
+
+
+// Create Todo module
+
+
+const addButton = document.querySelector(".content > button");
+const contentContainer = document.querySelector(".content");
+const inputField = document.querySelector("#todoInputField");
+
+addButton.addEventListener("click", (e) => {
+    const newTodo = new Todo(inputField.value);
+    const newItem = document.createElement("div");
+    newItem.textContent = newTodo.title;
+    contentContainer.appendChild(newItem);
+});
+
+
+
+
+// Set todo status to complete module
+
+// Changing todo priority module
+
+// Dom manipulation module
diff --git a/src/print.js b/src/print.js
diff --git a/src/project.js b/src/project.js
@@ -0,0 +1,4 @@
+/*
+A project is a container in which several todos live.
+A project should have a theme like private, work, ...
+*/
diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,29 @@
 body {
-    background-color: blanchedalmond;
+  background-color: red;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  grid-template-rows: 1fr 3fr 1fr;
+}
+
+header {
+  background-color: aliceblue;
+  grid-column: 1/3;
+  grid-row: 1/2;
+}
+
+aside {
+  grid-column: 1/2;
+  grid-row: 2/3;
+}
+.content {
+  background-color: coral;
+  grid-column: 2/3;
+  grid-row: 2/3;
+}
+
+footer {
+  background-color: aqua;
+  grid-column: 1/3;
+  grid-row: 3/4;
 }
diff --git a/src/todo.js b/src/todo.js
@@ -0,0 +1,54 @@
+/* Todo objects
+- Title
+- Description
+- DueDate
+- Priority
+*/
+
+export default class Todo {
+    title;
+    description;
+    dueDate;
+    priority;
+
+    constructor(title, description, dueDate, priority) {
+        this.title = title;
+        this.description = description;
+        this.dueDate = dueDate;
+        this.priority = priority;
+    }
+
+    setTitle(title) {
+        this.title = title;
+    }
+
+    getTitle() {
+        return this.title;
+    }
+
+    setDescription(description) {
+        this.description = description;
+    }
+
+    getDescription() {
+        return this.description;
+    }
+
+    setDueDate(dueDate) {
+        this.dueDate = dueDate;
+    }
+
+    getDueDate() {
+        return this.dueDate;
+    }
+
+    setPriority(priority) {
+        this.priority = priority;
+    }
+
+    getPriority() {
+        return this.priority;
+    }
+
+}
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,20 +8,23 @@ module.exports = {
       },
     ],
   },
+
+  mode: "development",
   devServer: {
     static: "./dist",
+    hot: true,
+    port: 8080,
   },
-
-  mode: "development",
   entry: "./src/index.js",
   output: {
     filename: "main.js",
-    publicPath: "dist",
+    publicPath: "./",
   },
 
   plugins: [
     new HtmlWebpackPlugin({
-      title: "Output Management",
+      title: "Todo list",
+      template: "./src/index.html",
     }),
   ],
 };