How To Create a To-Do List App Using JavaScript. You Can get the code from here. Copy all the code and use it in your project.
Grocery Bud To-Do
HTML Code :
CSS Code :
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: #49a6e9;
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img:not(.logo) {
width: 100%;
}
img {
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: transparent;
color: var(--clr-black);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid var(--clr-black);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
}
.btn:hover {
color: var(--clr-white);
background: var(--clr-black);
}
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 35rem;
margin-top: 8rem;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Grocery List
===============
*/
.section-center {
background: var(--clr-white);
border-radius: var(--radius);
box-shadow: var(--light-shadow);
transition: var(--transition);
padding: 2rem;
}
.section-center:hover {
box-shadow: var(--dark-shadow);
}
.alert {
margin-bottom: 1rem;
height: 1.25rem;
display: grid;
align-items: center;
text-align: center;
font-size: 0.7rem;
border-radius: 0.25rem;
letter-spacing: var(--spacing);
text-transform: capitalize;
}
.alert-danger {
color: #721c24;
background: #f8d7da;
}
.alert-success {
color: #155724;
background: #d4edda;
}
.grocery-form h3 {
color: var(--clr-primary-1);
margin-bottom: 1.5rem;
text-align: center;
}
.form-control {
display: flex;
justify-content: center;
}
#grocery {
padding: 0.25rem;
padding-left: 1rem;
background: var(--clr-grey-10);
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
border-color: transparent;
font-size: 1rem;
flex: 1 0 auto;
color: var(--clr-grey-5);
}
#grocery::placeholder {
font-family: var(--ff-secondary);
color: var(--clr-grey-5);
}
.submit-btn {
background: var(--clr-primary-8);
border-color: transparent;
flex: 0 0 5rem;
display: grid;
align-items: center;
padding: 0.25rem;
text-transform: capitalize;
letter-spacing: 2px;
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
cursor: pointer;
content: var(--clr-primary-5);
transition: var(--transition);
font-size: 0.85rem;
}
.submit-btn:hover {
background: var(--clr-primary-5);
color: var(--clr-white);
}
.grocery-container {
margin-top: 2rem;
transition: var(--transition);
visibility: hidden;
}
.show-container {
visibility: visible;
}
.grocery-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
transition: var(--transition);
padding: 0.25rem 1rem;
border-radius: var(--radius);
text-transform: capitalize;
}
.grocery-item:hover {
color: var(--clr-grey-5);
background: var(--clr-grey-10);
}
.grocery-item:hover .title {
color: var(--clr-grey-5);
}
.title {
margin-bottom: 0;
color: var(--clr-grey-1);
letter-spacing: 2px;
transition: var(--transition);
}
.edit-btn,
.delete-btn {
background: transparent;
border-color: transparent;
cursor: pointer;
font-size: 0.7rem;
margin: 0 0.15rem;
transition: var(--transition);
}
.edit-btn {
color: var(--clr-green-light);
}
.edit-btn:hover {
color: var(--clr-green-dark);
}
.delete-btn {
color: var(--clr-red-light);
}
.delete-btn:hover {
color: var(--clr-red-dark);
}
.clear-btn {
text-transform: capitalize;
width: 10rem;
height: 1.5rem;
display: grid;
align-items: center;
background: transparent;
border-color: transparent;
color: var(--clr-red-light);
margin: 0 auto;
font-size: 0.85rem;
letter-spacing: var(--spacing);
cursor: pointer;
transition: var(--transition);
margin-top: 1.25rem;
}
.clear-btn:hover {
color: var(--clr-red-dark);
}
JavaScript Code :
// ****** select items **********
const form = document.querySelector(".grocery-form");
const alert = document.querySelector(".alert");
const grocery = document.getElementById("grocery");
const submitBtn = document.querySelector(".submit-btn");
const container = document.querySelector(".grocery-container");
const list = document.querySelector(".grocery-list");
const clearBtn = document.querySelector(".clear-btn");
// edit option
let editElement;
let editFlag = false;
let editID = "";
// ****** event listeners **********
// submit form
form.addEventListener("submit", addItem);
// clear list
clearBtn.addEventListener("click", clearItems);
// display items onload
window.addEventListener("DOMContentLoaded", setupItems);
// ****** functions **********
// add item
function addItem(e) {
e.preventDefault();
const value = grocery.value;
const id = new Date().getTime().toString();
if (value !== "" && !editFlag) {
const element = document.createElement("article");
let attr = document.createAttribute("data-id");
attr.value = id;
element.setAttributeNode(attr);
element.classList.add("grocery-item");
element.innerHTML = `${value}
`;
// add event listeners to both buttons;
const deleteBtn = element.querySelector(".delete-btn");
deleteBtn.addEventListener("click", deleteItem);
const editBtn = element.querySelector(".edit-btn");
editBtn.addEventListener("click", editItem);
// append child
list.appendChild(element);
// display alert
displayAlert("item added to the list", "success");
// show container
container.classList.add("show-container");
// set local storage
addToLocalStorage(id, value);
// set back to default
setBackToDefault();
} else if (value !== "" && editFlag) {
editElement.innerHTML = value;
displayAlert("value changed", "success");
// edit local storage
editLocalStorage(editID, value);
setBackToDefault();
} else {
displayAlert("please enter value", "danger");
}
}
// display alert
function displayAlert(text, action) {
alert.textContent = text;
alert.classList.add(`alert-${action}`);
// remove alert
setTimeout(function () {
alert.textContent = "";
alert.classList.remove(`alert-${action}`);
}, 1000);
}
// clear items
function clearItems() {
const items = document.querySelectorAll(".grocery-item");
if (items.length > 0) {
items.forEach(function (item) {
list.removeChild(item);
});
}
container.classList.remove("show-container");
displayAlert("empty list", "danger");
setBackToDefault();
localStorage.removeItem("list");
}
// delete item
function deleteItem(e) {
const element = e.currentTarget.parentElement.parentElement;
const id = element.dataset.id;
list.removeChild(element);
if (list.children.length === 0) {
container.classList.remove("show-container");
}
displayAlert("item removed", "danger");
setBackToDefault();
// remove from local storage
removeFromLocalStorage(id);
}
// edit item
function editItem(e) {
const element = e.currentTarget.parentElement.parentElement;
// set edit item
editElement = e.currentTarget.parentElement.previousElementSibling;
// set form value
grocery.value = editElement.innerHTML;
editFlag = true;
editID = element.dataset.id;
//
submitBtn.textContent = "edit";
}
// set backt to defaults
function setBackToDefault() {
grocery.value = "";
editFlag = false;
editID = "";
submitBtn.textContent = "submit";
}
// ****** local storage **********
// add to local storage
function addToLocalStorage(id, value) {
const grocery = { id, value };
let items = getLocalStorage();
items.push(grocery);
localStorage.setItem("list", JSON.stringify(items));
}
function getLocalStorage() {
return localStorage.getItem("list")
? JSON.parse(localStorage.getItem("list"))
: [];
}
function removeFromLocalStorage(id) {
let items = getLocalStorage();
items = items.filter(function (item) {
if (item.id !== id) {
return item;
}
});
localStorage.setItem("list", JSON.stringify(items));
}
function editLocalStorage(id, value) {
let items = getLocalStorage();
items = items.map(function (item) {
if (item.id === id) {
item.value = value;
}
return item;
});
localStorage.setItem("list", JSON.stringify(items));
}
// SETUP LOCALSTORAGE.REMOVEITEM('LIST');
// ****** setup items **********
function setupItems() {
let items = getLocalStorage();
if (items.length > 0) {
items.forEach(function (item) {
createListItem(item.id, item.value);
});
container.classList.add("show-container");
}
}
function createListItem(id, value) {
const element = document.createElement("article");
let attr = document.createAttribute("data-id");
attr.value = id;
element.setAttributeNode(attr);
element.classList.add("grocery-item");
element.innerHTML = `${value}
`;
// add event listeners to both buttons;
const deleteBtn = element.querySelector(".delete-btn");
deleteBtn.addEventListener("click", deleteItem);
const editBtn = element.querySelector(".edit-btn");
editBtn.addEventListener("click", editItem);
// append child
list.appendChild(element);
}
Tags
