In this project we are going to build a project management web application using only HTML5 CSS3 and vanilla JavaScript.
This application is very similar to a todo list but still different at the same time. You will e able add tasks to the project and delete task from the project as well as check out completed desk and also delete all completed tasks.
This Web application will use the following javascript technologies :
DOM Selectors:
- getElementsById
- querySelector
- querySelectorAll
DOM elements:
- element.innerHTML
- element.style
- element.classList.toggle
- element.classList.remove
Variables
- let
- const
You can copy the entire code for this project here>
Source Code:
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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<form action="#" id="Form">
<div class="input-container">
<label>What needs to be done?</label>
<input
type="text"
class="input"
id="Input"
placeholder="Enter your Task"
/>
</div>
<ul class="task-list" id="Task_list">
<!-- <li>Task 01</li>
<li>Task 02</li> -->
</ul>
</form>
<script src="task.js"></script>
</body>
</html>
CSS
body {
height: 100vh;
width: 100vw;
background: url(https://source.unsplash.com/jokxn-4kogA) center/cover
no-repeat;
}
h1 {
text-align: center;
color: aqua;
}
form {
position: relative;
top: 10vh;
max-width: 450px;
margin: auto;
background-color: rgba(0, 0, 0, 0.7);
padding: 2rem;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 25px;
}
input {
color: aqua;
text-shadow: 2px 2px 1px #333;
}
li {
color: aqua;
width: 100%;
background-color: rgba(218, 212, 212, 0.2);
font-size: 1.8rem;
text-shadow: 2px 2px 1px #333;
text-align: center;
border-radius: 25px;
display: flex;
justify-content: space-between;
padding: 0 2rem;
border: 1px solid aqua;
margin-bottom: 1rem;
box-shadow: 0 0 10px 2px rgba(11, 60, 66, 0.6);
transition: 0.3s linear;
}
li:hover {
background-color: rgba(218, 212, 212, 0.4);
transition: 0.3s linear;
}
.task-list li.completed {
color: greenyellow;
}
.delete_task {
cursor: pointer;
}
JS
const form = document.getElementById("Form");
const input = document.getElementById("Input");
const taskList = document.getElementById("Task_list");
console.log(form, input, taskList);
form.onsubmit = (e) => {
e.preventDefault();
addTask();
};
function addTask(task) {
let taskValue = input.value;
// if (task) {
// taskValue = task.text;
// }
task ? (taskValue = task.text) : task;
console.log(taskValue);
taskValue ? displayTask() : taskValue;
function displayTask() {
const newTask = document.createElement("li");
newTask.innerHTML = taskValue;
newTask.onclick = () => {
newTask.classList.toggle("completed");
// console.log(newTask);
newTask.classList.contains("completed")
? ((newTask.innerHTML = `<span>${taskValue} ✔</span><span onclick='deleteTask()'>❌</span>`),
newTask.classList.toggle("delete_task"))
: ((newTask.innerHTML = `${taskValue}`),
newTask.classList.toggle("delete_task"));
console.log(newTask);
};
taskList.appendChild(newTask);
input.value = "";
}
}
// delete task function
function deleteTask() {
console.log(document.querySelectorAll("li"));
document.querySelectorAll("li").forEach((element) => {
element.classList.contains("delete_task") ? element.remove() : element;
});
}
Below you can find the video for this tutorial fi you wish to get more detailed information abut this project.
Full Course!
This project is part of the : ” 30 HTML, CSS & JavaScript projects in 30 Days for Beginners” course. Click the link!