Hands-On Projects with HTML, CSS, and JavaScript
In this blog post, we’ll walk through two hands-on projects that combine HTML, CSS, and JavaScript. These projects will help you build practical skills and apply what you’ve learned in a real-world context. Let’s dive into the projects!
Project 1: Interactive To-Do List
Overview
In this project, we’ll create a simple interactive to-do list where users can add and remove tasks. This project will help you understand how to handle user input, update the DOM, and manage simple state with JavaScript.
Code Samples
HTML: Structure of the To-Do List
html code
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the To-Do List
css/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
input {
width: calc(100% - 100px);
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
button.remove {
background-color: #dc3545;
}
button.remove:hover {
background-color: #c82333;
}
JavaScript: Functionality for the To-Do List
javascript// script.js
document.addEventListener('DOMContentLoaded', () => {
const addTaskButton = document.getElementById('addTaskButton');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// Add task event listener
addTaskButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText) {
// Create new task element
const taskItem = document.createElement('li');
taskItem.innerHTML = `
${taskText}
<button class="remove">Remove</button>
`;
// Add remove event listener
taskItem.querySelector('.remove').addEventListener('click', () => {
taskList.removeChild(taskItem);
});
// Add task to the list
taskList.appendChild(taskItem);
taskInput.value = '';
}
});
// Handle Enter key press
taskInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
addTaskButton.click();
}
});
});
Explanation
- HTML: We define the structure of the to-do list, including an input field for entering tasks, a button to add tasks, and an unordered list to display the tasks.
- CSS: Styles are applied to make the to-do list look clean and user-friendly. We use flexbox for layout and provide styles for buttons and list items.
- JavaScript: This script handles adding new tasks to the list, removing tasks, and allowing tasks to be added when the Enter key is pressed.
Project 2: Simple Image Gallery
Overview
In this project, we’ll create a simple image gallery with a lightbox effect. Clicking on an image will open a larger version in a modal overlay. This project demonstrates handling image click events, displaying modals, and styling with CSS.
Code Samples
HTML: Structure of the Image Gallery
html code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="https://via.placeholder.com/300x200" alt="Sample Image 1" class="gallery-item">
<img src="https://via.placeholder.com/300x200" alt="Sample Image 2" class="gallery-item">
<img src="https://via.placeholder.com/300x200" alt="Sample Image 3" class="gallery-item">
</div>
<div id="lightbox" class="lightbox">
<span id="close" class="close">×</span>
<img id="lightboxImage" class="lightbox-image" src="" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
CSS: Styling the Image Gallery and Lightbox
css code
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.gallery-item {
width: 300px;
height: 200px;
object-fit: cover;
cursor: pointer;
border-radius: 8px;
transition: transform 0.2s ease;
}
.gallery-item:hover {
transform: scale(1.05);
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.lightbox-image {
max-width: 90%;
max-height: 80%;
border-radius: 8px;
}
.close {
position: absolute;
top: 20px;
right: 20px;
font-size: 36px;
color: #fff;
cursor: pointer;
}
JavaScript: Functionality for the Image Gallery
javascript code
// script.js
document.addEventListener('DOMContentLoaded', () => {
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightboxImage');
const closeButton = document.getElementById('close');
const galleryItems = document.querySelectorAll('.gallery-item');
// Open lightbox when an image is clicked
galleryItems.forEach(item => {
item.addEventListener('click', () => {
lightboxImage.src = item.src;
lightbox.style.display = 'flex';
});
});
// Close lightbox when the close button is clicked
closeButton.addEventListener('click', () => {
lightbox.style.display = 'none';
});
// Close lightbox when clicking outside the image
lightbox.addEventListener('click', (event) => {
if (event.target === lightbox) {
lightbox.style.display = 'none';
}
});
});
Explanation
- HTML: We set up a gallery of images and a lightbox modal for displaying larger images.
- CSS: Styles are applied to create a responsive gallery and a lightbox effect. The lightbox is initially hidden and displayed as an overlay.
- JavaScript: This script manages opening and closing the lightbox when an image is clicked or when the close button or overlay is clicked.
Conclusion
These hands-on projects provide a practical way to apply HTML, CSS, and JavaScript skills. By building an interactive to-do list and a simple image gallery, you can see how these technologies work together to create functional and engaging web experiences.
Feel free to modify and expand upon these projects to suit your needs and improve your web development skills. Happy coding!
No comments:
Post a Comment