To Do App

by blaze92

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>To-do App</title>
    <script src="js/main.js" defer></script>
    <script src="js/dateTime.js" defer></script>

	<link rel="stylesheet" href="css/main.css" />
</head>

<body>
<div class="sky">
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
  </div>
  
  <div class="sky2">
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
  </div>
  
  <div class="sky3">
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
  </div>
  </div>
  <header>
  
	<div class="header">
	  <h1>To-Do List</h1>
  
	  <div class="time">
		<div class="dateTime"></div>
		<div class="day"></div>
	  </div>
	</div>
	<form id="new-task-form">
	  <div class="add-task">
		<input type="text" name="new-task-input" id="new-task-input" placeholder="What do you have planned?" />
		<input type="date" id="calendar">
	  </div>
  
	  <input type="submit" id="new-task-submit" value="Add task" />
	</form>
  </header>
  
  <main>
	<section class="task-list">
	  <h2>Tasks</h2>
	  
	  <div id="tasks">
		<!--<button class = "sort">Sort</button>
			  <div class="task">
					  <div class="content">
						  <input 
							  type="text" 
							  class="text" 
							  value="A new task"
							  readonly>
					  </div>
					  <div class="actions">
						  <button class="edit">Edit</button>
						  <button class="delete">Delete</button>
					  </div>
				 ...

CSS

@import url("https://fonts.googleapis.com/css2?family=Syne&display=swap");

@font-face {
  font-family: digital-7;
  src: url(../fonts/digital-7/digital-7.ttf);
}
:root {
  --dark: #2d39e3;
  --darker: #232975;
  --darkest: #000a99;
  --pink: #ec4899;
  --purple: #8b5cf6;
  --light: #eee;
}

* {
  margin: 0;
  box-sizing: border-box;
  font-family: "Fira sans", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  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;
}

.header {
  display: flex;
}

.time {
  padding-left: 21rem;
  font-size: 30px;
  font-family: digital-7 !important;
  color: var(--pink);
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.day {
  font-size: 18px;
  padding-bottom: 1rem;
  font-family: "Fira sans", sans-serif;
}

.add-task {
  display: flex;
  justify-content: space-between;
  background-color: var(--darkest);
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

#calendar {
  font-size: 1.25rem;
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.date {
  display: none;
  position: absolute;
  margin-left: 1rem;
  font-size: 1.25rem;
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 4px;
  filter: invert(34%) sepia(84%) saturate(1953%) hue-rotate(238deg)
    brightness(101%) contrast(93%);
  margin-left: -1rem;
}

#new-task-form {
  display: flex;
}

input,
button {
  
  border: none;
  outline: none;
  background:...

JavaScript

/************************************
 * creates objct of elements needed *
 ************************************/
 
 const elements = {
	form: document.querySelector("#new-task-form"),
	input: document.querySelector("#new-task-input"),
	list: document.querySelector("#tasks"),
	cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

 const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

/**********************************************
 * function that creates the HTML elements    *
 **********************************************/

 const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

	const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div class="task" data-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input type ="text" class = "text" id = "text" readonly>
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button class="edit" data-id="${id}">Edit</button>
            <button class="delete" data-id="${id}">Delete</button>
        </div>
    </div>
    `
    elements.list.appendChild(tasks)
    listen()
    return tasks

}

function listen(){
    let allCheckboxes = document.querySelectorAll('.tick')
    allCheckboxes.forEach(checkbox =>{
        checkbox.addEventListener('change',(e)=>{
            let parentElem=e.target.parentElement

            if(e.target.checked){
                parentElem.style.textDecoration = "line-through"
           ...