Project by taking HTML, CSS, JavaScript
Here's a small project that combines HTML, CSS, and JavaScript to create a simple to-do list application:
html
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>To-Do List</h1>
<div id="todo-container">
<input type="text" id="todo-input" placeholder="Add a to-do">
<button id="add-button">Add</button>
</div>
<ul id="todo-list"></ul>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
css
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
h1 {
color: #333;
}
#todo-container {
margin-bottom: 20px;
}
#todo-input {
padding: 8px;
font-size: 16px;
}
#add-button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
padding: 8px;
background-color: #fff;
}
li.completed {
text-decoration: line-through;
background-color: #e0e0e0;
}
</style>
JavaScript (script.js):
javascript
<script>
// Get the input field, add button, and to-do list
const todoInput = document.getElementById("todo-input");
const addButton = document.getElementById("add-button");
const todoList = document.getElementById("todo-list");
// Add event listener to the add button
addButton.addEventListener("click", function() {
// Get the value of the input field
const todoText = todoInput.value;
// Create a new list item element
const listItem = document.createElement("li");
listItem.textContent = todoText;
// Add event listener to mark the item as completed when clicked
listItem.addEventListener("click", function() {
listItem.classList.toggle("completed");
});
// Add the new list item to the to-do list
todoList.appendChild(listItem);
// Clear the input field
todoInput.value = "";
});
</script>In this example, we create a simple to-do list application. The HTML structure consists of a heading, an input field, an add button, and a `<ul>` element for the to-do items.
The CSS file (`styles.css`) contains basic styling rules to set the font family, background color, color, padding, and other styles for the various elements.
The JavaScript code creates event listeners for the add button. When the add button is clicked, it retrieves the value of the input field and creates a new `<li>` element with the to-do item's text. The newly created list item is then added to the to-do list.
Additionally, we add an event listener to each list item so that when an item is clicked, it toggles the "completed" class, which applies strikethrough styling to the item and changes its background color.
Save the HTML code in an HTML file (e.g., `index.html`), the CSS code in a separate CSS file (e.g., `styles.css`), and the JavaScript code in a separate JavaScript file (e.g., `script.js`). Make sure all the files are in
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.