Task Tracker
Brief explanation of a task tracker app logic
I am a versatile Product Developer and Frontend Engineer with a unique blend of creative UI/UX skills, specializing in Figma design, React.js, React Native, TailwindCSS, JavaScript, HTML, and CSS. My passion lies in crafting user-friendly and visually appealing products that seamlessly merge design and development principles. With a track record of creating three React Native applications and contributing to a groundbreaking product solution during my tenure with Skillvalley's Product Development Cohort, I am dedicated to shaping the digital landscape with innovative and user-centric solutions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Get It done!</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div><iframe src="https://gifer.com/embed/GnB0" width="100%" height="100%" style='position:absolute;' frameBorder="0" allowFullScreen></iframe></div>
<div class="container">
<div class="todo-app">
<h2>To-Do-List<img src="./images_to_do/logo.png" /></h2>
<div class="row">
<input type="text" id="input-box" placeholder="Add Your Text" />
<button onclick="addTask()">Add</button>
</div>
<ul id="list-container"></ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
1. Getting Elements
The code starts by finding some special places in the webpage to work with. It looks for an area where you can type (inputBox) and an area where you can see a list (listContainer).
const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");
Imagine you have a special box where you can write things (inputBox) and another box where you can see your to-do list (listContainer). getElementById is targeting the id in html.
2. Adding a Task
When you click the "Add" button, it checks if you wrote something in the special writing box. If you didn't, it tells you to write something. If you did, it creates a new item in your to-do list. alert is a browser method that shows alert modal over the browser. in addTask a conditional logic is applied.
if the value in input box (targeted using getElementById) is empty that means user do not enter any value and try to add task using button it will show alert, else if the user gives input it will be added in html using DOM (Document Object Module) manipulation (adding the input value in html by innerHTML property).
createElement is another operation that uses to create and manipulate DOM through js coding
\u00d7 is the unicode (just like ASCII Code) which signifies multiply/cross sign, it i added in span using innerHTML to make a cross sign to cancel a task.
li.appendChild(span) - here "span containing cross sign is appending with li" using appendChild method.
function addTask() {
if (inputBox.value === '') {
alert("You must write something!");
} else {
let li = document.createElement("li");
li.innerHTML = inputBox.value;
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTML = "\u00d7";
li.appendChild(span);
}
inputBox.value = " ";
saveData();
}
After adding the task the text should not be existing in the input box so the input state has been cleared by assigning a empty string " " in inputbox value (inputBox.value)
Imagine you have a magic button, and when you press it after writing something in your special writing box, a new item appears on your to-do list.
3. Checking and Removing Tasks
If you click on a to-do list item, it marks it as done. If you click on a little 'x' next to an item, it removes that item.
In JavaScript, an event listener is a function that is executed when a particular event occurs. Events can be user-generated, such as a mouse click or a key press, or they can be generated by the program itself, such as when a timer expires.
we know that Li tag is containing the todo string so is i click the todo string the checkbox will be active and it will be marked as done, this logic is written in if block
and if the span containing cros sign is clicked by mouse the todo task will be removed from UI by using removeChild method and we have to save the data obviously that is doing by saveData function.
listContainer.addEventListener("click", function (e) {
if (e.target.tagName === "LI") {
e.target.classList.toggle("checked");
saveData();
} else if (e.target.tagName === "SPAN") {
const li = e.target.parentNode;
li.parentNode.removeChild(li);
saveData();
}
}, false);
4. Saving and Showing Tasks
The code also helps remember your to-do list even if you close the webpage. It saves your list to a magical storage called localStorage. local storage is a client side (user side) property that actually memorizes the browser contents you visit. since javascript shows asynchronous property that's why saveData() function is added at last and called on the above functions.
function saveData() {
localStorage.setItem("data", listContainer.innerHTML);
}
function showTask() {
listContainer.innerHTML = localStorage.getItem("data");
}
showTask();
Imagine your to-do list can be saved in a special place so that even if you close your magical list, it remembers what you wrote when you come back and using ShowTask data is retrived from local storage of your device and showing inside <ul> tag which has list-container id
