Hello friends, Welcome to your Techgsr.co blog. And today in this article we will Devloped tudo app using html and css javascript .So let’s go to our to.
Index.html
<!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 APPLICATION</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
</head>
<body class="bg-primary">
<!-- main html content -->
<div class="container my-2">
<h1 class="text-center text-white">TODO APPLICATION</h1>
<div class="card">
<div class="card-body">
<form action="#">
<input
id="title"
type="text"
class="form-control"
placeholder="Enter todo title"
/>
<br />
<textarea
id="desc"
cols="30"
rows="10"
class="form-control"
placeholder="Enter todo description"
></textarea>
<div class="container text-center mt-2">
<button onclick="add_todo()" class="btn btn-primary">
ADD TODO
</button>
</div>
</form>
</div>
</div>
<br />
<div class="main-content" id="main-content"></div>
</div>
<script>
const add_todo = () => {
let title = document.getElementById("title").value;
let desc = document.getElementById("desc").value;
let todos = [];
//string
let localTodos = localStorage.getItem("todos");
if (localTodos != null) {
todos = JSON.parse(localTodos);
}
let todoObject = {
title: title,
desc: desc,
id: Math.trunc(Math.random() * 1000),
};
todos.push(todoObject);
localStorage.setItem("todos", JSON.stringify(todos));
show_todo();
//case:
//
// localStorage.setItem(todos, [{title,desc},{title,desc},{title,desc}]);
//todos=>[]
};
//show the data
const show_todo = () => {
let todoString = localStorage.getItem("todos");
let content = "";
if (todoString == null) {
//no todo
content += "<h3 class='text-white'>NO TODO TO SHOW</h3>";
} else {
let todos = JSON.parse(todoString);
for (let todo of todos.reverse()) {
content += `
<div class='card mt-2'>
<div class='card-body'>
<h3>${todo.title}</h3>
<p>${todo.desc}</p>
</div>
</div>
`;
}
}
document.getElementById("main-content").innerHTML = content;
};
show_todo();
</script>
</body>
</html>
So I hope that you learn about the tudo app using html and css javascript And if you have any more queries about progrmming ,web Devlopment ,tech,computer relegated then feel free to discuss your problem in the comment section.Thank you so much and come back for more updates about Techgsr.co .
Related post