Todo Web Source code free
Here open free source code for todo list web in Html Css and Javascript it is basic task for web developer
free open source code in Git hub repositories for web developer task as a internship
check now to Click Here👇👇
Git hub Repositories : https://github.com/asgaransari19?tab=repositories
todo code :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="todo-container">
<h1>Todo List</h1>
<input type="text" id="todo-input" placeholder="Enter a task...">
<button id="add-todo-btn">Add</button>
<ul id="todo-list">
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.todo-container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin: 50px auto;
padding: 20px;
width: 500px;
}
h1 {
text-align: center;
}
input[type="text"] {
border: none;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
padding: 10px;
width: 70%;
}
button {
background-color: #4CAF50;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
padding: 10px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background-color: #f9f9f9;
border-bottom: 1px solid #ddd;
padding: 10px;
}
li:last-child {
border-bottom: none;
}
Javascript
// Get references to the DOM elements
const todoInput = document.getElementById("todo-input");
const addTodoBtn = document.getElementById("add-todo-btn");
const todoList = document.getElementById("todo-list");
// Define a function to add a new todo item to the list
function addTodo() {
// Get the user input
const todoText = todoInput.value.trim();
// Make sure the user has entered a value
if (todoText.length === 0) {
alert("Please enter a task.");
return;
}
// Create a new list item
const newTodo = document.createElement("li");
newTodo.innerText = todoText;
// Add the list item to the list
todoList.appendChild(newTodo);
// Reset the input field
todoInput.value = "";
}
// Add an event listener to the "Add" button
addTodoBtn.addEventListener("click", addTodo);
This is a very basic implementation of a todo web application. You can expand on this code by adding features like deleting and editing tasks, saving tasks to local storage, and more.
subscribe my youtube channel https://www.youtube.com/@asgartech
No comments: