Day 14: JavaScript Projects
Welcome back! Today, we’ll put all the concepts we’ve learned from Day 8 to Day 13 into practice by building some exciting projects. These projects will help you reinforce your understanding of DOM manipulation, event listeners, form handling and validation, asynchronous behavior, error handling, and working with APIs.
Project 1: To-Do List Application
Concepts Covered:
DOM Manipulation
Event Listeners
Form Handling and Validation
Description: Build a to-do list application where users can add, delete, and mark tasks as completed. Use form validation to ensure that tasks are not empty.
Steps:
Create an HTML form with an input field and a button to add tasks.
Use JavaScript to handle form submission and add new tasks to the list.
Implement event listeners to handle task completion and deletion.
Use CSS to style the application.
Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
/* Add CSS file here */
</style>
</head>
<body>
<h1>To-Do List</h1>
<form id="todo-form">
<input type="text" id="task-input" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<ul id="task-list"></ul>
<script>
document.getElementById('todo-form').addEventListener('submit', function(event) {
event.preventDefault();
const taskInput = document.getElementById('task-input');
const task = taskInput.value.trim();
if (task) {
addTask(task);
taskInput.value = '';
}
});
function addTask(task) {
const taskList = document.getElementById('task-list');
const listItem = document.createElement('li');
listItem.textContent = task;
taskList.appendChild(listItem);
}
</script>
</body>
</html>
Project 2: Weather App
Concepts Covered:
Working with APIs
Asynchronous Behavior (Fetch API)
Error Handling
Description: Create a weather application that fetches weather data from an API and displays it to the user. Handle any errors that may occur during the API call.
Steps:
Sign up for a free weather API (e.g., OpenWeatherMap) and get an API key.
Create an HTML form to accept the city name from the user.
Use the Fetch API to get weather data for the entered city.
Display the weather information on the page.
Handle errors and display appropriate messages.
Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<style>
/* Add your CSS styling here */
</style>
</head>
<body>
<h1>Weather App</h1>
<form id="weather-form">
<input type="text" id="city-input" placeholder="Enter city name" required>
<button type="submit">Get Weather</button>
</form>
<div id="weather-result"></div>
<script>
document.getElementById('weather-form').addEventListener('submit', async function(event) {
event.preventDefault();
const cityInput = document.getElementById('city-input');
const city = cityInput.value.trim();
if (city) {
getWeather(city);
}
});
async function getWeather(city) {
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error('City not found');
}
const data = await response.json();
displayWeather(data);
} catch (error) {
document.getElementById('weather-result').textContent = error.message;
}
}
function displayWeather(data) {
const weatherResult = document.getElementById('weather-result');
weatherResult.innerHTML = `
<h2>${data.name}</h2>
<p>Temperature: ${data.main.temp}°C</p>
<p>Weather: ${data.weather[0].description}</p>
`;
}
</script>
</body>
</html>
Project 3: User Registration Form
Concepts Covered:
Form Handling and Validation
Error Handling
DOM Manipulation
Description: Create a user registration form with client-side validation. Ensure all fields are filled out correctly and provide feedback to the user.
Steps:
Create an HTML form with fields for username, email, and password.
Use JavaScript to handle form submission and validate the input fields.
Display error messages for invalid inputs.
Show a success message upon successful form submission.
Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
<style>
/* Add your CSS styling here */
</style>
</head>
<body>
<h1>User Registration Form</h1>
<form id="registration-form">
<label for="username">Username:</label>
<input type="text" id="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" required>
<br>
<button type="submit">Register</button>
</form>
<div id="form-result"></div>
<script>
document.getElementById('registration-form').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value.trim();
const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value.trim();
if (validateForm(username, email, password)) {
document.getElementById('form-result').textContent = 'Registration successful!';
}
});
function validateForm(username, email, password) {
if (!username || !email || !password) {
document.getElementById('form-result').textContent = 'All fields are required.';
return false;
}
if (!validateEmail(email)) {
document.getElementById('form-result').textContent = 'Invalid email address.';
return false;
}
return true;
}
function validateEmail(email) {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(email);
}
</script>
</body>
</html>
Summary
These projects will help you to apply what we have learned about DOM manipulation, event listeners, form handling and validation, asynchronous behavior, error handling, and working with APIs. Building these projects will solidify the understanding of JavaScript. Happy coding!
