Initial commit

Aneeshaik · Mar 1, 2023 · 9d04c68 · 9d04c68
commit 9d04c68
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+package-lock.json
+node_modules/*
diff --git a/app.js b/app.js
@@ -0,0 +1,45 @@
+const express = require("express");
+const bodyParser = require("body-parser");
+const app = express();
+let workItems = [];
+let items = ["WakeUp", "Do Exercise", "Eat"];
+app.set('view engine', 'ejs');
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(express.static('public'));
+
+app.get("/", function (req, res) {
+    let today = new Date();
+    let options = {
+        weekday: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        month: 'long',
+    };
+    let day = today.toLocaleDateString("en-us", options);
+    res.render('list', { ListTitle: day, newListItems: items });
+});
+
+app.post("/", function (req, res) {
+    let item = req.body.newItem;
+    if (req.body.List === 'Work') {
+        workItems.push(item);
+        res.redirect("/work");
+    }
+    else {
+        items.push(item);
+        res.redirect("/");
+    }
+})
+
+app.get("/work", function (req, res) {
+    res.render('list', { ListTitle: "Work List", newListItems: workItems });
+});
+
+app.get("/about", function(req, res){
+    res.render('about');
+})
+
+app.listen("3000", function () {
+    console.log("Port 3000 started");
+    console.log("Eyvallah");
+});
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "todolist",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.20.1",
+    "ejs": "^3.1.8",
+    "express": "^4.18.2"
+  }
+}
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -0,0 +1,102 @@
+html {
+  background-color: #E4E9FD;
+  background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
+  min-height: 1000px;
+  font-family: 'helvetica neue';
+}
+
+h1 {
+  color: #fff;
+  padding: 10px;
+}
+
+.box {
+  max-width: 400px;
+  margin: 50px auto;
+  background: white;
+  border-radius: 5px;
+  box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
+}
+
+#heading {
+  background-color: #A683E3;
+  text-align: center;
+}
+
+.item {
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #F1F1F1;
+}
+
+.item:last-child {
+  border-bottom: 0;
+}
+
+input:checked+p {
+  text-decoration: line-through;
+  text-decoration-color: #A683E3;
+}
+
+input[type="checkbox"] {
+  margin: 20px;
+}
+
+p {
+  margin: 0;
+  padding: 20px;
+  font-size: 20px;
+  font-weight: 200;
+  color: #00204a;
+}
+
+form {
+  text-align: center;
+  margin-left: 20px;
+}
+
+button {
+  min-height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  border-color: transparent;
+  background-color: #A683E3;
+  color: #fff;
+  font-size: 30px;
+  padding-bottom: 6px;
+  border-width: 0;
+}
+
+input[type="text"] {
+  text-align: center;
+  height: 60px;
+  top: 10px;
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  font-weight: 200;
+  width: 313px;
+}
+
+input[type="text"]:focus {
+  outline: none;
+  box-shadow: inset 0 -3px 0 0 #A683E3;
+}
+
+::placeholder {
+  color: grey;
+  opacity: 1;
+}
+
+footer {
+  color: white;
+  color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+}
+.foot{
+  text-align: center;
+}
+.foot a{
+  padding: 10px;
+}
diff --git a/views/about.ejs b/views/about.ejs
@@ -0,0 +1,3 @@
+<%- include('header'); -%>
+<h2>This is about page</h2>
+<p>A page to add to-do list</p>
diff --git a/views/footer.ejs b/views/footer.ejs
@@ -0,0 +1,3 @@
+<footer>
+    <p>Copyright &#169 || 2023</p>
+</footer>
diff --git a/views/header.ejs b/views/header.ejs
@@ -0,0 +1,10 @@
+<!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">
+    <link rel="stylesheet" href="css/styles.css">
+    <title>To-do list</title>
+</head>
diff --git a/views/list.ejs b/views/list.ejs
@@ -0,0 +1,30 @@
+<%- include('header'); -%>
+
+    <body>
+        <div class="box" id="heading">
+            <h1>
+                <%=ListTitle%>
+            </h1>
+        </div>
+        <div class="box">
+            <% for(let i=0; i<newListItems.length; i++){ %>
+                <div class="item">
+                    <input type="checkbox">
+                    <p>
+                        <%=newListItems[i]%>
+                    </p>
+                </div>
+                <% } %>
+                    <form action="/" class="item" method="post">
+                        <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
+                        <button type="submit" name="List" value=<%=ListTitle %>>+</button>
+                    </form>
+        </div>
+        <div class="foot">
+            <a href="/work">Work list</a>
+            <a href="/about">About Page</a>
+        </div>
+    </body>
+    <%- include('footer'); -%>
+
+        </html>