@In @ today’s fast-paced world, effectively managing tasks can significantly boost productivity. Building a to-Do list app is a fantastic way to practice your web development skills while creating a tool you can use daily.
In this blog post, help me guide you through creating a simple yet effective ToDo list app using HTML, CSS, and JavaScript while implementing CRUD (Create, Read, Update, Delete) operations.
<h1>Setting Up Your Project</h1>
<ol>
<li>Creating the Project Structure</li>
<li>Create a new folder: This will be your project directory.</li>
<li>Create three files inside it:
<ul>
<li>index.html</li>
<li>styles.css</li>
<li>script.js</li>
</ul>
</li>
</ol>
<h2>Linking CSS and JavaScript</h2>
In your index.html, ensure you link the styles.css and script.js files within the &lt;head&gt; section, like so:
<pre><code>&lt;!DOCTYPE HTML&gt;
 &lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
 &lt;title&gt;ToDo List App&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt; 
</code></pre>
<h2>Building the HTML Structure</h2>
The Basic Layout
To create your ToDo app’s layout, add the following HTML inside the &lt;body&gt; tag:
<pre><code>&lt;div id=&quot;app&quot;&gt;
 &lt;h1&gt;My ToDo List&lt;/h1&gt;
 &lt;input type=&quot;text&quot; id=&quot;task-input&quot; placeholder=&quot;Add a new task...&quot;&gt;
 &lt;button id=&quot;add-task&quot;&gt;Add Task&lt;/button&gt;
 &lt;ul id=&quot;task-list&quot;&gt;&lt;/ul&gt;
&lt;/div&gt;
</code></pre>
<h3>Understanding HTML Elements</h3>
<ul>
<li>Input Field: Used for adding new tasks.</li>
<li>Button: Triggers task addition.</li>
<li>List: Displays existing tasks.</li>
</ul>
<h2>Styling Your App with CSS</h2>
<h3>Basic Styles</h3>
In styles.css, add some basic styles to enhance the look of your app:
<pre><code>body {
 font-family: Arial, sans-serif;
 background-color: #f4f4f4;
}

#app {
 width: 300px;
 margin: 50px auto;
 padding: 20px;
 background: white;
 border-radius: 8px;
 box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</code></pre>
<h3>Responsive Design</h3>
To ensure your app looks good on all devices, consider using CSS media queries for responsiveness:
<pre><code>@media (max-width: 600px) {
 #app {
 width: 90%;
 }
}
</code></pre>
<h2>Implementing Functionality with JavaScript</h2>
<h3>1. Adding Tasks: Create Functionality</h3>
In your script.js, start with the code to handle task creation:
<pre><code>document.getElementById(&#x27;add-task&#x27;).addEventListener(&#x27;click&#x27;, function() {
 const taskInput = document.getElementById(&#x27;task-input&#x27;);
 const taskText = taskInput.value;
 if (taskText) {
 addTask(taskText);
 taskInput.value = &#x27;&#x27;; // Clear input field
 }
});

function addTask(taskText) {
 const taskList = document.getElementById(&#x27;task-list&#x27;);
 const li = document.createElement(&#x27;li&#x27;);
 li.textContent = taskText;
 taskList.appendChild(li);
}
</code></pre>
<h3>2. Viewing Tasks: Read Functionality</h3>
The tasks will be displayed automatically once added, utilizing the DOM manipulation we performed in the addTask function.
<h3>3. Updating Tasks:</h3>
To allow editing tasks, modify the addTask function so that each task is clickable:
<pre><code>li.addEventListener(&#x27;click&#x27;, function() {
 const newTask = prompt(&#x27;Edit Task&#x27;, li.textContent);
 if (newTask) {
 li.textContent = newTask; // Update task text
 li.addEventListener(&#x27;click&#x27;, ...); // Re-add the edit functionality
 }
});
</code></pre>
<h3>4. Deleting Tasks: Delete Functionality</h3>
To implement task deletion, let’s add a delete button for each task:
<pre><code>const deleteButton = document.createElement(&#x27;button&#x27;);
deleteButton.textContent = &#x27;Delete&#x27;;
li.appendChild(deleteButton);

deleteButton.addEventListener(&#x27;click&#x27;, function() {
 taskList.removeChild(li); // Remove the task from the list
});
</code></pre>
<h2>Conclusion</h2>
Creating a ToDo list app using HTML, CSS, and JavaScript is a rewarding experience. This simple CRUD application helps enhance your skills and serves as a practical tool for task management. By following the steps outlined above, you now have a functional ToDo list app that you can expand upon and customize as needed. Happy <a href="https://app.daily.dev/sidistien" target="_blank" rel="noopener nofollow">coding!</a>

A community for all things frontend! Share tips, tutorials, and resources on HTML, CSS, JavaScript, frameworks (React, Vue, Next js, Angular, and more), performance, UI/UX, and more. Let’s code, learn, and grow together! 🚀👩‍💻👨‍💻


ToDo List App using HTML, CSS and JavaScript (BEGGINERS)