Skip to content

The application focuses on building a backend application that uses EJS templates and layouts in order to build reusable components and modules. There are three routes in total: home, work and about.

Notifications You must be signed in to change notification settings

Swap-Nova/To-Do_List

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Why use Embedded JavaScripts (EJS):

  • When building an backend we use res.write() function. In order to avoid that we can just add the content in our HTML file and then call it in our app.js file:
res.sendFile(__dirname+"/index.html");
  • But at the same time, we cannot write repetitive HTML files all the time for each condition. So, we use templates for those who have similar content to each other.

Getting started with EJS:

  • To get started
npm install ejs
  • To use the ejs we have to create a view directory that contains the index.ejs file.
  • The ejs code is the same as HTML code, i.e., anything that is a valid HTML code will also be a valid ejs code.
  • There are different types of tags that can be used in the EJS templates:
Screenshot 2023-07-10 at 11 10 07 AM

Passing Data from Webpage to Server:

  • Create an HTML form that is a method to POST the data to the server.
  • If we write this code the page crashes due to the new EJS line where we are rendering the newListItem. The problem is that the newListItem is not defined. Because when we run the local host we land to the app.get() and we are rendering only
res.reneder(”lists”, {kindOfDay:Day)};
  • Therefore, we have to use res.redirect() method so that it returns back to the home route app.get() function and adds our new item.
res.render("lists", { 
        kindOfDay : day, // kindOfDay is a variable that will be called in EJS
        newListItem : item // redirect from the post request
    });

app.post(("/"),(req,res)=>{
    var item = req.body.newItem;
    console.log(item);

    // it will redirect to the home route which then triggers the app.get method  
    res.redirect("/");
});
  • The problem with this code is that ‘item’ is created inside the post function and therefore, the item variable will not be recognized by the res.render(). To fix this we will be using Scope of Programming.

Templates vs Layouts:

  • To implement logic on our server that separates out the data. This help in reusing the ejs template for as many different lists as we want to create. But the problem begins when we want a different type of page like the About or Contact page so it is not possible to use the same template.
  • Using layout:
Screenshot 2023-07-10 at 11 14 44 AM

Understanding modules and exporting:

  • So we start by wrapping the code block within a function returning the required output and exporting the function module. Then by using express.static we can call the module inside the home route.
  • Moreover, there are different methods to express a javascript function. Here we are exporting the module by function declaration in order to use a reusable component that can define the current date and day.
module.exports.getDate = function(){
	  let today = new Date();
    let options = {
        weekday: "long",
        day: "numeric",
        month: "long"
    };
    
    return today.toLocaleDateString("en-US", options);
};

About

The application focuses on building a backend application that uses EJS templates and layouts in order to build reusable components and modules. There are three routes in total: home, work and about.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published