<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>To-Do List</h1>
<!-- Container for all the to-do list elements -->
<div class="wrapper">
<!-- Container for the text field and button -->
<div class="input-wrapper">
<input id="inputField" type="text" placeholder="Add a task" />
<input id="inputDate" type="date" placeholder="date" />
<input id="inputColor" type="color" placeholder="color" />
<button onclick="addTask()">+ Add</button>
</div>
<!-- Where the tasks will be displayed -->
<ul id="list"></ul>
</div>
<!-- End tag for <div class="wrapper"> -->
<script src="script.js"></script>
</body>
</html>
/* Medium font family for list items */
@font-face {
font-family: "Raleway Medium";
src: url("/resources/fonts/Raleway-Medium.ttf");
}
/* Bold font family for headings */
@font-face {
font-family: "Raleway Bold";
src: url("/resources/fonts/Raleway-Bold.ttf");
}
html {
box-sizing: border-box;
height: 100%;
}
body {
text-align: center;
background-color: #A770EF;
background: linear-gradient(to bottom, #A770EF, #CF8BF3, #FDB99B);
background-repeat: no-repeat;
height: 100%;
background-attachment: fixed;
}
h1 {
font-family: "Raleway Bold", sans-serif;
font-size: 60px;
color: #ffffff;
text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
/* Styling for container that wraps around all the to-do list elements */
div.wrapper {
background-color: #ffffff;
width: 70%;
margin: auto;
padding: 2em 3em;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}
/* Styling for container that wraps arounnd the text field and button only */
div.input-wrapper {
margin: auto;
display: flex;
justify-content: center;
height: 50px;
}
/* Styling for the text field */
input[type=text] {
font-size: 20px;
border: none;
background-color: #eeeeee;
flex: 2 1 0;
padding-left: 10px;
color: #27292C;
}
input[type=text]:focus {
outline: none;
}
button {
height: 100%;
border: none;
background-color: #3ABEAA;
color: #ffffff;
font-size: 20px;
flex: 1 1 0;
}
button:hover {
background-color: #6bc9bb;
cursor: pointer;
}
button:focus {
outline: none;
}
ul {
padding: 0;
}
li {
text-align: left;
font-size: 20px;
list-style-position: inside;
word-wrap: break-word;
border: none;
background-color: #ffffff;
margin: 20px 0;
color: #51545F;
font-family: "Raleway Medium", sans-serif;
}
li:hover {
text-decoration: line-through;
cursor: pointer;
}
/* Media queries for mobile view */
@media (max-width: 414px) {
h1 {
font-size: 3em;
}
div.input-wrapper {
flex-direction: column;
margin-top: 1em;
}
input {
padding: 10px;
}
input::placeholder {
text-align: center;
}
button {
padding: 10px;
margin-bottom: 1em;
}
}
#inputColor {
margin-top: 0px;
width: 60px;
height: 50px;
border: solid;
border-color: azure;
border-width: 1px;
}
#inputDate {
text-transform: uppercase;
background-color: gainsboro;
border: none;
}
//variable to store reference to the <ul> element
const todoList = document.getElementById("list");
//function to add a new task
function addTask() {
//variable to store what the user typed in the text field
let submittedTask = document.getElementById("inputField").value;
let submittedDate = document.getElementById("inputDate").value;
let submittedColor = document.getElementById("inputColor").value;
//if user enters text into the input field
if (submittedTask.length > 0) {
//create a new <li> element and store it to a variable
const listItem = document.createElement("li");
//add the submitted text to the list item
listItem.textContent = submittedTask + " " + submittedDate;
listItem.style.color = submittedColor;
//append the <li> to the <ul>
todoList.appendChild(listItem);
//clear input field after submitting a task
document.getElementById("inputField").value = "";
//call the removeItem() function when a task is clicked to remove it
listItem.onclick = removeItem;
}
//show message if user tries to submit a task with an empty input field
else {
alert("Please enter a task.");
}
} //closing bracket for addTask() function
// //event handler that calls the addTask() function if the "Enter" key is pressed
// document.addEventListener("keyup", function(event1) {
// //call addTask() only when the Enter key is pressed
// if (event1.key == 'Enter') {
// addTask();
// }
// }); //closing bracket for document.addEventListener
//function to remove items when clicked
function removeItem(event1) {
const completedTask = event1.target;
todoList.removeChild(completedTask);
}
function color1() {
document.body.style.background = " linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 100%)";
}
function color2() {
document.body.style.background = " radial-gradient( circle 897px at 9% 80.3%, rgba(55,60,245,1) 0%, rgba(234,161,15,0.90) 100.2% )";
}
function color3() {
document.body.style.background = " linear-gradient(to bottom, #A770EF, #CF8BF3, #FDB99B)";
}
function color4() {
document.body.style.background = " linear-gradient( 173.1deg, rgba(226,66,249,0.94) 10.2%, rgba(79,147,249,1) 77.3% )";
}
function color5() {
document.body.style.background = " linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)";
}
function color6() {
document.body.style.background = " linear-gradient( 91deg, rgba(72,154,78,1) 5.2%, rgba(251,206,70,1) 95.9% )";
}
document.addEventListener("keyup", function(e) {
if (e.key === "Enter") addTask();
else if (e.key === "y") color1();
else if (e.key === "u") color2();
else if (e.key === "i") color3();
});