tudo app using html and css javascript

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/[email protected]/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

  1.  tudo app using html and css javascript

  2. how to create age calculator in html project

  3. how to make toast in html css and javascript

  4. how to make copy to clipboard in javascript

  5. how to create email validation in javascript

 

 

how to create age calculator in html project

Hello friends, Welcome to your Techgsr.co blog. And today in this article we will Devloped create age calculator in html project .So let’s go to our to. <!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>Age Calculator</title> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl” crossorigin=”anonymous” /> <style> body { background: … Read more

how to make toast in html css and javascript

Hello friends, Welcome to your Techgsr.co blog. And today in this article we will make toast in html css and javascript .So let’s go to our to. HTML :- <div class=’toast’ style=’display:none’>I did something!</div> <button>Do something!</button>   CSS:- body, html { height:100%; width:100%; min-height:100%; padding:0; margin:0; } .toast { width:200px; height:20px; height:auto; position:absolute; left:50%; margin-left:-100px; bottom:10px; background-color: #35bc7a; … Read more

how to make copy to clipboard in javascript

Hello friends, Welcome to your Techgsr.co blog. And today in this article we will developed copy to clipboard in javascript   .So let’s go to our to. HTML code:- <p> <button class=”js-textareacopybtn” style=”vertical-align:top;”>Copy Textarea</button> <textarea class=”js-copytextarea”>Hello I’m some text</textarea> </p> Javascipt:- var copyTextareaBtn = document.querySelector(‘.js-textareacopybtn’); copyTextareaBtn.addEventListener(‘click’, function(event) { var copyTextarea = document.querySelector(‘.js-copytextarea’); copyTextarea.focus(); copyTextarea.select(); try { … Read more