curriculum/challenges/english/blocks/workshop-todo-app/64e4e74d0fb4f0687bf4145d.md
Create a taskData constant and set it to an empty array. This array will store all the tasks along with their associated data, including title, due date, and description. This storage will enable you to keep track of tasks, display them on the page, and save them to localStorage.
Use let to create a currentTask variable and set it to an empty object. This variable will be used to track the state when editing and discarding tasks.
You should have a const variable called taskData.
assert.match(code, /const\s+taskData\s*=/)
You should assign an array to your taskData constant.
assert.isArray(taskData);
Your taskData array should be empty.
assert.isEmpty(taskData);
You should use let to create a currentTask variable.
assert.match(code, /let\s+currentTask/);
You should assign an object to your currentTask variable.
assert.isObject(currentTask);
Your currentTask object should be empty.
assert.isEmpty(currentTask);
<!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>Learn localStorage by Building a Todo App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h1>Todo App</h1>
<div class="todo-app">
<button id="open-task-form-btn" class="btn large-btn">
Add New Task
</button>
<form class="task-form hidden" id="task-form">
<div class="task-form-header">
<button id="close-task-form-btn" class="close-task-form-btn" type="button" aria-label="close">
<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#F44336" d="M21.5 4.5H26.501V43.5H21.5z" transform="rotate(45.001 24 24)" /><path fill="#F44336" d="M21.5 4.5H26.5V43.501H21.5z" transform="rotate(135.008 24 24)" /></svg>
</button>
</div>
<div class="task-form-body">
<label class="task-form-label" for="title-input">Title</label>
<input required type="text" class="form-control" id="title-input" value="" />
<label class="task-form-label" for="date-input">Date</label>
<input type="date" class="form-control" id="date-input" value="" />
<label class="task-form-label" for="description-input">Description</label>
<textarea class="form-control" id="description-input" cols="30" rows="5"></textarea>
</div>
<div class="task-form-footer">
<button id="add-or-update-task-btn" class="btn large-btn" type="submit">
Add Task
</button>
</div>
</form>
<dialog id="confirm-close-dialog">
<form method="dialog">
<p class="discard-message-text">Discard unsaved changes?</p>
<div class="confirm-close-dialog-btn-container">
<button id="cancel-btn" class="btn">
Cancel
</button>
<button id="discard-btn" class="btn">
Discard
</button>
</div>
</form>
</dialog>
<div id="tasks-container"></div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
:root {
--white: #fff;
--light-grey: #f5f6f7;
--dark-grey: #0a0a23;
--yellow: #f1be32;
--golden-yellow: #feac32;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--dark-grey);
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
color: var(--light-grey);
margin: 20px 0 40px 0;
}
.todo-app {
background-color: var(--white);
width: 300px;
height: 350px;
border: 5px solid var(--yellow);
border-radius: 8px;
padding: 15px;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
.btn {
cursor: pointer;
width: 100px;
margin: 10px;
color: var(--dark-grey);
background-color: var(--golden-yellow);
background-image: linear-gradient(#fecc4c, #ffac33);
border-color: var(--golden-yellow);
border-width: 3px;
}
.btn:hover {
background-image: linear-gradient(#ffcc4c, #f89808);
}
.large-btn {
width: 80%;
font-size: 1.2rem;
align-self: center;
justify-self: center;
}
.close-task-form-btn {
background: none;
border: none;
cursor: pointer;
}
.close-icon {
width: 20px;
height: 20px;
}
.task-form {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--white);
border-radius: 5px;
padding: 15px;
width: 300px;
height: 350px;
flex-direction: column;
justify-content: space-between;
overflow: auto;
}
.task-form-header {
display: flex;
justify-content: flex-end;
}
.task-form-body {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.task-form-footer {
display: flex;
justify-content: center;
}
.task-form-label,
#title-input,
#date-input,
#description-input {
display: block;
}
.task-form-label {
margin-bottom: 5px;
font-size: 1.3rem;
font-weight: bold;
}
#title-input,
#date-input,
#description-input {
width: 100%;
margin-bottom: 10px;
padding: 2px;
}
#confirm-close-dialog {
padding: 10px;
margin: 10px auto;
border-radius: 15px;
}
.confirm-close-dialog-btn-container {
display: flex;
justify-content: center;
margin-top: 10px;
}
.discard-message-text {
font-weight: bold;
font-size: 1.5rem;
}
#tasks-container {
height: 100%;
overflow-y: auto;
}
.task {
margin: 5px 0;
}
.hidden {
display: none;
}
@media (min-width: 576px) {
.todo-app,
.task-form {
width: 400px;
height: 450px;
}
.task-form-label {
font-size: 1.5rem;
}
#title-input,
#date-input {
height: 2rem;
}
#title-input,
#date-input,
#description-input {
padding: 5px;
margin-bottom: 20px;
}
}
const taskForm = document.getElementById("task-form");
const confirmCloseDialog = document.getElementById("confirm-close-dialog");
const openTaskFormBtn = document.getElementById("open-task-form-btn");
const closeTaskFormBtn = document.getElementById("close-task-form-btn");
const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn");
const cancelBtn = document.getElementById("cancel-btn");
const discardBtn = document.getElementById("discard-btn");
const tasksContainer = document.getElementById("tasks-container");
const titleInput = document.getElementById("title-input");
const dateInput = document.getElementById("date-input");
const descriptionInput = document.getElementById("description-input");
--fcc-editable-region--
--fcc-editable-region--