This content originally appeared on DEV Community and was authored by CristoferK
Don't forget to Subscribe to my YouTube channel to learn programming fast and free: https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/007b767ad0.js" crossorigin="anonymous"></script>
<style>
* {
margin: 0;
border: 0;
font-family: sans-serif;
}
h1 {
margin-top: 10px;
position: absolute;
color: blue;
font-size: 300%;
width: 100%;
text-align: center;
}
.inp {
position: absolute;
top: 13%;
left: 50%;
transform: translate(-50%, -13%);
width: 70%;
align-items: center;
}
input {
border: none;
border: 2px solid blue;
padding: 10px;
border-radius: 20px 0px 0px 20px;
outline: none;
border-right: none;
color: grey;
font-size: 20px;
width: 70%;
}
button {
background: none;
border: none;
width: 15%;
height: 20%;
border: 2px solid blue;
border-radius: 0px 20px 20px 0px;
outline: none;
padding: 10px;
font-size: 20px;
color: blue;
z-index: 9999px;
cursor: pointer;
transition: 0.5s;
}
button:hover {
background: blue;
color: white;
transition: 0.5s ease-in-out;
}
.to-dos {
position: absolute;
top: 26%;
left: 50%;
transform: translate(-50%, -50%);
color: grey;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>iDo List</h1>
<div class="inp">
<input id="inputField" type="text" placeholder="I want to do..."><button id="addToDo"><i class="fas fa-plus"></i></button>
</div>
<div class="to-dos" id="toDoContainer">
</div>
<script>
let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');
addToDoButton.addEventListener('click', function(){
var paragraph = document.createElement('p');
paragraph.classList.add('paragraph-styling');
paragraph.innerText = inputField.value;
toDoContainer.appendChild(paragraph);
inputField.value = '';
paragraph.addEventListener('click', function() {
paragraph.style.textDecoration = 'line-through';
})
paragraph.addEventListener('dblclick', function() {
toDoContainer.removeChild(paragraph);
})
})
</script>
</body>
</html>
This content originally appeared on DEV Community and was authored by CristoferK
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
CristoferK | Sciencx (2021-04-09T06:13:55+00:00) Make Your Own ToDo App with JavaScript!. Retrieved from https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/
" » Make Your Own ToDo App with JavaScript!." CristoferK | Sciencx - Friday April 9, 2021, https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/
HARVARDCristoferK | Sciencx Friday April 9, 2021 » Make Your Own ToDo App with JavaScript!., viewed ,<https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/>
VANCOUVERCristoferK | Sciencx - » Make Your Own ToDo App with JavaScript!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/
CHICAGO" » Make Your Own ToDo App with JavaScript!." CristoferK | Sciencx - Accessed . https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/
IEEE" » Make Your Own ToDo App with JavaScript!." CristoferK | Sciencx [Online]. Available: https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/. [Accessed: ]
rf:citation » Make Your Own ToDo App with JavaScript! | CristoferK | Sciencx | https://www.scien.cx/2021/04/09/make-your-own-todo-app-with-javascript/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.