applying styles to the todo list

Moutasim02 · Moutasim02 · commit 29760c186b48 · 2023-01-02T22:41:11.000+04:00
diff --git a/EJS/todolist-v1/app.js b/EJS/todolist-v1/app.js
@@ -3,6 +3,7 @@ const bodyParser = require("body-parser");
 const app = express();
 app.set("view engine", "ejs");
 app.use(bodyParser.urlencoded({extended:true}))
+app.use(express.static("public"))
 
 var items = [];
 app.get("/", (req, res) => { 
diff --git a/EJS/todolist-v1/public/css/styles.css b/EJS/todolist-v1/public/css/styles.css
diff --git a/EJS/todolist-v1/views/list.ejs b/EJS/todolist-v1/views/list.ejs
@@ -1,31 +1,42 @@
 <!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">
+  <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>Document</title>
-    <link href="css/styles.css" rel="stylesheet">
-</head>
-<body>
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body>
     <!-- Try not to use those scriplet tags, keep the logic in server -->
     <!-- <% if (kindOfDay === "Saturday" || kindOfDay === "Saturday") { %>
         <h1 style="color: purple;"><%= kindOfDay %> ToDo List</h1>
     <% } else { %>
         <h1><%= kindOfDay %> ToDo List</h1>
     <% } %> -->
 
-    <h1><%= kindOfDay %></h1>
+    <div class="box" id="heading">
+      <h1><%= kindOfDay %></h1>
+    </div>
 
-    <ul>
-        <% for (var i = 0; i < newListItems.length; i++) { %>
-            <li> <%= newListItems[i] %> </li>
-        <% } %>
-        
-    </ul>
-    <form action="/" method="post">
-        <input type="text" name="todoInput" id="todoInput">
-        <button type="submit">Go</button>
-    </form>
-</body>
-</html>
+    <div class="box">
+      <% for (var i = 0; i < newListItems.length; i++) { %>
+      <div class="item">
+        <input type="checkbox" />
+        <p><%= newListItems[i] %></p>
+      </div>
+      <% } %>
+
+      <form class="item" action="/" method="post">
+        <input
+          type="text"
+          name="todoInput"
+          id="todoInput"
+          placeholder="New Task"
+          autocomplete="off"
+        />
+        <button type="submit">+</button>
+      </form>
+    </div>
+  </body>
+</html>
