JavaScript Todo list App with Local Storage.
In this video, I will show you how to create a to-do list app using HTML, CSS, and javascript.
Source code to create a todo list app using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
form {
width: 80%;
}
form * {
width: 100%;
height: 20px;
margin-top: 2px;
}
table {
width: 80%;
}
th,
td {
border: 1px solid #000;
}
h1 {
color: brown;
}
td[onclick] {
background-color: red;
color: #fff;
border-radius: 5px;
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<h1>Todo App</h1>
<form>
<input type="text" required>
<input type="submit">
</form>
<table>
<thead>
<tr>
<th>Todo's</th>
<th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// ["gfgf","hggbhd"]
let form = document.querySelector("form");
let ls = localStorage.getItem('todo');
let todo = ls ? JSON.parse(ls) : [];
form.addEventListener('submit', (e) => {
e.preventDefault();
let inpData = form[0].value;
todo.push(inpData)
localStorage.setItem('todo', JSON.stringify(todo))
location.reload()
})
todo.map((data, index) => {
document.querySelector("tbody").innerHTML += `
<tr>
<td>${data}</td>
<td onclick="del(${index})">Delete</td>
</tr>
`;
})
function del(e) {
let deleted = todo.filter((data, index) => {
return index !== e;
})
localStorage.setItem('todo', JSON.stringify(deleted))
location.reload()
}
</script>
</body>
</html>
- Convert HTML CSS to PDF with JavaScript | HTML to PDF
- Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email
- CRUD App Using HTML - CSS - JavaScript and IndexedDB API
- Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script
- How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript
- Fetch and Read Excel Sheets Data in HTML Table with JavaScript
- JavaScript Todo List App with Local Storage | Todo App | Javascript Project
- Fetch and Display Multiple CSV Files in HTML Table with JavaScript | CSV to HTML | Read CSV
- Create a Math Quiz App using HTML CSS and JavaScript | JS Quiz App | JavaScript Project
- Speech to Text with JavaScript | Speech to Text App | JS
- Create a Text to Speech App with JavaScript | JS
- Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS
- Validate and show Preview of Single or Multiple Image before upload in server with Javascript | Js
- Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas | javascript | js
- Match Media Queries With JavaScript matchMedia Method
- Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader
- How to read csv data in html table using Javascript ( JS )
No comments:
Post a Comment