Deploy Your First To-Do List Application
Tags: webdev, tutorial, beginners, html
Published: 2020-01-02 15:09:33

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 in the cloud :cloud: for the whole to see.
**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.
# Table of contents
1. [What We Will Build ?](#1)
2. [Introduction to HTML, Bootstrap, JavaScript & JQuery](#2)
3. [Your First Page With HTML](#3)
4. [Adding Bootstrap ](#4)
5. [Completing the UI](#5)
6. [Adding the Logic to App](#6)
7. [Deploy the App](#7)
8. [Conclusion](#8)

# 1. What We Will Build ? <a name="1"></a>
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 [ZEIT/now](https://zeit.co).

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

# 2. Introduction to HTML, Bootstrap, JavaScript & JQuery <a name="2"></a>
### 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.
### Read More:
[HTML](https://fr.wikipedia.org/wiki/Hypertext_Markup_Language)
[JavaScript](https://fr.wikipedia.org/wiki/JavaScript)
[JQuery](https://jquery.com/)
[Bootstrap](https://getbootstrap.com/)
# 3. Your First Page With HTML <a name="3"></a>
**STEP1**: create a new folder:
``` 
 mkdir simple-todolist 
```
**STPE2**: 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*.
``` 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/30n8j97ku2g3ye9hbu97.jpg)
# 4. Adding Bootstrap <a name="4"></a>
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](https://getbootstrap.com/docs/3.3/), you use any other CSS framework, like [Semantic UI](https://semantic-ui.com/).
**STEP1**: add Bootstrap CSS file in the head tag.
``` html
<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.
``` html
<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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ci4cqgwxmnen5e158wmg.jpg)
# 5. Completing the UI <a name="5"></a>
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*.
``` 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>
```
Then open the *index.html* file on your browser.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/potf2wpvxd2gliltn9np.jpg)
# 6. Adding the Logic to App <a name="6"></a>
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.
``` html
<script src="js/script.js"></script>
```
**STEP3**: add the following code to the *script.js* file
``` javascript
$(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.
{% github ahmnouira/simple-todolist no-readme %}
**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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/784untsalth97dndwrsu.jpg)
# 7. Deploy the App <a name="7"></a>
So far we built a simple To-Do 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](https://zeit.co/).
### 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.
**<u>important</u>**: Be sure you have **npm** installed.
`npm -v` check if the npm install.
`npm install -g now@latest` install Now CLI globally.
`now -v` check if the Now CLI is installed and print it version.
**2. Deploy**
All you have to do is move into the directory and then deploy your app with a single command:
`now --prod` to deploy the app.
Once deployed, you will get a preview URL that is assigned on each deployments to share the latest changes under the address.
**my app**: https://simple-todolist.ahmnouira.now.sh/ 
# 8. Conclusion <a name="8"></a>
{% youtube 8VRmvullJV0 %}
That's all there is to it !
Feel free to explore the code by setting new features and expand the app, and share your experience and questions in the comment area.
To see more my works please visit my open source at [GitHub](https://github.com/ahmnouira).
[myYouTube](https://www.youtube.com/channel/UClZrlY_Eru1hUgAIqHUzeIg/featured?view_as=subscriber).
[myLinkedIn](https://www.linkedin.com/in/ahmnouira/).
Thanks for having a time to read this tutorial.
Have a nice day.
Ahmed Nouira.