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 ☁️ 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
- What We Will Build ?
- Introduction to HTML, Bootstrap, JavaScript & JQuery
- Your First Page With HTML
- Adding Bootstrap
- Completing the UI
- Adding the Logic to App
- Deploy the App
- Conclusion
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 ZEIT/now.
In Action: https://simple-todolist.ahmnouira.now.sh/
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.
Read More:
HTML
JavaScript
JQuery
Bootstrap
3. Your First Page With HTML
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.
<!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.
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.
5. Completing 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>
Then open the index.html file on your browser.
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.
ahmnouira
/
simple-todolist
You will be able to add new tasks too a list, as well as remove the existing items
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.
7. Deploy the App
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.
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 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
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.
myYouTube.
myLinkedIn.
Thanks for having a time to read this tutorial.
Have a nice day.
Ahmed Nouira.
Latest comments (0)