Day 10: Review and Mini-Project
Overview
Today, we will review the content we have covered in this module and work on a mini-project to apply what we have learned. This session will also include a Q&A to clarify any doubts.
Review of Key Concepts
- HTML Basics: Structure, elements, and tags.
- HTML Lists: Ordered and unordered lists.
- HTML Tables: Creating tables with rows and columns.
- CSS Basics: Syntax, selectors, properties.
- CSS Styling: Colors, backgrounds, borders, margins, paddings.
- JavaScript Basics: Syntax, variables, data types.
- JavaScript Control Structures: Operators, conditionals, loops.
- JavaScript Functions and Events: Defining and calling functions, handling events.
- JavaScript DOM Manipulation: Accessing and modifying DOM elements.
Q&A Session
Please feel free to ask any questions you may have about the topics covered so far. This is your chance to clarify any doubts and ensure you have a solid understanding of the material.
Mini-Project: Adding Interactivity
For today's mini-project, we will create a simple interactive webpage using HTML, CSS, and JavaScript. The project will include:
- A button that changes the background color of a div when clicked.
- An input field that updates a paragraph's content as you type.
Here's the code for the mini-project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini-Project: Interactive Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #0056b3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #003f8a;
}
input[type="text"] {
padding: 10px;
width: calc(100% - 22px);
border: 1px solid #ddd;
border-radius: 5px;
}
.color-box {
width: 100%;
height: 100px;
background-color: #e4e4e4;
margin: 20px 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h2>Mini-Project: Interactive Webpage</h2>
<button id="colorButton">Change Color</button>
<div id="colorBox" class="color-box"></div>
<input type="text" id="textInput" placeholder="Type something...">
<p id="displayText">This text will update as you type.</p>
</div>
<script>
// JavaScript for interactivity
// Change color functionality
document.getElementById('colorButton').addEventListener('click', function() {
document.getElementById('colorBox').style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
});
// Update text functionality
document.getElementById('textInput').addEventListener('input', function() {
document.getElementById('displayText').textContent = this.value;
});
</script>
</body>
</html>
Practice Exercise
Try adding more interactive elements to the webpage, such as:
- A button that changes the text color of a paragraph.
- An input field that updates the background color of a div.
// Your code here
// Example for changing text color
document.getElementById('textColorButton').addEventListener('click', function() {
document.getElementById('displayText').style.color = '#'+Math.floor(Math.random()*16777215).toString(16);
});
// Example for changing background color
document.getElementById('bgColorInput').addEventListener('input', function() {
document.getElementById('colorBox').style.backgroundColor = this.value;
});
Summary
In today's lesson, we reviewed the key concepts from this module and completed a mini-project to add interactivity to a webpage using HTML, CSS, and JavaScript. This project helped reinforce your understanding of DOM manipulation and event handling.