Added Todo App

This commit is contained in:
Thomas Cole 2020-09-30 11:02:31 -04:00
parent 370341f51f
commit 088e6a24e3
3 changed files with 265 additions and 0 deletions

24
Todo-app/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo app</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
</head>
<body>
<div class="header">
<input type="text" id="todo-input" class="input" placeholder="Add Task" autocomplete="off">
</div>
<ul id="todo-list"></ul>
<div class="lower-bottom">
<button onclick="resetLocalStorage()">&times;</button>
</div>
<script src="index.js"></script>
</body>
</html>

108
Todo-app/index.js Normal file
View File

@ -0,0 +1,108 @@
var input = document.getElementById('todo-input');
var todoList = document.getElementById("todo-list");
var todos = [];
if(typeof(Storage) !== "undefined"){
var localTodos = localStorage.getItem("todos");
if(localTodos == null){
//first run...
} else {
console.log("Existing todos found.");
todos = JSON.parse(localTodos);
console.log(todos);
todos.forEach(element => {
console.log(element);
addTodo(element.text, element.complete);
});
}
} else {
addTodo("There is no web storage support for this session", false);
}
window.onbeforeunload = function(){
localStorage.clear();
localStorage.setItem("todos", JSON.stringify(todos));
}
input.onkeyup = (e) => {
if(e.keyCode == 13){
addTodo();
input.value = "";
}
}
function addTodo(text, completed){
var todoText = input.value;
if(text){
todoText = text;
} else {
//new element
todos.push({
"text": todoText,
"complete": completed
}
);
}
if(todoText == ""){
return;
}
var newTodo = document.createElement("li");
var newTodoDiv = document.createElement("div");
var newTodoCheck = document.createElement("input");
newTodoCheck.type = 'checkbox';
newTodoCheck.onchange = (e) => {
var index = Array.from(todoList.children).indexOf(e.target.parentNode.parentNode);
console.log(index);
todos[index].complete = e.target.checked;
e.target.parentNode.parentNode.classList.toggle("complete");
}
var newTodoContent = document.createElement("p");
newTodoContent.innerHTML = todoText;
if(completed){
newTodoCheck.checked = true;
newTodoContent.classList.add("complete");
}
var newTodoRemoveButton = document.createElement("button");
newTodoRemoveButton.innerHTML = "&times"
newTodoRemoveButton.onclick = removeTodo;
newTodoDiv.classList.add("todo-item");
newTodoDiv.appendChild(newTodoCheck);
newTodoDiv.appendChild(newTodoContent);
newTodoDiv.appendChild(newTodoRemoveButton);
newTodo.appendChild(newTodoDiv);
if(completed){
newTodo.classList.toggle("complete")
}
todoList.appendChild(newTodo);
}
function removeTodo(e){
var index = Array.from(todoList.children).indexOf(e.target.parentNode.parentNode);
console.log(index);
todos.splice(index,1);
e.target.parentNode.parentNode.remove();
}
function resetLocalStorage(){
todos = [];
localStorage.clear();
location.reload();
}

133
Todo-app/style.css Normal file
View File

@ -0,0 +1,133 @@
html{
--true-blue: #0466c8ff;
--roman-silver: #7d8597ff;
--manatee: #979dacff;
--manatee-lighter: #c6cad2;
font-family: Arial, Helvetica, sans-serif;
font-family: 'Open Sans';
}
body{
margin: 0px;
padding: 0px;
width: 100%;
}
input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid var(--manatee);
color: var(--manatee);
font-size: medium;
transition: border-bottom 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
input:focus{
border-bottom: 2px solid white;
color: white;
}
ul{
padding: 0px;
}
li{
list-style: none;
padding-bottom: 1em;
}
.header{
background-color: var(--true-blue);
height: 5em;
width: 100%;
display: flex;
align-items: center;
}
.header input{
position: relative;
height: 3em;
width: 20%;
text-align: center;
margin: auto;
}
.complete .todo-item{
background-color: var(--manatee);
transition: background-color 0.2s ease-in-out;
}
.complete p{
text-decoration: line-through;
}
.lower-bottom{
position: fixed;
margin-right: 10px;
margin-bottom: 10px;
right: 0;
bottom: 0;
height: 40px;
width: 40px;
}
.lower-bottom button{
color: white;
background-color: var(--true-blue);
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
text-decoration: none;
display: table-cell;
border-radius: 50%;
outline: 0;
border: 0;
font-size: medium;
transition: color 0.2s ease-in-out;
}
.lower-bottom button:hover{
color: red;
}
.todo-item{
display: flex;
border: 1px solid black;
border-radius: 1em;
background-color: var(--manatee-lighter);
width: 85%;
margin:auto;
box-shadow: 5px 5px 3px var(--roman-silver);
}
.todo-item input{
height: 40px;
width: 30px;
margin-top: auto;
margin-bottom: auto;
}
.todo-item p{
padding-left: 1em;
}
.todo-item button{
margin-left: auto;
margin-right: 1em;
background-color: transparent;
border: 0;
outline: 0;
font-size: medium;
transition: color 0.2s ease-in-out;
}
.todo-item button:hover{
color: red;
}