In this day to day as things touch’s new peak you we human nowadays can’t be able to remember many things for that we used to use sticky notes which we used to stick on fridge & calendars. But nowadays there are some features in smartphone such as remainders & notes but in computers we can create To-Do List which adds al our necessary day to day works and keep us reminding.

How to Make a Todo List using JavaScript

So Hey Guys Welcome to Codewithrandom, In this blog we’ll learn how to create To-Do List. I hope you have got an idea about the project.

HTML Code for To-Do List 

<main id=app></main>

In this code simply we have added one line under main tag and given an id which can be called later in the CSS code or JS code. Now, let us style the project using CSS.

Ecommerce Website Using Html Css And Javascript Source Code

CSS Code for To-Do List

@import "https://unpkg.com/water.css@2/out/water.min.css";

body {
  font-size: 1.5em;
}

section {
  display: flex;
}

In this CSS code we imported a css template defined the font-size which is in the body and kept the section flex. Let’s code the JS part to make it responsive

JavaScript for To-Do List

import { h, text, app } from "https://esm.run/hyperapp"

const AddTodo = (state) => ({
  ...state,
  value: "",
  todos: state.todos.concat(state.value)
})

const NewValue = (state, event) => ({
  ...state,
  value: event.target.value,
})

app({
  init: { todos: ["Learn Hyperapp"], value: "" },
  view: ({ todos, value }) =>
    h("main", {}, [
      h("h1", {}, text("To-do list ✏️")),
      h("ul", {},
        todos.map((todo) => h("li", {}, text(todo)))
      ),
      h("section", {}, [
        h("input", { type: "text", oninput: NewValue, value }),
        h("button", { onclick: AddTodo }, text("Add new")),        
      ])
    ]),
  node: document.getElementById("app"),
})

In this JS code we have imported an template of JS and for working we have called the id which was defined in the HTML code and made it working and added a heading in it. Let us see the final output.

Final Output

We have Successfully created our Simple To-Do List using HTML5, CSS3 & JS | To-Do List JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Jorge Bucaran