tudo app using html and css javascript

tudo app using html and css javascript

code for tudo app```<a href="http://techgsr.co" target="_blank" rel="noopener">lern more</a>``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta...

code for tudo app<a href="http://techgsr.co" target="_blank" rel="noopener">lern more</a>

TODO APPLICATION
<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>

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

To-Do App using HTML, CSS and JavaScript | Build Real and Simple To-Do app | To-Do App in JavaScript

Build Real and Simple To-Do application using HTML, CSS and JavaScript. This To-Do application upports, Creating, Validating, and Deleting a to-do item Create and add to-do items in cool tiles.

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Responsive Personal Portfolio Website HTML CSS and JavaScript (Bootstrap 4)Hello viewers, Today in this video you’ll learn how to create a Fully Responsive P...

How To Create Chat Box Using HTML CSS & JavaScript | Chat Box Using HTML & CSS

In this video, How To Create Chat Box Using HTML CSS & JavaScript | Chat Box Using HTML & CSS

Slideshow with HTML, CSS, and JavaScript / How to create Slideshow using HTML, CSS, and JavaScript

In this tutorial, you will learn about how to build a cool Slideshow using HTML, CSS, and JavaScript