diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html
new file mode 100644
index 00000000..43b9181e
--- /dev/null
+++ b/1-Vanilla/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+ Vanilla TODO List
+
+
+
+
+
+
\ No newline at end of file
diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js
new file mode 100644
index 00000000..65f3fbb2
--- /dev/null
+++ b/1-Vanilla/index.js
@@ -0,0 +1,172 @@
+let editedID = 0;
+let editMode = false;
+
+function getNewID(){
+ return Math.floor(Math.random()*1000)
+}
+function addItem(){
+ let title = document.getElementById('title-input').value
+ if (title ==''){
+ alert('cant add an item without a title')
+ return
+ }
+ if (editMode){
+ alert('cant add an item while in edit mode')
+ return
+ }
+ let content = document.getElementById('content-input').value
+ let list = document.getElementById('list')
+ let id = getNewID()
+ let itemElement = createTodoItemElement(id,title,content)
+
+ list.appendChild(itemElement)
+ // now save to local storage
+ let itemString = `title: ${title};content: ${content}`
+ localStorage.setItem(id,itemString)
+
+ // reset menu display
+ clearMenu()
+ document.getElementById('menu-button').innerText = 'add item'
+}
+
+function sendItemToEdit(itemID){
+ editedID = itemID
+ document.getElementById('title-input').value = document.getElementById(`title${itemID}`).innerText
+ document.getElementById('content-input').value = document.getElementById(`content${itemID}`).innerText
+ editMode = true //to disable item deletion
+ document.getElementById('cancel-button').hidden = false // to exit edit mode
+ document.getElementById('menu-button').innerText = 'add changes' // to save changes and exit edit mode
+}
+
+function deleteItem(itemID){
+ if(editMode){
+ alert('cant delete while in edit mode')
+ return
+ }
+ let item = document.getElementById(itemID)
+ let list = document.getElementById('list')
+ // remove from display
+ list.removeChild(item)
+ // remove from item storage
+ localStorage.removeItem(itemID)
+}
+
+function cancelEdit(){
+ clearMenu()
+ editMode = false
+ document.getElementById('menu-button').innerText = 'add item'
+ document.getElementById('cancel-button').hidden = true
+ editedID = 0
+}
+
+function clearMenu(){
+ document.getElementById('title-input').value = ''
+ document.getElementById('content-input').value = ''
+}
+
+function menuButtonClick(){
+ if(!editMode){
+ addItem()
+ }else{
+ if (document.getElementById('title-input').value == ''){
+ alert('cant set an empty title')
+ return
+ }
+ let title = document.getElementById('title-input').value
+ let content = document.getElementById('content-input').value
+ document.getElementById(`title${editedID}`).innerText = title
+ document.getElementById(`content${editedID}`).innerText = content
+ // now update item in local storage
+ let itemObject = `title: ${title};content: ${content}`
+ localStorage.setItem(editedID,itemObject)
+
+ clearMenu()
+ editMode = false
+ document.getElementById('menu-button').innerText = 'add item'
+ document.getElementById('cancel-button').hidden = true
+ editedID = 0
+ }
+}
+function addButton(){
+ clearMenu()
+ document.getElementById('title-input').focus()
+}
+function createTodoItemElement(itemID,title,content){
+
+ // ol todo-item
+ let itemElement = document.createElement('ol')
+ itemElement.className = 'todo-item'
+ itemElement.id = itemID;
+ // input checkbox
+ let itemCheckboxElement = document.createElement('input')
+ itemCheckboxElement.type = 'checkbox'
+ itemCheckboxElement.className = 'item-checkbox'
+ // div todo-item-text
+ let itemTextElement = createItemTextElement(itemID,title,content)
+ let itemButtonsElement = createItemButtonsElement(itemID)
+ //append checkbox, text and buttons to list-item
+ itemElement.appendChild(itemCheckboxElement)
+ itemElement.appendChild(itemTextElement)
+ itemElement.appendChild(itemButtonsElement)
+
+ return itemElement
+}
+function createItemButtonsElement(itemID){
+
+ let itemButtonsElement = document.createElement('div')
+ itemButtonsElement.className = 'todo-item-buttons'
+ // button edit
+ let editButtonElement = document.createElement('button')
+ editButtonElement.innerText = 'edit'
+ editButtonElement.className = 'item-edit-button'
+ editButtonElement.setAttribute('onclick',`sendItemToEdit(${itemID})`)
+ // button delete
+ let deleteButtonElement = document.createElement('button')
+ deleteButtonElement.innerText = 'delete'
+ deleteButtonElement.className = 'item-delete-button'
+ deleteButtonElement.setAttribute('onclick',`deleteItem(${itemID})`)
+ // append the buttons to container
+ itemButtonsElement.appendChild(editButtonElement)
+ itemButtonsElement.appendChild(deleteButtonElement)
+
+ return itemButtonsElement
+}
+ function createItemTextElement(itemID,title,content){
+
+ let itemTextElement = document.createElement('div')
+ itemTextElement.className = 'todo-item-text'
+ // item title
+ let titleElement = document.createElement('div')
+ titleElement.innerText = title
+ titleElement.className = 'todo-item-title'
+ titleElement.id = 'title'+itemID
+ // item content
+ let contentElement = document.createElement('div')
+ contentElement.innerText = content
+ contentElement.className = 'todo-item-content'
+ contentElement.id = 'content'+itemID
+ // append text to parent container
+ itemTextElement.appendChild(titleElement)
+ itemTextElement.appendChild(contentElement)
+
+ return itemTextElement
+ }
+// attach functions to menu buttons
+window.onload = function(){
+ document.getElementById('clear-button').setAttribute('onclick','clearMenu()')
+ document.getElementById('menu-button').setAttribute('onclick','menuButtonClick()')
+ document.getElementById('cancel-button').setAttribute('onclick','cancelEdit()')
+ document.getElementById('add-button').setAttribute('onclick','addButton()')
+ // load display todo items from local storage
+ let list = document.getElementById('list')
+ for (let key in localStorage) {
+ if(isNaN(Number(key)))
+ continue;
+ let itemString = localStorage.getItem(key)
+ itemString = itemString.split(';')
+ let title = itemString[0].split(':')[1]
+ let content = itemString[1].split(':')[1]
+ let itemElement = createTodoItemElement(Number(key),title,content)
+ list.appendChild(itemElement)
+ }
+}
\ No newline at end of file
diff --git a/1-Vanilla/list-item.html b/1-Vanilla/list-item.html
new file mode 100644
index 00000000..8a8c0c2e
--- /dev/null
+++ b/1-Vanilla/list-item.html
@@ -0,0 +1,12 @@
+
+
+
+
title
+
sub-title
+
content
+
+
+
+
+
\ No newline at end of file
diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css
new file mode 100644
index 00000000..857fa4b2
--- /dev/null
+++ b/1-Vanilla/styles.css
@@ -0,0 +1,145 @@
+button{
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ border: none;
+ background-color: white;
+ border-radius: 10px;
+ height:40px;
+ margin: 5px
+}
+button:hover{
+ transform: scale(1.3)
+}
+input{
+ margin: 0px 10px;
+}
+input:hover{
+ transform: scale(1.1);
+}
+.page-body{
+ display:flex;
+ flex-direction:column;
+ height: 100vh;
+}
+.header{
+ background-color: lightblue;
+ padding: 20px 20px 10px 20px;
+ border-bottom: solid 3px rgb(0, 140, 255);
+}
+.main-body{
+ display:flex;
+ flex-direction:row;
+ height: 100vh;
+}
+.menu{
+ background-color: whitesmoke;
+ padding: 10px;
+ border-right: solid 2px grey;
+}
+.menu-buttons{
+ display: flex;
+ justify-content: space-around;
+}
+.menu-item{
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+ margin: 5px;
+ width: 100%;
+}
+.content-input{
+ height:50px;
+}
+.item{
+ display:flex;
+ flex-direction:column;
+ align-items: end;
+}
+.display{
+ min-width: 40%;
+ max-width: 60%;
+ display: flex;
+ flex-direction: column;
+ margin: 10px;
+ justify-content: start;
+ align-items: center;
+}
+.todo-item{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding:5px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin-bottom: 12px;
+}
+
+.item-checkbox{
+ margin-right: 10px;
+}
+.item-checkbox:checked ~div.todo-item-text > .todo-item-title {
+ text-decoration: line-through;
+}
+.item-checkbox:checked ~div.todo-item-text > .todo-item-subtitle {
+ text-decoration: line-through;
+}
+.item-checkbox:checked ~div.todo-item-text > .todo-item-content {
+ display: none;
+}
+.todo-item-text{
+ display: flex;
+ flex-direction: column;
+ align-self: stretch;
+}
+.todo-item-buttons{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+.item-edit-button{
+ font-family: 'Material Icons';
+ font-size: 30px;
+ text-align: center;
+ color: white;
+ width:40px;
+ height:40px;
+ border-radius: 30%;
+ background-color: greenyellow;
+}
+.item-edit-button:hover{
+ background-color: seagreen;
+}
+.item-delete-button{
+ font-family: 'Material Icons';
+ font-size: 30px;
+ text-align: center;
+ color: white;
+ width:40px;
+ height:40px;
+ border-radius: 30%;
+ background-color: tomato;
+}
+.item-delete-button:hover{
+ background-color: crimson;
+}
+.item-checkbox{
+ align-self: center;
+}
+.item-checkbox:hover{
+ transform: scale(1.3);
+}
+.todo-item-title{
+ font-size: 20px;
+ font-weight: bold;
+}
+.todo-item-subtitle{
+ font-size: 20px;
+ color: grey;
+ font-weight: thin;
+ padding-left: 15px;
+}
+.todo-item-content{
+ font-weight: thin;
+ padding-left: 15px;
+ color: grey;
+}
\ No newline at end of file