12 |
<%= ListDay %>
14 |
15 |
16 |
17 | <% for(var i=0 ;i
18 |
19 |
20 |
<%= newListItem[i] %>
27 |
28 |
29 |
30 |
31 |
32 |
33 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/Index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const BodyParser = require('body-parser');
3 |
4 | const app = express();
5 | const port = 3400;
6 | app.use(BodyParser.urlencoded({extended:true}));
7 | app.use(express.static("public"));
8 | app.set('view engine',"ejs"); // Render krna ka lia..
9 | var Items=["Play Cricket","Coding","Eating"]; // storing the UserItems
10 |
11 |
12 | app.get('/',(req,res)=>{
13 |
14 | var today = new Date();
15 | var currentDay=today.getDay();
16 | var day="";
17 | var option={
18 | day : "numeric" ,
19 | month : "long",
20 | year : "numeric",
21 | weekday : "long",
22 | };
23 | var day = today.toLocaleDateString("en-US",option)
24 | // switch(currentDay){
25 | // case 0:
26 | // day = "Sunday";
27 | // break;
28 | // case 1:
29 | // day = "Monday";
30 | // break;
31 | // case 2:
32 | // day = "Tuesday";
33 | // break;
34 | // case 3:
35 | // day = "Wednesday";
36 | // break;
37 | // case 4:
38 | // day = "Thrusday";
39 | // break;
40 | // case 5:
41 | // day = "Friday";
42 | // break;
43 | // case 6:
44 | // day = "Saturday";
45 | // break;
46 | // }
47 | res.render('list',{ListDay:day,newListItem:Items});
48 | // res.render('list',{TDate:today.getDate});
49 |
50 | // res.sendFile(__dirname+"/Index.html");
51 | });
52 |
53 | app.post("/",(req,res)=>{
54 | var UserItem = req.body.NewItems;
55 | Items.push(UserItem);
56 | res.redirect("/");
57 |
58 | })
59 | app.listen(port,()=>{
60 | console.log(`You are Listening to : ${port}`);
61 | })
--------------------------------------------------------------------------------
/public/Css/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | background-color: #E4E9FD;
3 | background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
4 | min-height: 100%;
5 | font-family: 'helvetica neue';
6 | }
7 |
8 | h1 {
9 | color: #fff;
10 | padding: 10px;
11 | }
12 |
13 | .box {
14 | max-width: 400px;
15 | margin: 50px auto;
16 | background: white;
17 | border-radius: 5px;
18 | box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
19 | }
20 |
21 | #heading {
22 | background-color: #A683E3;
23 | text-align: center;
24 | }
25 |
26 | .item {
27 | min-height: 70px;
28 | display: flex;
29 | align-items: center;
30 | border-bottom: 1px solid #F1F1F1;
31 | }
32 |
33 | .item:last-child {
34 | border-bottom: 0;
35 | }
36 |
37 | input:checked+p {
38 | text-decoration: line-through;
39 | text-decoration-color: #A683E3;
40 | }
41 |
42 | input[type="checkbox"] {
43 | margin: 20px;
44 | }
45 |
46 | p {
47 | margin: 0;
48 | padding: 20px;
49 | font-size: 20px;
50 | font-weight: 200;
51 | color: #00204a;
52 | }
53 |
54 | form {
55 | text-align: center;
56 | margin-left: 20px;
57 | }
58 |
59 | button {
60 | min-height: 50px;
61 | width: 50px;
62 | border-radius: 50%;
63 | border-color: transparent;
64 | background-color: #A683E3;
65 | color: #fff;
66 | font-size: 30px;
67 | padding-bottom: 4px;
68 | border-width: 0;
69 | }
70 |
71 | input[type="text"] {
72 | text-align: center;
73 | height: 60px;
74 | top: 10px;
75 | border: none;
76 | background: transparent;
77 | font-size: 20px;
78 | font-weight: 200;
79 | width: 313px;
80 | }
81 |
82 | input[type="text"]:focus {
83 | outline: none;
84 | box-shadow: inset 0 -3px 0 0 #A683E3;
85 | }
86 |
87 | ::placeholder {
88 | color: grey;
89 | opacity: 1;
90 | }
91 |
92 | footer {
93 | color: white;
94 | color: rgba(0, 0, 0, 0.5);
95 | text-align: center;
96 | }
97 |
--------------------------------------------------------------------------------