To do list (without styling and css)

the html file is written in the file having extension as ejs rather than HTML because it can include embedded javascript logic inside the file itself.


html of ejs todo list:-

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>To do List</title>

  </head>

  <body>

    <% if(kindOfDay==="Saturday"||kindOfDay==="Sunday"){ %>

    <h1 style="color:Purple"> <%= kindOfDay %> </h1>

    <% } else { %>

      <h1 style="color:Blue"> <%= kindOfDay %> </h1>

    <%  } %>

    <ul>

    <% for (var i = 0; i<newListItems.length; i++){ %>

      <li> <%= newListItems[i] %> </li>

    <% } %>  

    </ul>

    <form class="" action="/" method="post">

      <input type="text" name="newItem">

      <button type="submit" name="button">Add Item</button>

    </form>

  </body>

</html>

Java Script of ejs  todo list:-

 const express = require("express");

const bodyParser = require("body-parser");

const app = express();


app.set('view engine', 'ejs');  //incorporates ejs with express

app.use(express.urlencoded({extended:true}));  // express is used as body parse is depreceated

var items = ["BBuy Food","Cook Food","Eat Food"];  

app.get("/", (req, res) => {
  var today = new Date();     //variable containing new date
    var options={             // variable containing what of the date is shown and in which data type
      weekday:"long",
      day:"numeric",
      month:"long",
      year:"numeric"
    }
    var day = today.toLocaleDateString("en-US",options);  //converts the date to render the string representation of the date
 
 
    res.render("list", {   // renders the template and sends the rendered html string to client
    kindOfDay: day,        // item to render
    newListItems:items
  })
})

app.post("/",(req,res)=>{
  var item= String(req.body.newItem);      //used to grab the data from input
  items.push(item);                        // pushes grabbed item to items array  
  res.redirect("/");                       // redirects to home route                       
})
app.listen(3000, () => {
  console.log("Server started at port 3000");
})







// var currentDay = today.getDay();
// var day = "";
// switch (currentDay) {
//   case 0:
//     day = "Sunday"
//     break;
//   case 1:
//     day = "Monday"
//     break;
//   case 2:
//     day = "Tuesday"
//     break;
//   case 3:
//     day = "Wednesday"
//     break;
//   case 4:
//     day = "thursday"
//     break;
//   case 5:
//     day = "Friday"
//     break;
//   case 6:
//     day = "Saturday"
//     break;
//   default:
//     console.log("Error current day is equal to:" + currentDay);
//
// }

Comments

Post a Comment

Popular posts from this blog

To read data from database using mongo driver

  const MongoClient = require ( "mongodb" ). MongoClient ; // Replace the uri string with your MongoDB deployment's connection string. const url = "mongodb://localhost:27017" ; const client = new MongoClient ( url ); async function run () {   try {     await client . connect ();         const cursor = client . db ( "newFruits" ). collection ( "fruits" ). find ({});     const results = await cursor . toArray ();     if ( results . length > 0 ) {         console . log ( `Found listing(s)` );         results . forEach (( result , i ) => {                         console . log ( `$_id: ${ result . _id } name: ${ result . name } review: ${ result . rating } ` );                            });     } else {       ...
Read more

Template, layout and scope

 Templates:- Prewritten line of codes that a developer or programmer can modify according to his/her needs. The use of templates removes repetition saving a lot of time and making it easier for a developer to create a project. Also, templates are blocks of codes which add feature and content to be render on the page. Layout:- Layouts are files that define the structure of the page such as header, footer, navbar, sidebar, etc Concept of scope:- generally there are two types of scope: 1.) Local: which can only be accessed inside the function they are declared in. 2.) Global: This can be accessed throughout the program. Generally, all data types can be local as well as variable: eg: if var, let, const, are declared inside a function they will be local, and if created outside the function they will be global, but if these three are declared in conditional or loop statements the let will behave differently than var, and const. Meaning in conditional and loop statements the let statement...
Read more