Todo List Project In HTML JAVASCRIPT And CSS - letsbug
In this article are building a simple todo list project in HTML and javascript with little styling using CSS. So let's not waste our time get started.
Prerequisite:
- Basic
- HTML
- CSS
- JAVASCRIPT
- JS CONCEPTS
- Arrays
- Event Listeners
- Loops
Todo List In HTML And Javascript
code: 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 List App</title><link rel="stylesheet" href="./style.css"><!-- Add your own font awesome link --><script src="https://kit.fontawesome.com" async defer crossorigin="anonymous"></script><script src="/script.js" async defer></script></head><body><div class="container"><div class="header"><h1>Todo List App</h1></div><div class="content"><div class="todo-form"><h2>Add Todo</h2><form><input type="text" id="todoInput" placeholder="Add ToDo"><button id="submitBtn">Add</button></form></div><div class="todo-list"><h2>Todo List</h2><ul id="todoOutput"></ul></div></div></div></body></html>
code: main.js
const todoInput = document.querySelector('#todoInput');const todoOutput = document.querySelector('#todoOutput');const submitButton = document.querySelector('#submitBtn');const todoList = [];checkList()// add event listener to buttonsubmitButton.addEventListener('click', event => {event.preventDefault()if (todoInput.value === '') {alert('Please enter a value');} else {todoList.push(todoInput.value);todoInput.value = '';todoOutput.innerHTML = '';todoList.forEach((item, index) => {todoOutput.innerHTML += `<li><p>${item}</p><button data-remove="${index}" class="remove" ><i class="fa fa-close"></i></button></li>`;});addEvent()}});function addEvent() {const removeBtn = document.querySelectorAll('.remove');removeBtn.forEach(btn => {btn.addEventListener('click', event => {const index = event.target.dataset.remove;todoList.splice(index, 1);todoOutput.innerHTML = '';todoList.forEach((item, index) => {todoOutput.innerHTML += `<li><p>${item}</p><button data-remove="${index}" class="remove" ><i class="fa fa-close"></i></button></li>`;});addEvent()})})checkList()}function checkList() {if (todoList.length === 0) {todoOutput.innerHTML = '<p class="emptyMessage">No items in list</p>'}}
code: style.css
* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Roboto', sans-serif;font-size: 14px;background: #f5f5f5;width: 100vw;height: 70vh;display: grid;place-items: center;}.container {padding: 2rem;border: 1px solid #ccc;border-radius: 5px;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.header h1 {font-size: 2rem;margin-bottom: 1rem;font-weight: lighter;}.content {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 1rem;margin-top: 1rem;}.content .todo-form {grid-column: 1 / 2;border-right: #ccc 1px solid;padding: 1rem;}.todo-form input {border: 1px solid #ccc;border-radius: 5px;padding: 0.5rem;font-size: 1rem;width: 100%;outline: none;}.todo-form button {margin: .5rem 0;border: 1px solid #ccc;border-radius: 3px;padding: 0.5rem;font-size: 1rem;width: 100%;outline: none;color: rgb(48, 42, 97);font-size: 1rem;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.todo-form h2,.todo-list h2 {font-size: 1.5rem;font-weight: lighter;margin-bottom: 1rem;}.content .todo-list {grid-column: 2 / 2;padding: 1rem;}.todo-list ul {list-style: none;padding: 0;}.todo-list ul li {padding: .2rem .5rem;border-bottom: 1px solid #ccc;border-radius: 5px;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);margin: .5rem 0;color: rgb(61, 61, 80);width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;font-size: medium;}.emptyMessage {margin: 0;font-size: 2rem;font-weight: lighter;color: rgba(32, 31, 31, 0.915);}.remove {padding: .5rem;border: none;background: transparent;color: red;}.remove:hover {cursor: pointer;}
output:
 |
| After adding the items |
 |
| Before adding the items |
Comments
Post a Comment