{"id":567,"date":"2025-05-19T10:50:44","date_gmt":"2025-05-19T10:50:44","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=567"},"modified":"2026-06-06T13:25:44","modified_gmt":"2026-06-06T13:25:44","slug":"real-world-applications","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/","title":{"rendered":"Real-World Applications"},"content":{"rendered":"

Build an interactive to-do list
\n<\/span><\/h2>\n

1. HTML Structure<\/h3>\n

The HTML will consist of the basic layout for the to-do list. For a quick refresher on HTML structure, see our Introduction to HTML<\/a> guide. We\u2019ll need an input field, a button to add new tasks, and a list to display the tasks.<\/p>\n

<!DOCTYPE html><\/em>
\n<html lang=”en”><\/em>
\n<head><\/em>
\n<meta charset=”UTF-8″><\/em>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/em>
\n<title>To-Do List<\/title><\/em>
\n<link rel=”stylesheet” href=”styles.css”><\/em>
\n<\/head><\/em>
\n<body><\/em>
\n<div class=”todo-container”><\/em>
\n<h1>My To-Do List<\/h1><\/em>
\n<input type=”text” id=”taskInput” placeholder=”Enter a new task”><\/em>
\n<button id=”addTaskButton”>Add Task<\/button><\/em>
\n<ul id=”taskList”><\/ul><\/em>
\n<\/div><\/em><\/p>\n

<script src=”script.js”><\/script><\/em>
\n<\/body><\/em>
\n<\/html><\/em><\/p>\n

2. CSS Styling<\/h3>\n

The CSS will style the to-do list, making it visually appealing. See our Introduction to CSS<\/a> for foundational styling concepts.<\/p>\n

\/* styles.css *\/<\/em>
\nbody {<\/em>
\nfont-family: Arial, sans-serif;<\/em>
\nbackground-color: #f4f4f9;<\/em>
\ndisplay: flex;<\/em>
\njustify-content: center;<\/em>
\nalign-items: center;<\/em>
\nheight: 100vh;<\/em>
\nmargin: 0;<\/em>
\n}<\/em><\/p>\n

.todo-container {<\/em>
\nbackground-color: #fff;<\/em>
\npadding: 20px;<\/em>
\nbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);<\/em>
\nborder-radius: 8px;<\/em>
\nwidth: 300px;<\/em>
\n}<\/em><\/p>\n

h1 {<\/em>
\ntext-align: center;<\/em>
\n}<\/em><\/p>\n

input, button {<\/em>
\nwidth: 100%;<\/em>
\npadding: 10px;<\/em>
\nmargin: 5px 0;<\/em>
\nborder: 1px solid #ccc;<\/em>
\nborder-radius: 4px;<\/em>
\n}<\/em><\/p>\n

button {<\/em>
\nbackground-color: #4CAF50;<\/em>
\ncolor: white;<\/em>
\nborder: none;<\/em>
\ncursor: pointer;<\/em>
\n}<\/em><\/p>\n

button:hover {<\/em>
\nbackground-color: #45a049;<\/em>
\n}<\/em><\/p>\n

ul {<\/em>
\nlist-style-type: none;<\/em>
\npadding-left: 0;<\/em>
\n}<\/em><\/p>\n

li {<\/em>
\nbackground-color: #f1f1f1;<\/em>
\nmargin: 5px 0;<\/em>
\npadding: 10px;<\/em>
\nborder-radius: 4px;<\/em>
\ndisplay: flex;<\/em>
\njustify-content: space-between;<\/em>
\nalign-items: center;<\/em>
\n}<\/em><\/p>\n

li.done {<\/em>
\ntext-decoration: line-through;<\/em>
\ncolor: #888;<\/em>
\n}<\/em><\/p>\n

.delete {<\/em>
\nbackground-color: #ff4d4d;<\/em>
\ncolor: white;<\/em>
\nborder: none;<\/em>
\nborder-radius: 4px;<\/em>
\npadding: 5px;<\/em>
\ncursor: pointer;<\/em>
\n}<\/em><\/p>\n

3. JavaScript Functionality<\/h3>\n

Now, let\u2019s implement the functionality to add tasks, mark them as complete, and delete tasks, using DOM Manipulation, as taught in our DOM Manipulation<\/a> course.<\/p>\n

\/\/ script.js<\/em><\/p>\n

\/\/ Get references to DOM elements<\/em>
\nconst taskInput = document.getElementById(‘taskInput’);<\/em>
\nconst addTaskButton = document.getElementById(‘addTaskButton’);<\/em>
\nconst taskList = document.getElementById(‘taskList’);<\/em><\/p>\n

\/\/ Function to create a new task item<\/em>
\nfunction createTask(taskContent) {<\/em>
\n\/\/ Create list item<\/em>
\nconst taskItem = document.createElement(‘li’);<\/em><\/p>\n

\/\/ Create a text node for the task content<\/em>
\nconst taskText = document.createElement(‘span’);<\/em>
\ntaskText.textContent = taskContent;<\/em>
\ntaskItem.appendChild(taskText);<\/em><\/p>\n

\/\/ Create a delete button<\/em>
\nconst deleteButton = document.createElement(‘button’);<\/em>
\ndeleteButton.textContent = ‘Delete’;<\/em>
\ndeleteButton.classList.add(‘delete’);<\/em>
\ntaskItem.appendChild(deleteButton);<\/em><\/p>\n

\/\/ Append the task item to the task list<\/em>
\ntaskList.appendChild(taskItem);<\/em><\/p>\n

\/\/ Mark task as done when clicked<\/em>
\ntaskItem.addEventListener(‘click’, () => {<\/em>
\ntaskItem.classList.toggle(‘done’);<\/em>
\n});<\/em><\/p>\n

\/\/ Delete task when delete button is clicked<\/em>
\ndeleteButton.addEventListener(‘click’, (event) => {<\/em>
\nevent.stopPropagation(); \/\/ Prevent the click event from propagating to taskItem<\/em>
\ntaskList.removeChild(taskItem);<\/em>
\n});<\/em>
\n}<\/em><\/p>\n

\/\/ Add task when the button is clicked<\/em>
\naddTaskButton.addEventListener(‘click’, () => {<\/em>
\nconst taskContent = taskInput.value.trim();<\/em><\/p>\n

if (taskContent) {<\/em>
\ncreateTask(taskContent);<\/em>
\ntaskInput.value = ”; \/\/ Clear the input field<\/em>
\n}<\/em>
\n});<\/em><\/p>\n

\/\/ Optionally, allow the user to press Enter to add a task<\/em>
\ntaskInput.addEventListener(‘keypress’, (event) => {<\/em>
\nif (event.key === ‘Enter’) {<\/em>
\naddTaskButton.click();<\/em>
\n}<\/em>
\n});<\/em><\/p>\n

4. How It Works:<\/h3>\n