Engineer bro!
Sun Jan 30 2022 (2 years ago)
Engineer by mistake!
I am a software engineer by passion
You will learn a lot by creating a to-do application. You will learn how can you manipulate the DOM, create a new HTML element, adding a new HTML element in the DOM.
I am using VSCode editor to edit the source code and Live Server Extension to see the changes live in the browser.
First of all, let us create a folder.
mkdir todo-vanilla-js
Now, let's create the HTML and JS file.
cd todo-vanilla-js
touch index.html
touch index.js
I am not going to use CSS, because I want to focus only on JavaScript
Paste the following content in HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="index.js"></script>
<title>ToDo Vanilla</title>
</head>
<body onload="init()">
<h1>ToDo Application - Created in Vanilla JS :)</h1>
<h3>Your Tasks</h3>
<ol id="todos"></ol>
<p id="empty-todo-msg">You don't have any pending tasks :)</p>
<button style="height: 30px; width: 50px" id="create-todo">+</button>
</body>
</html>
Paste the following content in JavaScript file
function init() {
console.log("Let's create a ToDo App");
}
When you open the HTML file in the browser, then you'll see something like
Let's start building the application.
First, we will allow the user to create a new todo.
User will open the page
He/She will click on the plus button to create a todo
Write a todo
Press Enter
init()
functionLet's complete the init()
function. As we discussed earlier, the responsibility of this function will be to initialize everything.
Utility functions
// utility functions to get the elements
const getMsg = () => document.getElementById("empty-todo-msg");
const getToDos = () => document.getElementById("todos");
const getToDoButton = () => document.getElementById("create-todo");
/**
* This function will be called when the page will load for the first time.
*/
function init() {
const todoButton = getToDoButton();
todoButton.addEventListener("click", createToDo);
}
Now, when the user will click on the +
button, then the createToDo
function will be triggered.
createToDo()
This function will take input from the user and add a todo in the UI.
function createToDo() {
const todo = prompt("Enter your todo");
// in case user pressed cancel
if (!todo) return;
addToDo(todo);
hideEmptyMsg();
}
/**
* Get a todo string and create a new todo in the list
* @param {String} todo new todo
*/
function addToDo(todo) {
// get todo container
const todoList = getToDos();
// create a new todo
const newToDo = document.createElement("li");
newToDo.innerText = todo;
// append the todo in the UI
todoList.appendChild(newToDo);
}
/**
* Hide empty message from DOM, where there is at least one todo in the list
*/
function hideEmptyMsg() {
const msg = getMsg();
msg.style.display = "none";
}
https://todo-vanila-js.netlify.app
© 2021 dsabyte. All rights reserved