Node.js - Building a Proper Application - Step 2 - Creating the Files

Updated on Oct 6, 2023

Firstly, let's install EJS. EJS will allow your application to return an HTML file when a call to it is made. You can click here to learn more about EJS, but simply put, it is a templating engine that allows for creating HTML templates with minimal code. To install EJS on your application, run the following command in the root directory of your application.

npm install ejs --save

Next, create a views directory, again in the root directory of your application. In it, create an index.ejs file. The file and directory are necessary, as that is the way EJS has been set up to work. That is the file your application will return when it makes a call. Place this code within the file.


<html>
<head> 
<title> ToDo App </title>
 <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
 <link href="/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2> A Simple To-do List App </h2>
<form action ="/addtask" method="POST">
<input type="text" name="newtask" placeholder="Add New Task">
<button> Add Task </button>
<h2> Added Task </h2>
<% for( var i = 0; i < task.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task[i] %>" /> <%= task[i] %> </li>
<% } %>
<button formaction="/removetask" type="submit" id="top"> Remove </button>
</form>
<h2> Completed task </h2>
 <% for(var i = 0; i < complete.length; i++){ %>
    <li><input type="checkbox" checked><%= complete[i] %> </li>
<% } %>
</div>
</body>
</html>

For the most part, this code should be easy to read and understand. It is HTML, as the top and bottom tags show. Next, we have the head of the page, which contains a title, a reference link for its font, and a file (styles.css), which we will talk about very soon. This stylesheet is used to determine how the HTML page will look. Then is the body; we will break it down a bit more.

<div class="container"> - This line of code opens the div class tag and specifies the div element as container. From here until the closing div tag, everything will be within this container, which is very much what it sounds like: a box that contains all other elements;
<h2> </h2> - You can see two lines with the h2 tags, and those are simple headings;
<form action ="/addtask" method="POST"> - This line starts an HTML form. When the form is filled, it will send a POST request to the /addtask URL;
<input type="text" name="newtask" placeholder="Add New Task"> - Next, an input field. The name of the field is newtask, which will be used to identify the input field when the form is submitted;
<button> Add Task </button> - This creates the button to confirm adding your task;
<% for( var i = 0; i < task.length; i++){ %> - This piece of code connects to the template we installed (EJS) and is used to create a JavaScript loop that will iterate through an array called task. It will make more sense when we explain the next part;
<li><input type="checkbox" name="check" value="<%= task[i] %>" /> <%= task[i] %> </li> - Inside the loop from above, the code will generate a list item for each task in the task array. It will also add a checkbox input and show the text of the task;
<button formaction="/removetask" type="submit"> Remove </button> - Code for a button with the functionality to remove a task from the list;

The final bit of code under the Completed Task heading is similar to the loop from above, but instead of looking through the task array, it looks through the completed array. Like the previous code, it will create a list item for each completed task, alongside a checkbox.

We know this was HTML and not JavaScript, but we wanted to explain it because they are closely related. With this, the HTML file we mentioned earlier is finished. Your application will use this file to generate HTML content based on data from the server dynamically. In other words, the page will change when you add or remove an item from your list.

Finally, create a public directory in the root of your application and add a styles.css file in it. Place the following code in the file.


* {
    font-family: "optima", sans-serif;
    font-weight: bold;
    color: rgb(0, 0, 0);
    margin-top: 10px;
}
body {
    background: rgb(169, 169, 169);
    color: #333333;
    margin-top: 50px;
}
.container {
    display: block;
    width: 300px;
    margin: 0 auto;
    border: 3px solid black;
    padding: 15px;
}
ul {
    margin: 0;
    padding: 0;
}

This code will allow you to change the appearance of your application. At the end of this tutorial, you will see what the application looks like and can change it in a way you like more. If you want to learn more about CSS and how to customize it further, you can check out this tutorial.

In the next section of our tutorial, we will connect all three files together and get the application going!

Step 1 - Installing Prerequisites Back to top Step 3 - Putting it All Together

Node.js Hosting

Multiple Node Versions
24/7 Node.js Support
Free Domain Transfer
Hack-free Protection
Fast SSD Storage
Free Node.js Transfer
Free Cloudflare CDN
Immediate Activation