Deploy Your First To-Do List Application

If your completely new to coding or have some background coding, you might be wondering where to start learning. You need to learn how, what, where to code and then, once the code is ready, how to deploy it for the whole to see.

Well, the good news is that coding is not difficult.

Target Audience: This tutorial is intended for beginners who want to start a career in web development, have understanding of web technologies in general.

Build Time: 90 Minutes.

Difficulty: Easy.

Step 1: What We Will Build ?

By the end of this tutorial we will:

Create a simple To-Do List Web Application using HTML5.
Integrate Bootstrap with our app to add good looking and fast styling.
Use JavaScript and JQuery library to add some dynamic behavior to our application.
Deploy our application in the cloud using Ziet/now.

In Action: https://simple-todolist.ahmnouira.now.sh/

Step 2: Introduction to HTML, Bootstrap, JavaScript & JQuery

What is HTML ?

Hyper Text Markup Language (HTML) can be thought of as "the language of the internet". HTML is the standard markup language that is used to create web pages. It was originally designed for sharing scientific documents. Adaptations to HTML over the years made it suitable to describe several other types of documents that can be displayed as web pages on the internet.

The only requirement that is needed to display an HTML page is a web browser, such as Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, or Apple Safari.

What is Bootstrap ?

Bootstrap is the most popular HTML, CSS, and JavaScript framework for building responsive, mobile first web sites. Bootstrap is an open source project developed by Twitter. it consists of CSS classes that can be applied to elements to style them consistently and JavaScript code that performs additional enhancement.

What is JavaScript ?

JavaScript is a programming language that is used for client-side programming in web applications. JavaScript code is run by the browser and allows web application programmers to build dynamic web content, such as components that show or are hidden dynamically, change appearance, and validate user input.

What is JQuery ?

JQuery is fast, small, and feature-rich JavaScript library, it makes things like HTML document traversal, and manipulation, event handling, animation much simpler.

All the power of JQuery is accessed via JavaScript, so having a strong grasp of JavaScript, is essential for understanding, structuring, and debugging your code.

For More Details:

Step 3: Your First Page With HTML

STEP1: create a new folder:

 mkdir simple-todolist

STEP2: create new file inside the simple-todolist folder and name it index.html.

cd simple-todolist 
touch index.html

STEP3: add the following code to index.html.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>To-Do-List</title>
  <meta charset="utf-8">
 </head>
 <body>
  <div class="container">
   <h1 class="text-center bg-success lead">My To-Do-List </h1>
  </div>
 </body>
</html>

STEP4: Open the index.html on your browser.

You will see My To-Do-List is displayed (see the photo above).

Step 4: Adding Bootstrap

In this section we will add Bootstrap support to our index.html page, in order to add fast, and good styling to the To-Do List App.

Notice: In this app we will use Bootstrap 3 , you use any other CSS framework, like Semantic UI .

STEP1: add Bootstrap CSS file in the head tag:

<head>
<meta name="viewport" conetent="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>

STEP2: add Bootstrap and JQuery CDN scripts files at the end of the body tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><br>

STEP3: Open index.html on your browser.

Congratulation, we successfully add Bootstrap support to our page in few steps.

Step 5: Complete the UI

After we successfully add Bootstrap support to our app. Now let's go on and compete the UI(User Interface) to let the user add new tasks.
The To-Do list will be able to add new items to a list, as well as remove existing items.

STEP1: add the following code to index.html.

<div class="row">
 <div class="col-sm-4">
  <!-- new task input -->
  <div class="form-group">
   <label for="new-task">Add New Task<label>
   <input class="form-control type="text" placeholder="New Task" id="new-task" autofocus/>
  </div>
  <!-- control buttons -->
  <div class="row">
   <div class="col-sm-6>
     <button class="btn btn-success id="add">Add</button>
   </div>
    <div class="col-sm-6 text-right>
      <button class="btn btn-danger" id="removeAll">Clear All!</button>
    </div>
   </div>
  </div>
  <!--list of task -->
  <div class="col-sm-8 active">
   <ol id="myList" class="list-group">
    <li class="list-group-item active disabled text-center">My Task List</li>
   </ol>
  </div>
 </div>
</div>

STEP2: open the index.html file on your browser.

Step 6: Adding the Logic to App

When you enter a task name and click on the Add button, nothing is happen at the moment. Let's fix that.

By the end of this step we will turn our index.html to a dynamic page, so it will behave to user interaction.

STEP1:create a new folder inside simple-todolist, name it js and a new file name it script.js inside that folder:

mkdir js
cd js
touch script.js

STEP2: link the script.js to the index.html by adding the following code at the end of the head tag:

<script src="js/script.js"></script>

STEP3: add the following code to the script.js file

$(document).ready(() => {

var tasks = 0
$("#removeAll").hide();

/* add new task handler */
$("#add").on("click", (event) => {
 event.preventDefault();
 event.stopPropagation();
 var val = $("input").val();
 if(val !=="") {
  tasks +=1;
  var elm =$("<li class='list-group-item'").text(val);
  $(elem).append("<div class='text-right'><button class='btn btn-danger'> X </button></div></li>");
  $("#mylist").append(elem);
  $("input").val("");

/* remove unique task handler */
$(".text-right").on("clikc", function(event) {
 event.preventDefault();
 event.stopPropagation();
 tasks -=1;
 $(this).parent.remove();
});

/* show removeAll button when we have more than 3 tasks */
if(tasks > 2 ) {
 $("#remveAll").show();
}

/* removeAll handler */
$("#removeAll").on("click", event => {
 event.preventDefault();
 event.stopPropagation();
 $(".disabled").siblings().remove();
 tasks = 0;
 $("#removeAll").hide();
});
}
});
});

Note: You can get either clone or download the ZIP of the code from my GitHub repository, this well save you from tapping.

git clone github.com/ahmnouira/simple-todolist

STEP4:test the code

Open your browser and enter a task then click Add, you will see a new task is added to the list, if you add 3 tasks you will notice that a clearAll button is appeared, this button allows us to remove all the added tasks, you can also remove only one task buy clicking on the its button.

Step 7: (Optional) Deploy the App

So far we built a simple todo list app, now it's time to deploy it in the cloud and share our work with others around the world.

To achieve this we will use cloud platform called ZEIT Now .

What is ZEIT Now ?

ZEIt Now is a cloud platform for static sites and Serverless Functions, it enables developers to host websites and web services that deploy instantly, all this with zero configuration.

1. Install Now CLI

To deploy with ZEIT Now, you will need to install Now CLI.

important:Be sure you have npm installed.

npm -v  	           # check if the npm install 	
npm install -g now@latest  # install the last version of Now CLI globally
now -v 		           # chech if the Now CLI is installed and print it version