In the modern web development landscape, frameworks and libraries like React, Angular, and Vue often steal the spotlight. However, the core of all these tools—Vanilla JavaScript—remains powerful and capable of building fully functional web applications without the need for additional libraries. This tutorial will guide you through creating a simple web application using only Vanilla JavaScript, HTML, and CSS, reinforcing the fundamentals and demonstrating the language's capabilities.
Getting Started: Planning Your Application
Before diving into code, it's crucial to plan your application. For this tutorial, we'll build a simple To-Do List application. This app will allow users to add tasks, mark them as completed, and delete them. Here's what we need:
- An input field to add new tasks.
- A button to submit the task.
- A list to display tasks.
- Each task will have a checkbox to mark it as completed and a delete button to remove it.
Setting Up Your Project
Create a new directory for your project and inside that, create three files: index.html, style.css, and app.js.
The HTML Structure
In your index.html, set up the basic HTML structure and link your CSS and JavaScript files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla JS To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>Styling Your Application
Use style.css to add some basic styling to your application. This step is subjective, so feel free to customize it as you see fit.
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 30px auto;
text-align: center;
}
input, button {
padding: 10px;
font-size: 16px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 10px 0;
align-items: center;
display: flex;
justify-content: space-between;
}
.completed {
text-decoration: line-through;
}The JavaScript Logic
Now, let's add functionality to our application using Vanilla JavaScript in app.js.
document.addEventListener('DOMContentLoaded', () => {
const addButton = document.getElementById('addTaskBtn');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
addButton.addEventListener('click', addTask);
function addTask() {
const taskValue = taskInput.value.trim();
if (!taskValue) {
alert('Please enter a task.');
return;
}
const listItem = document.createElement('li');
const taskText = document.createElement('span');
taskText.textContent = taskValue;
listItem.appendChild(taskText);
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function() {
listItem.remove();
};
listItem.appendChild(deleteButton);
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.onchange = function() {
if (checkBox.checked) {
taskText.classList.add('completed');
} else {
taskText.classList.remove('completed');
}
};
listItem.appendChild(checkBox);
taskList.appendChild(listItem);
taskInput.value = ''; // Clear input field after adding
}
});Congratulations! You've just built a simple web application using Vanilla JavaScript. While frameworks and libraries can be helpful for complex applications, understanding the fundamentals of Vanilla JavaScript is invaluable. It not only strengthens your foundation in web development but also enhances your ability to pick up and work with any JavaScript-based technology in the future.
