todo app with interface in javascript

To create a todo app with an interface in JavaScript, you can follow these steps:

Create an HTML template for your todo app using HTML and CSS. This template should include the input field where the user can enter new todo items and the list where the todo items will be displayed.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Todo App</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Todo App</h1>
    <div id="form">
      <input type="text" id="todo-input" placeholder="Enter a new todo...">
      <button id="add-btn">Add</button>
    </div>
    <ul id="todo-list"></ul>
    
    <script src="app.js"></script>
  </body>
</html>
407 chars
19 lines

Add a JavaScript file to your project and select the HTML elements that you need to work with using the Document Object Model (DOM). In this case, you need to select the input field, the add button, and the todo list.


index.tsx
const input = document.getElementById('todo-input');
const addButton = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
162 chars
4 lines

Add an event listener to the add button so that when the user clicks on it, a new todo item is added to the list. When the button is clicked, you should create a new list item element and set its text content to be the value of the input field. Then, you can append this new list item to the todo list.


index.tsx
addButton.addEventListener('click', () => {
  const newTodo = document.createElement('li');
  newTodo.textContent = input.value;
  todoList.appendChild(newTodo);
  input.value = '';
});
186 chars
7 lines

If you want to allow the user to mark a todo item as completed or delete a todo item, you can add event listeners to the list items. When a user clicks on a list item, you can change its appearance to show that it's completed. When a user double-clicks on a list item, you can remove it from the list.


index.tsx
todoList.addEventListener('click', (event) => {
  const target = event.target;
  if (target.tagName === 'LI') {
    target.classList.toggle('completed');
  }
});

todoList.addEventListener('dblclick', (event) => {
  const target = event.target;
  if (target.tagName === 'LI') {
    todoList.removeChild(target);
  }
});
320 chars
14 lines

Style your app using CSS to make it more visually appealing and user-friendly.


h1 {
  font-size: 2.5rem;
  text-align: center;
}

#form {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

#todo-input {
  padding: 0.5rem;
  width: 50%;
  border-radius: 0.25rem 0 0 0.25rem;
  border: 1px solid black;
}

#add-btn {
  padding: 0.5rem;
  border: 1px solid black;
  background-color: lightblue;
  border-radius: 0 0.25rem 0.25rem 0;
}

#todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.completed {
  text-decoration: line-through;
  color: grey;
}
499 chars
36 lines

similar javascript code snippets

todo app in javascript

sortable list of todo items in javascript

how to use useeffect in javascript

how to create fibonacci in javascript

how to create a proxy variable in javascript

how to parse a json string in javascript

loop in javascript

how to use usestate in javascript

create a loop in javascript

loop from 1 to 10 in javascript

related categories