Introduction
In the world of web development, interactivity plays a crucial role in enhancing user engagement and overall user experience. While there are many libraries and frameworks available for creating interactive web applications, sometimes it’s beneficial to build things from scratch using just plain Vanilla JavaScript. In this blog, we’ll explore the process of building interactive web applications using the power of vanilla JavaScript without relying on any external libraries.
Why Use Vanilla JavaScript?
Before we dive into the details, let’s quickly discuss why you might want to use Vanilla JavaScript.
1. Learning and Understanding: Building applications from scratch using Vanilla JavaScript helps you gain a deep understanding of how JavaScript works, as you’re directly manipulating the DOM and handling events.
2. Performance: Since you’re not adding extra layers of abstraction, your application can potentially have better performance compared to those built using large frameworks.
3. Flexibility: You have complete control over every aspect of your code, which allows you to implement custom solutions tailored to your specific project requirements.
4. Lightweight Applications: Using vanilla JavaScript reduces the size and complexity of your codebase, resulting in faster load times and better performance for your web applications.
Setting Up the Project
Start by creating a new directory for your project and setting up the basic structure:
project-directory/
|-- index.html
|-- styles.css
|-- script.js
In index.html, you’ll set up the basic HTML structure, including a form for adding tasks and a list to display tasks. The styles.css file will handle the visual styling of your application, and the script.js file will contain your JavaScript code.
Creating the HTML Structure
Here’s a simple HTML structure for your to-do list application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Interactive To-Do List</title>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<form id="task-form">
<input type="text" id="task-input" placeholder="Add a new task..." />
<button type="submit">Add Task</button>
</form>
<ul id="task-list">
<!-- Tasks will be added here dynamically -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
In your styles.css file, you can add some basic styling to make your application visually appealing:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 400px;
}
h1 {
text-align: center;
}
form {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
Adding JavaScript Interactivity
Now comes the adding interactivity to your application using Vanilla JavaScript in the script.js file. Here’s a step-by-step breakdown of what you’ll do:
1. Selecting Elements: Use the document.querySelector method to select the necessary elements from the DOM.
2. Adding Event Listeners: Attach event listeners to the form and button elements to handle form submission.
3. Creating Tasks: When the form is submitted, extract the task text from the input field and create a new list item element to represent the task.
4. Displaying Tasks: Append the newly created task element to the task list.
5. Completing Tasks: Add event listeners to the task items to mark them as completed when clicked.
6. Deleting Tasks: Add a delete button to each task item and implement functionality to remove tasks when the button is clicked.
Here’s a basic implementation of these steps:
document.addEventListener("DOMContentLoaded", function () {
const taskForm = document.getElementById("task-form");
const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");
taskForm.addEventListener("submit", function (event) {
event.preventDefault();
const taskText = taskInput.value.trim();
if (taskText !== "") {
const taskItem = document.createElement("li");
taskItem.innerHTML = `
<span>${taskText}</span>
<button class="complete-btn">Complete</button>
<button class="delete-btn">Delete</button>
`;
taskList.appendChild(taskItem);
taskInput.value = "";
}
});
taskList.addEventListener("click", function (event) {
if (event.target.classList.contains("complete-btn")) {
event.target.parentElement.classList.toggle("completed");
} else if (event.target.classList.contains("delete-btn")) {
event.target.parentElement.remove();
}
});
});
Conclusion
Building interactive web applications with Vanilla JavaScript provides a hands-on learning experience and a deep understanding of how the underlying technologies work. By following the steps outlined in this blog, you can create robust, responsive, and engaging web applications that showcase the power and versatility of pure JavaScript. Happy coding!
Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency
