diff --git a/Todo-app/index.html b/Todo-app/index.html
new file mode 100644
index 0000000..8f3f579
--- /dev/null
+++ b/Todo-app/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Todo app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Todo-app/index.js b/Todo-app/index.js
new file mode 100644
index 0000000..56e5b0f
--- /dev/null
+++ b/Todo-app/index.js
@@ -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 = "×"
+ 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();
+}
diff --git a/Todo-app/style.css b/Todo-app/style.css
new file mode 100644
index 0000000..d37e110
--- /dev/null
+++ b/Todo-app/style.css
@@ -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;
+}
+