search

codemistic / Web-Development

A repository to help the open-source community with cool projects
MIT License
292 stars 325 forks source link

To-Do List Web App #501

Open 17AnuragMishra opened 9 months ago

17AnuragMishra commented 9 months ago

<!DOCTYPE html>

To Do List :root { --dark: #34222E; --darker: #1F2937; --darkest: #111827; --grey: #6B7280; --pink: #EC4899; --purple: #8B5CF6; --light: #EEE; } * { margin: 10; box-sizing: border-box; font-family: "Fira sans", sans-serif; } body { display: flex; flex-direction: grid; min-height: 100px; color: #FFF; background-color: var(--dark); } header { padding: 2rem 1rem; max-width: 800px; width: 100%; margin: 0 auto; } header h1{ font-size: 2.5rem; font-weight: 300; color: var(--grey); margin-bottom: 1rem; } #new-plan-form { display: flex;; } input, button { appearance: none; border: none; outline: none; background: none; } #new-plan-input { flex: 1 1 0%; background-color: var(--darker); padding: 1rem; border-radius: 1rem; margin-right: 1rem; color: var(--light); font-size: 1.25rem; } #new-plan-input::placeholder { color: var(--grey); } #new-plan-submit { color: var(--pink); font-size: 1.25rem; font-weight: 700; background-image: linear-gradient(to right, var(--pink), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; cursor: pointer; transition: 0.4s; } #new-plan-submit:hover { opacity: 0.8; } #new-plan-submit:active { opacity: 0.6; } main { flex: 1 1 0%; max-width: 800px; width: 100%; margin: 0 auto; } .plan-list { padding: 1rem; } .plan-list h2 { margin-top: 40px; font-size: 1.5rem; font-weight: 300; color: var(--grey); margin-bottom: 1rem; } #plans .plan { display: flex; justify-content: space-between; background-color: var(--darkest); padding: 1rem; border-radius: 1rem; margin-bottom: 1rem; } .plan .content { flex: 1 1 0%; } .plan .content .text { color: var(--light); font-size: 1.125rem; width: 100%; display: block; transition: 0.4s; } .plan .content .text:not(:read-only) { color: var(--pink); } .plan .actions { display: flex; margin: 0 -0.5rem; } .plan .actions button { cursor: pointer; margin: 0 0.5rem; font-size: 1.125rem; font-weight: 700; text-transform: uppercase; transition: 0.4s; } .plan .actions button:hover { opacity: 0.8; } .plan .actions button:active { opacity: 0.6; } .plan .actions .edit { background-image: linear-gradient(to right, var(--pink), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .plan .actions .delete { color: crimson; }

To Do List

Your Plans/Task

window.addEventListener('load', () => { const form = document.querySelector("#new-plan-form"); const input = document.querySelector("#new-plan-input"); const list_el = document.querySelector("#plans"); form.addEventListener('submit', (e) => { e.preventDefault(); const plan = input.value; const plan_el = document.createElement('div'); plan_el.classList.add('plan'); const plan_content_el = document.createElement('div'); plan_content_el.classList.add('content'); plan_el.appendChild(plan_content_el); const plan_input_el = document.createElement('input'); plan_input_el.classList.add('text'); plan_input_el.type = 'text'; plan_input_el.value = plan; plan_input_el.setAttribute('readonly', 'readonly'); plan_content_el.appendChild(plan_input_el); const plan_actions_el = document.createElement('div'); plan_actions_el.classList.add('actions'); const plan_edit_el = document.createElement('button'); plan_edit_el.classList.add('edit'); plan_edit_el.innerText = 'Edit'; const plan_delete_el = document.createElement('button'); plan_delete_el.classList.add('delete'); plan_delete_el.innerText = 'Delete'; plan_actions_el.appendChild(plan_edit_el); plan_actions_el.appendChild(plan_delete_el); plan_el.appendChild(plan_actions_el); list_el.appendChild(plan_el); input.value = ''; plan_edit_el.addEventListener('click', (e) => { if (plan_edit_el.innerText.toLowerCase() == "edit") { plan_edit_el.innerText = "Save"; plan_input_el.removeAttribute("readonly"); plan_input_el.focus(); } else { plan_edit_el.innerText = "Edit"; plan_input_el.setAttribute("readonly", "readonly"); } }); plan_delete_el.addEventListener('click', (e) => { list_el.removeChild(plan_el); }); }); });