Added date picker

ExtF8 · Feb 20, 2024 · 4643df2 · 4643df2
1 parent da4b304
commit 4643df2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>To Do Or Not</title><link rel="icon" type="image/x-icon" href="assets/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png"><link rel="icon" type="image/png" sizes="48x48" href="assets/favicon-48x48.png"><link rel="manifest" href="assets/manifest.webmanifest"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#333"><meta name="application-name" content="todoornot"><link rel="apple-touch-icon" sizes="57x57" href="assets/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="assets/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="assets/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="assets/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="assets/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="assets/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="assets/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="assets/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="167x167" href="assets/apple-touch-icon-167x167.png"><link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon-180x180.png"><link rel="apple-touch-icon" sizes="1024x1024" href="assets/apple-touch-icon-1024x1024.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="todoornot"><script defer="defer" src="runtime.bundle.js"></script><script defer="defer" src="main.bundle.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="main-container"><header id="cs-navigation"><div class="cs-container"><a href="" class="page-title" aria-label="back to home"><h1>To Do Or Not</h1></a><nav class="cs-nav" role="navigation"><button class="cs-toggle" aria-label="mobile menu toggle"><div class="cs-box" aria-hidden="true"><span class="cs-line cs-line1" aria-hidden="true"></span> <span class="cs-line cs-line2" aria-hidden="true"></span> <span class="cs-line cs-line3" aria-hidden="true"></span></div></button><div class="cs-ul-wrapper"><ul id="cs-expanded" class="cs-ul" aria-expanded="false"><li class="cs-li" id="home"><a href="" class="cs-li-link cs-active">Home</a></li><li class="cs-li" id="today"><a href="" class="cs-li-link">Today</a></li><li class="cs-li"><a href="" class="cs-li-link">Week</a></li><li class="cs-li cs-dropdown" tabindex="0"><span class="cs-li-link">Projects <img class="cs-drop-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fdown.svg" alt="dropdown icon" width="15" height="15" decoding="async" aria-hidden="true"/></span><ul class="cs-drop-ul"><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li></ul></li><li class="cs-li"><a href="" class="cs-li-link">Notes</a></li></ul></div></nav><button class="cs-button-solid cs-nav-button" id="newTodoButton">Add New</button> <button id="dark-mode-toggle" aria-label="dark mode toggle"><svg class="cs-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background: new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg> <img class="cs-sun" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fsun.svg" decoding="async" alt="moon" width="15" height="15"/></button></div></header><section id="content"></section></div><dialog id="dialog"><section id="todo-form-container"><div class="cs-container"><div class="cs-content"><button id="dialog-close-btn" class="close-container" onclick="performClose()"><div class="leftright close"></div><div class="rightleft close"></div></button> <span class="cs-topper">Add new</span><h2 class="cs-title">Todo</h2><p class="cs-text">title, description, dueDate and priority</p></div><form id="todo-form" name="New Todo" method="dialog"><label class="cs-label">Title <input class="cs-input" required id="title" name="title" placeholder="Title"/></label> <label class="cs-label" id="project-container">Project <input class="cs-input project-container-input" id="project" name="project" placeholder="Create new or select existing project"/> <button class="add-project-button" type="add" name="add-project" id="add-project">+</button></label> <label class="cs-label">Description <input class="cs-input" id="description" name="description" placeholder="Why?"/></label> <label class="cs-label">When? <input class="cs-input" required id="dueDate" name="dueDate" placeholder="When?"/></label><div class="cs-label">Priority<div id="priority" class="priority-container"><input name="priority" type="radio" value="low" id="priority-low" required/> <label for="priority-low" class="priority-button low">Low</label> <input name="priority" type="radio" value="medium" id="priority-medium" required/> <label for="priority-medium" class="priority-button medium">Medium</label> <input name="priority" type="radio" value="high" id="priority-high"/> <label for="priority-high" class="priority-button high">High</label></div></div><button class="cs-button-solid cs-submit" type="submit">Add</button></form></div></section></dialog><script>const newTodoButton = document.getElementById('newTodoButton');
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>To Do Or Not</title><link rel="icon" type="image/x-icon" href="assets/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png"><link rel="icon" type="image/png" sizes="48x48" href="assets/favicon-48x48.png"><link rel="manifest" href="assets/manifest.webmanifest"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#333"><meta name="application-name" content="todoornot"><link rel="apple-touch-icon" sizes="57x57" href="assets/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="assets/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="assets/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="assets/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="assets/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="assets/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="assets/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="assets/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="167x167" href="assets/apple-touch-icon-167x167.png"><link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon-180x180.png"><link rel="apple-touch-icon" sizes="1024x1024" href="assets/apple-touch-icon-1024x1024.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="todoornot"><script defer="defer" src="runtime.bundle.js"></script><script defer="defer" src="main.bundle.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="main-container"><header id="cs-navigation"><div class="cs-container"><a href="" class="page-title" aria-label="back to home"><h1>To Do Or Not</h1></a><nav class="cs-nav" role="navigation"><button class="cs-toggle" aria-label="mobile menu toggle"><div class="cs-box" aria-hidden="true"><span class="cs-line cs-line1" aria-hidden="true"></span> <span class="cs-line cs-line2" aria-hidden="true"></span> <span class="cs-line cs-line3" aria-hidden="true"></span></div></button><div class="cs-ul-wrapper"><ul id="cs-expanded" class="cs-ul" aria-expanded="false"><li class="cs-li" id="home"><a href="" class="cs-li-link cs-active">Home</a></li><li class="cs-li" id="today"><a href="" class="cs-li-link">Today</a></li><li class="cs-li"><a href="" class="cs-li-link">Week</a></li><li class="cs-li cs-dropdown" tabindex="0"><span class="cs-li-link">Projects <img class="cs-drop-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fdown.svg" alt="dropdown icon" width="15" height="15" decoding="async" aria-hidden="true"/></span><ul class="cs-drop-ul"><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li><li class="cs-drop-li"><a href="" class="cs-li-link cs-drop-link">Project</a></li></ul></li><li class="cs-li"><a href="" class="cs-li-link">Notes</a></li></ul></div></nav><button class="cs-button-solid cs-nav-button" id="newTodoButton">Add New</button> <button id="dark-mode-toggle" aria-label="dark mode toggle"><svg class="cs-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background: new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg> <img class="cs-sun" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fsun.svg" decoding="async" alt="moon" width="15" height="15"/></button></div></header><section id="content"></section></div><dialog id="dialog"><section id="todo-form-container"><div class="cs-container"><div class="cs-content"><button id="dialog-close-btn" class="close-container" onclick="performClose()"><div class="leftright close"></div><div class="rightleft close"></div></button> <span class="cs-topper">Add new</span><h2 class="cs-title">Todo</h2><p class="cs-text">title, description, dueDate and priority</p></div><form id="todo-form" name="New Todo" method="dialog"><label class="cs-label">Title <input class="cs-input" required id="title" name="title" placeholder="Title"/></label> <label class="cs-label" id="project-container">Project <input class="cs-input project-container-input" id="project" name="project" placeholder="Create new or select existing project"/> <button class="add-project-button" type="add" name="add-project" id="add-project">+</button></label> <label class="cs-label">Description <input class="cs-input" id="description" name="description" placeholder="Why?"/></label> <label class="cs-label" for="dueDate">When? <input id="dueDate" class="cs-input date" name="dueDate" type="date" placeholder="When?" required/></label><div class="cs-label">Priority<div id="priority" class="priority-container"><input name="priority" type="radio" value="low" id="priority-low" required/> <label for="priority-low" class="priority-button low">Low</label> <input name="priority" type="radio" value="medium" id="priority-medium" required/> <label for="priority-medium" class="priority-button medium">Medium</label> <input name="priority" type="radio" value="high" id="priority-high"/> <label for="priority-high" class="priority-button high">High</label></div></div><button class="cs-button-solid cs-submit" type="submit">Add</button></form></div></section></dialog><script>const newTodoButton = document.getElementById('newTodoButton');
             const dialog = document.querySelector('dialog');
             newTodoButton.addEventListener('click', () => {
                 dialog.showModal();