From 9c9d267fe3672f52e2a108e17ad89c6dd2faf654 Mon Sep 17 00:00:00 2001 From: haimre Date: Wed, 2 Feb 2022 12:12:50 +0200 Subject: [PATCH 01/13] first commit --- 1-Vanilla/index.html | 37 +++++++++++++++++++++++++++++++++++++ 1-Vanilla/index.js | 0 1-Vanilla/style.css | 0 3 files changed, 37 insertions(+) create mode 100644 1-Vanilla/index.html create mode 100644 1-Vanilla/index.js create mode 100644 1-Vanilla/style.css diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html new file mode 100644 index 00000000..69f3ba19 --- /dev/null +++ b/1-Vanilla/index.html @@ -0,0 +1,37 @@ + + + + + + + Document + + +

Vanilla TODO List

+
+
+
+ edit items here +
+
+
title:
+
subtitle:
+
description:
+
+ +
+
+
    +
      +
      title
      +
      sub-title
      +
      description
      +
    +
+
+
+ + + \ No newline at end of file diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js new file mode 100644 index 00000000..e69de29b diff --git a/1-Vanilla/style.css b/1-Vanilla/style.css new file mode 100644 index 00000000..e69de29b From 5b5f4a1929a5f6a338e5b52dc8e000c39f91fa54 Mon Sep 17 00:00:00 2001 From: haimre Date: Wed, 2 Feb 2022 12:48:09 +0200 Subject: [PATCH 02/13] menu and list structure --- 1-Vanilla/index.html | 40 +++++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 69f3ba19..383a1737 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -6,30 +6,40 @@ Document - -

Vanilla TODO List

+ +
+

Vanilla TODO List

+
-
-
- edit items here +
+
+ add new items here
-
title:
-
subtitle:
-
description:
+
title:
+
subtitle:
+
description:
-
-
    -
      -
      title
      -
      sub-title
      -
      description
      +
      +
        +
          + +
          +
          title
          +
          sub-title
          +
          description
          +
          +
          + + +
      +
From 2696ea4c436195516420725ccf1f306734a9f859 Mon Sep 17 00:00:00 2001 From: haimre Date: Wed, 2 Feb 2022 13:16:58 +0200 Subject: [PATCH 03/13] initial css classes --- 1-Vanilla/index.html | 34 +++++++++++++++--------------- 1-Vanilla/style.css | 0 1-Vanilla/styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 17 deletions(-) delete mode 100644 1-Vanilla/style.css create mode 100644 1-Vanilla/styles.css diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 383a1737..7d8c3bf9 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -1,22 +1,23 @@ + Document - -
+ +

Vanilla TODO List

-
-
+
+
add new items here
-
-
title:
+
+
title:
subtitle:
description:
@@ -24,18 +25,18 @@

Vanilla TODO List

add item/ add changes
-
+
    -
      - -
      -
      title
      -
      sub-title
      -
      description
      +
        + +
        +
        title
        +
        sub-title
        +
        description
        -
        - - +
        + +
@@ -43,5 +44,4 @@

Vanilla TODO List

- \ No newline at end of file diff --git a/1-Vanilla/style.css b/1-Vanilla/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css new file mode 100644 index 00000000..8f0b2dd6 --- /dev/null +++ b/1-Vanilla/styles.css @@ -0,0 +1,50 @@ +.page-body{ + display:flex; + flex-direction:column; +} +.header{ + background-color: lightblue; + padding: 20px 20px 10px 20px; + border-bottom: solid 3px rgb(0, 140, 255); +} +.main-body{ + display:flex; + flex-direction:row; +} +.menu{ + background-color: whitesmoke; + padding: 10px; + border-right: solid 2px grey; +} +.item{ + display:flex; + flex-direction:column; + align-items: end; +} +.display{ + min-width:40%; + max-width:60%; + display: flex; + flex-direction: column; + margin: 10px; +} +.todo-item{ + display: flex; + flex-direction: row; + 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); +} +.item-checkbox{ + margin-right: 10px; +} +.todo-item-text{ + display: flex; + flex-direction: column; +} +.todo-item-buttons{ + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-start; +} \ No newline at end of file From 738ce4a9d3f4f1dc19cf95d43269cdf4be0b1d90 Mon Sep 17 00:00:00 2001 From: haimre Date: Wed, 2 Feb 2022 14:19:01 +0200 Subject: [PATCH 04/13] css overhaul --- 1-Vanilla/index.html | 11 ++++--- 1-Vanilla/list-item.html | 12 +++++++ 1-Vanilla/styles.css | 70 ++++++++++++++++++++++++++++++++++++++-- 3 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 1-Vanilla/list-item.html diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 7d8c3bf9..0e3b96d0 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -2,6 +2,8 @@ + + @@ -14,16 +16,17 @@

Vanilla TODO List

- add new items here + Edit items and add new items
title:
subtitle:
description:
- +
+ + +
    diff --git a/1-Vanilla/list-item.html b/1-Vanilla/list-item.html new file mode 100644 index 00000000..0424eceb --- /dev/null +++ b/1-Vanilla/list-item.html @@ -0,0 +1,12 @@ +
      + +
      +
      title
      +
      sub-title
      +
      description
      +
      +
      + + +
      +
    \ No newline at end of file diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css index 8f0b2dd6..0ebbad75 100644 --- a/1-Vanilla/styles.css +++ b/1-Vanilla/styles.css @@ -1,3 +1,17 @@ +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:hover{ + transform: scale(1.1); +} .page-body{ display:flex; flex-direction:column; @@ -31,20 +45,72 @@ .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); } +.todo-item:hover{ + transform: scale(1.1); +} .item-checkbox{ margin-right: 10px; } .todo-item-text{ display: flex; flex-direction: column; + align-self: stretch; } .todo-item-buttons{ display: flex; flex-direction: row; - justify-content: flex-end; - align-items: flex-start; + 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-description{ + font-weight: thin; + padding-left: 15px; + color: grey; } \ No newline at end of file From 0c5c9f284f18b0a0ec879207271b5d3b1fedd6f8 Mon Sep 17 00:00:00 2001 From: haimre Date: Wed, 2 Feb 2022 16:53:35 +0200 Subject: [PATCH 05/13] add item and edit item --- 1-Vanilla/index.html | 21 ++++++----- 1-Vanilla/index.js | 83 ++++++++++++++++++++++++++++++++++++++++++++ 1-Vanilla/styles.css | 1 + 3 files changed, 96 insertions(+), 9 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 0e3b96d0..ff29e512 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -4,6 +4,8 @@ + + @@ -19,17 +21,18 @@

    Vanilla TODO List

    Edit items and add new items
-
title:
-
subtitle:
-
description:
+
title:
+
subtitle:
+
description:
- - + + +
-
    +
        @@ -38,12 +41,12 @@

        Vanilla TODO List

        description
        - - + +
    - +
diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index e69de29b..99a9ad16 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -0,0 +1,83 @@ +var editedItem = 'empty'; +var editMode = false; + +function addItem(){ + let title = document.getElementById('title-input').value + if (title ==''){ + console.log('cant add an item without a title') + return + } + if (editMode){ + console.log('cant add an item while in edit mode') + return + } + let subtitle = document.getElementById('subtitle-input').value + let description = document.getElementById('description-input').value + console.log(title,subtitle,description) + let list = document.getElementById('list') + // list.parentElement + let item = document.createElement('ol') + item.className = 'todo-item' + item.innerHTML = ` +
+
${title}
+
${subtitle}
+
${description}
+
+
+ + +
` + list.appendChild(item) + document.getElementById('title-input').value = '' + document.getElementById('subtitle-input').value = '' + document.getElementById('description-input').value = '' + document.getElementById('menu-button').innerText = 'add item' +} +function goToEdit(caller){ + editedItem = caller.parentElement.parentElement.children[1] + document.getElementById('title-input').value = editedItem.children[0].innerHTML + document.getElementById('subtitle-input').value = editedItem.children[1].innerHTML + document.getElementById('description-input').value = editedItem.children[2].innerHTML + editMode = true + document.getElementById('cancel-button').hidden = false + document.getElementById('menu-button').innerText = 'add changes' +} +function delete_item(caller){ + let item = caller.parentElement.parentElement + console.log(item) + let list = document.getElementById('list') + list.removeChild(item) +} +function cancel_edit(){ + document.getElementById('title-input').value = '' + document.getElementById('subtitle-input').value = '' + document.getElementById('description-input').value = '' + editMode = false + document.getElementById('menu-button').innerText = 'add item' + document.getElementById('cancel-button').hidden = true +} +function clear_menu(){ + document.getElementById('title-input').value = '' + document.getElementById('subtitle-input').value = '' + document.getElementById('description-input').value = '' +} +function menu_button(caller){ + if(!editMode){ + addItem() + }else{ + if (document.getElementById('title-input').value == ''){ + console.log('cant set an empty title') + return + } + editedItem.children[0].innerHTML = document.getElementById('title-input').value + editedItem.children[1].innerHTML = document.getElementById('subtitle-input').value + editedItem.children[2].innerHTML = document.getElementById('description-input').value + document.getElementById('title-input').value = '' + document.getElementById('subtitle-input').value = '' + document.getElementById('description-input').value = '' + editMode = false + document.getElementById('menu-button').innerText = 'add item' + document.getElementById('cancel-button').hidden = true + } +} \ No newline at end of file diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css index 0ebbad75..ea0b77a3 100644 --- a/1-Vanilla/styles.css +++ b/1-Vanilla/styles.css @@ -49,6 +49,7 @@ input:hover{ 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; } .todo-item:hover{ transform: scale(1.1); From ff61e885e6c4be9bb56d4c32ce4c60eccbb3d6d6 Mon Sep 17 00:00:00 2001 From: haimre Date: Wed, 2 Feb 2022 18:06:39 +0200 Subject: [PATCH 06/13] dynamic items --- 1-Vanilla/index.html | 15 +------- 1-Vanilla/index.js | 91 ++++++++++++++++++++++++++++++++++++-------- 1-Vanilla/styles.css | 17 +++++++-- 3 files changed, 92 insertions(+), 31 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index ff29e512..26cccc3a 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -33,20 +33,9 @@

Vanilla TODO List

    -
      - -
      -
      title
      -
      sub-title
      -
      description
      -
      -
      - - -
      -
    +
- +
diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index 99a9ad16..d2e3867c 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -13,22 +13,73 @@ function addItem(){ } let subtitle = document.getElementById('subtitle-input').value let description = document.getElementById('description-input').value - console.log(title,subtitle,description) let list = document.getElementById('list') - // list.parentElement - let item = document.createElement('ol') - item.className = 'todo-item' - item.innerHTML = ` -
-
${title}
-
${subtitle}
-
${description}
-
-
- - -
` - list.appendChild(item) + // ol todo-item + let itemElement = document.createElement('ol') + itemElement.className = 'todo-item' + + // input checkbox + let itemCheckboxElement = document.createElement('input') + itemCheckboxElement.type = 'checkbox' + itemCheckboxElement.className = 'item-checkbox' + // div todo-item-text + let itemTextElement = document.createElement('div') + itemTextElement.className = 'todo-item-text' + // item title + let titleElement = document.createElement('div') + titleElement.className = 'todo-item-title' + titleElement.innerText = title + // item subtitle + let subtitleElement = document.createElement('div') + subtitleElement.innerText = subtitle + subtitleElement.className = 'todo-item-subtitle' + // item description + let descriptionElement = document.createElement('div') + descriptionElement.innerText = description + descriptionElement.className = 'todo-item-description' + + // div todo-item-buttons + 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','goToEdit(this)') + // button edit + let deleteButtonElement = document.createElement('button') + deleteButtonElement.innerText = 'delete' + deleteButtonElement.className = 'item-delete-button' + deleteButtonElement.setAttribute('onclick','delete_item(this)') + + // append the text to parent + itemTextElement.appendChild(titleElement) + itemTextElement.appendChild(subtitleElement) + itemTextElement.appendChild(descriptionElement) + // append the buttons to parent + itemButtonsElement.appendChild(editButtonElement) + itemButtonsElement.appendChild(deleteButtonElement) + //append checkbox, text and buttons to list-item + itemElement.appendChild(itemCheckboxElement) + itemElement.appendChild(itemTextElement) + itemElement.appendChild(itemButtonsElement) + + // the itemElement should look like this + //
    + // + //
    + //
    Go for a walk with the dog
    + //
    very fun
    + //
    walk around the block 3 times, bring a doggy bag
    + //
    + //
    + // + // + //
    + //
+ + // finally append item to the list + list.appendChild(itemElement) document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' document.getElementById('description-input').value = '' @@ -44,6 +95,10 @@ function goToEdit(caller){ document.getElementById('menu-button').innerText = 'add changes' } function delete_item(caller){ + if(editMode){ + console.log('cant delete while in edit mode') + return + } let item = caller.parentElement.parentElement console.log(item) let list = document.getElementById('list') @@ -80,4 +135,10 @@ function menu_button(caller){ document.getElementById('menu-button').innerText = 'add item' document.getElementById('cancel-button').hidden = true } +} +function add_button(caller){ + document.getElementById('title-input').value = '' + document.getElementById('subtitle-input').value = '' + document.getElementById('description-input').value = '' + document.getElementById('title-input').focus() } \ No newline at end of file diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css index ea0b77a3..7f5a5c37 100644 --- a/1-Vanilla/styles.css +++ b/1-Vanilla/styles.css @@ -30,6 +30,10 @@ input:hover{ padding: 10px; border-right: solid 2px grey; } +.menu-buttons{ + display: flex; + justify-content: space-around; +} .item{ display:flex; flex-direction:column; @@ -51,12 +55,19 @@ input:hover{ 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; } -.todo-item:hover{ - transform: scale(1.1); -} + .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-description { + display: none; +} .todo-item-text{ display: flex; flex-direction: column; From a106bce3337a0932a4c2f21d6e25d0d48770436b Mon Sep 17 00:00:00 2001 From: haimre Date: Thu, 3 Feb 2022 10:10:40 +0200 Subject: [PATCH 07/13] title change --- 1-Vanilla/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 26cccc3a..609b828d 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -9,7 +9,7 @@ - Document + Vanilla TODO List
@@ -33,7 +33,7 @@

Vanilla TODO List

    - +
From 5c7ec56ff694e332c72cc444120332803b281c7d Mon Sep 17 00:00:00 2001 From: haimre Date: Thu, 3 Feb 2022 12:47:18 +0200 Subject: [PATCH 08/13] better practice onclick assigning --- 1-Vanilla/index.html | 7 ++- 1-Vanilla/index.js | 102 +++++++++++++++++++++++++++---------------- 1-Vanilla/styles.css | 2 + 3 files changed, 72 insertions(+), 39 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 609b828d..44422cf1 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -26,9 +26,12 @@

Vanilla TODO List

description:
- + + + +
diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index d2e3867c..49b1f451 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -1,13 +1,17 @@ -var editedItem = 'empty'; -var editMode = false; +var edited_id = 'empty'; +var edit_mode = false; +var id = 1; -function addItem(){ + + + +function add_item(){ let title = document.getElementById('title-input').value if (title ==''){ console.log('cant add an item without a title') return } - if (editMode){ + if (edit_mode){ console.log('cant add an item while in edit mode') return } @@ -17,7 +21,7 @@ function addItem(){ // ol todo-item let itemElement = document.createElement('ol') itemElement.className = 'todo-item' - + itemElement.id = id; // input checkbox let itemCheckboxElement = document.createElement('input') itemCheckboxElement.type = 'checkbox' @@ -27,17 +31,19 @@ function addItem(){ itemTextElement.className = 'todo-item-text' // item title let titleElement = document.createElement('div') - titleElement.className = 'todo-item-title' titleElement.innerText = title + titleElement.className = 'todo-item-title' + titleElement.id = 'title'+id // item subtitle let subtitleElement = document.createElement('div') subtitleElement.innerText = subtitle subtitleElement.className = 'todo-item-subtitle' + subtitleElement.id = 'subtitle'+id // item description let descriptionElement = document.createElement('div') descriptionElement.innerText = description descriptionElement.className = 'todo-item-description' - + descriptionElement.id = 'description'+id // div todo-item-buttons let itemButtonsElement = document.createElement('div') itemButtonsElement.className = 'todo-item-buttons' @@ -45,12 +51,12 @@ function addItem(){ let editButtonElement = document.createElement('button') editButtonElement.innerText = 'edit' editButtonElement.className = 'item-edit-button' - editButtonElement.setAttribute('onclick','goToEdit(this)') - // button edit + editButtonElement.setAttribute('onclick',`edit_item(${id})`) + // button delete let deleteButtonElement = document.createElement('button') deleteButtonElement.innerText = 'delete' deleteButtonElement.className = 'item-delete-button' - deleteButtonElement.setAttribute('onclick','delete_item(this)') + deleteButtonElement.setAttribute('onclick',`delete_item(${id})`) // append the text to parent itemTextElement.appendChild(titleElement) @@ -64,76 +70,90 @@ function addItem(){ itemElement.appendChild(itemTextElement) itemElement.appendChild(itemButtonsElement) - // the itemElement should look like this - //
    + // the itemElement should look like this example: + + //
      // //
      - //
      Go for a walk with the dog
      - //
      very fun
      - //
      walk around the block 3 times, bring a doggy bag
      + //
      Go for a walk with the dog
      + //
      very fun
      + //
      walk around the block 3 times, bring a doggy bag
      //
      //
      - // - // + // + // //
      //
    // finally append item to the list list.appendChild(itemElement) + + // reset menu display document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' document.getElementById('description-input').value = '' document.getElementById('menu-button').innerText = 'add item' + + // dont forget to change the id variable + id++ } -function goToEdit(caller){ - editedItem = caller.parentElement.parentElement.children[1] - document.getElementById('title-input').value = editedItem.children[0].innerHTML - document.getElementById('subtitle-input').value = editedItem.children[1].innerHTML - document.getElementById('description-input').value = editedItem.children[2].innerHTML - editMode = true - document.getElementById('cancel-button').hidden = false - document.getElementById('menu-button').innerText = 'add changes' + +function edit_item(item_id){ + edited_id = item_id + document.getElementById('title-input').value = document.getElementById(`title${item_id}`).innerText + document.getElementById('subtitle-input').value = document.getElementById(`subtitle${item_id}`).innerText + document.getElementById('description-input').value = document.getElementById(`description${item_id}`).innerText + edit_mode = 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 delete_item(caller){ - if(editMode){ + +function delete_item(item_id){ + if(edit_mode){ console.log('cant delete while in edit mode') return } - let item = caller.parentElement.parentElement + let item = document.getElementById(item_id) console.log(item) let list = document.getElementById('list') list.removeChild(item) } + function cancel_edit(){ document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' document.getElementById('description-input').value = '' - editMode = false + edit_mode = false document.getElementById('menu-button').innerText = 'add item' - document.getElementById('cancel-button').hidden = true + document.getElementById('cancel-button').hidden = true + edited_id = 0 } + function clear_menu(){ document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' document.getElementById('description-input').value = '' } -function menu_button(caller){ - if(!editMode){ - addItem() + +function menu_button(){ + if(!edit_mode){ + add_item() }else{ if (document.getElementById('title-input').value == ''){ console.log('cant set an empty title') return } - editedItem.children[0].innerHTML = document.getElementById('title-input').value - editedItem.children[1].innerHTML = document.getElementById('subtitle-input').value - editedItem.children[2].innerHTML = document.getElementById('description-input').value + document.getElementById(`title${edited_id}`).innerText = document.getElementById('title-input').value + document.getElementById(`subtitle${edited_id}`).innerText = document.getElementById('subtitle-input').value + document.getElementById(`description${edited_id}`).innerText = document.getElementById('description-input').value + document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' document.getElementById('description-input').value = '' - editMode = false + edit_mode = false document.getElementById('menu-button').innerText = 'add item' document.getElementById('cancel-button').hidden = true + edited_id = 0 } } function add_button(caller){ @@ -141,4 +161,12 @@ function add_button(caller){ document.getElementById('subtitle-input').value = '' document.getElementById('description-input').value = '' document.getElementById('title-input').focus() +} + +// attach functions to menu buttons +window.onload = function(){ + console.log(document.getElementById('clear-button')) + document.getElementById('clear-button').setAttribute('onclick','clear_menu()') + document.getElementById('menu-button').setAttribute('onclick','menu_button()') + document.getElementById('cancel-button').setAttribute('onclick','cancel_edit()') } \ No newline at end of file diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css index 7f5a5c37..f3540071 100644 --- a/1-Vanilla/styles.css +++ b/1-Vanilla/styles.css @@ -15,6 +15,7 @@ input:hover{ .page-body{ display:flex; flex-direction:column; + height: 100vh; } .header{ background-color: lightblue; @@ -24,6 +25,7 @@ input:hover{ .main-body{ display:flex; flex-direction:row; + height: 100vh; } .menu{ background-color: whitesmoke; From 77828847cdda15dca142ef62b93d52324a3317c7 Mon Sep 17 00:00:00 2001 From: haimre Date: Thu, 3 Feb 2022 14:06:25 +0200 Subject: [PATCH 09/13] remove console prints --- 1-Vanilla/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index 49b1f451..25eae845 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -114,7 +114,6 @@ function delete_item(item_id){ return } let item = document.getElementById(item_id) - console.log(item) let list = document.getElementById('list') list.removeChild(item) } @@ -165,7 +164,6 @@ function add_button(caller){ // attach functions to menu buttons window.onload = function(){ - console.log(document.getElementById('clear-button')) document.getElementById('clear-button').setAttribute('onclick','clear_menu()') document.getElementById('menu-button').setAttribute('onclick','menu_button()') document.getElementById('cancel-button').setAttribute('onclick','cancel_edit()') From 6aae63f22118bf4be5841e1ae05e9c917569cbb9 Mon Sep 17 00:00:00 2001 From: haimre Date: Thu, 3 Feb 2022 17:15:42 +0200 Subject: [PATCH 10/13] store todo-items in local storage --- 1-Vanilla/index.js | 174 +++++++++++++++++++++++++++------------------ 1 file changed, 103 insertions(+), 71 deletions(-) diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index 25eae845..1977ea8f 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -1,10 +1,7 @@ -var edited_id = 'empty'; +var edited_id = localStorage.length; var edit_mode = false; var id = 1; - - - function add_item(){ let title = document.getElementById('title-input').value if (title ==''){ @@ -18,76 +15,16 @@ function add_item(){ let subtitle = document.getElementById('subtitle-input').value let description = document.getElementById('description-input').value let list = document.getElementById('list') - // ol todo-item - let itemElement = document.createElement('ol') - itemElement.className = 'todo-item' - itemElement.id = id; - // input checkbox - let itemCheckboxElement = document.createElement('input') - itemCheckboxElement.type = 'checkbox' - itemCheckboxElement.className = 'item-checkbox' - // div todo-item-text - 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'+id - // item subtitle - let subtitleElement = document.createElement('div') - subtitleElement.innerText = subtitle - subtitleElement.className = 'todo-item-subtitle' - subtitleElement.id = 'subtitle'+id - // item description - let descriptionElement = document.createElement('div') - descriptionElement.innerText = description - descriptionElement.className = 'todo-item-description' - descriptionElement.id = 'description'+id - // div todo-item-buttons - 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',`edit_item(${id})`) - // button delete - let deleteButtonElement = document.createElement('button') - deleteButtonElement.innerText = 'delete' - deleteButtonElement.className = 'item-delete-button' - deleteButtonElement.setAttribute('onclick',`delete_item(${id})`) - // append the text to parent - itemTextElement.appendChild(titleElement) - itemTextElement.appendChild(subtitleElement) - itemTextElement.appendChild(descriptionElement) - // append the buttons to parent - itemButtonsElement.appendChild(editButtonElement) - itemButtonsElement.appendChild(deleteButtonElement) - //append checkbox, text and buttons to list-item - itemElement.appendChild(itemCheckboxElement) - itemElement.appendChild(itemTextElement) - itemElement.appendChild(itemButtonsElement) + let itemElement = create_todo_item_element(id,title,subtitle,description) - // the itemElement should look like this example: - - //
      - // - //
      - //
      Go for a walk with the dog
      - //
      very fun
      - //
      walk around the block 3 times, bring a doggy bag
      - //
      - //
      - // - // - //
      - //
    // finally append item to the list list.appendChild(itemElement) + // now save to local storage + let itemObject = `title: ${title};subtitle: ${subtitle};description: ${description}` + localStorage.setItem(id,itemObject) // reset menu display document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' @@ -115,7 +52,10 @@ function delete_item(item_id){ } let item = document.getElementById(item_id) let list = document.getElementById('list') + // remove from display list.removeChild(item) + // remove from item storage + localStorage.removeItem(item_id) } function cancel_edit(){ @@ -142,9 +82,15 @@ function menu_button(){ console.log('cant set an empty title') return } - document.getElementById(`title${edited_id}`).innerText = document.getElementById('title-input').value - document.getElementById(`subtitle${edited_id}`).innerText = document.getElementById('subtitle-input').value - document.getElementById(`description${edited_id}`).innerText = document.getElementById('description-input').value + let title = document.getElementById('title-input').value + let subtitle = document.getElementById('subtitle-input').value + let description = document.getElementById('description-input').value + document.getElementById(`title${edited_id}`).innerText = title + document.getElementById(`subtitle${edited_id}`).innerText = subtitle + document.getElementById(`description${edited_id}`).innerText = description + // now update item in local storage + let itemObject = `title: ${title};subtitle: ${subtitle};description: ${description}` + localStorage.setItem(edited_id,itemObject) document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' @@ -161,10 +107,96 @@ function add_button(caller){ document.getElementById('description-input').value = '' document.getElementById('title-input').focus() } +function create_todo_item_element(item_id,title,subtitle,description){ + + // ol todo-item + let itemElement = document.createElement('ol') + itemElement.className = 'todo-item' + itemElement.id = item_id; + // input checkbox + let itemCheckboxElement = document.createElement('input') + itemCheckboxElement.type = 'checkbox' + itemCheckboxElement.className = 'item-checkbox' + // div todo-item-text + 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'+item_id + // item subtitle + let subtitleElement = document.createElement('div') + subtitleElement.innerText = subtitle + subtitleElement.className = 'todo-item-subtitle' + subtitleElement.id = 'subtitle'+item_id + // item description + let descriptionElement = document.createElement('div') + descriptionElement.innerText = description + descriptionElement.className = 'todo-item-description' + descriptionElement.id = 'description'+item_id + // div todo-item-buttons + 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',`edit_item(${item_id})`) + // button delete + let deleteButtonElement = document.createElement('button') + deleteButtonElement.innerText = 'delete' + deleteButtonElement.className = 'item-delete-button' + deleteButtonElement.setAttribute('onclick',`delete_item(${item_id})`) + // append the text to parent + itemTextElement.appendChild(titleElement) + itemTextElement.appendChild(subtitleElement) + itemTextElement.appendChild(descriptionElement) + // append the buttons to parent + itemButtonsElement.appendChild(editButtonElement) + itemButtonsElement.appendChild(deleteButtonElement) + //append checkbox, text and buttons to list-item + itemElement.appendChild(itemCheckboxElement) + itemElement.appendChild(itemTextElement) + itemElement.appendChild(itemButtonsElement) + + // the itemElement should look like this example: + + //
      + // + //
      + //
      Go for a walk with the dog
      + //
      very fun
      + //
      walk around the block 3 times, bring a doggy bag
      + //
      + //
      + // + // + //
      + //
    + + return itemElement +} // attach functions to menu buttons window.onload = function(){ document.getElementById('clear-button').setAttribute('onclick','clear_menu()') document.getElementById('menu-button').setAttribute('onclick','menu_button()') document.getElementById('cancel-button').setAttribute('onclick','cancel_edit()') + // load display todo items from local storage + let list = document.getElementById('list') + for (let key in localStorage) { + if(isNaN(Number(key))) + continue; + let item_string = localStorage.getItem(key) + item_string = item_string.split(';') + let title = item_string[0].split(':')[1] + let subtitle = item_string[1].split(':')[1] + let description = item_string[2].split(':')[1] + let item_element = create_todo_item_element(Number(key),title,subtitle,description) + list.appendChild(item_element) + if(id < Number(key)){ + id = Number(key)+1 + } + } } \ No newline at end of file From cc654e26f996b7fa16deb2c1474acd1c69518403 Mon Sep 17 00:00:00 2001 From: haimre Date: Sun, 6 Feb 2022 13:18:06 +0200 Subject: [PATCH 11/13] display stored items from local storage --- 1-Vanilla/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index 1977ea8f..b772c0dd 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -1,4 +1,4 @@ -var edited_id = localStorage.length; +var edited_id = 0; var edit_mode = false; var id = 1; @@ -25,6 +25,7 @@ function add_item(){ // now save to local storage let itemObject = `title: ${title};subtitle: ${subtitle};description: ${description}` localStorage.setItem(id,itemObject) + // reset menu display document.getElementById('title-input').value = '' document.getElementById('subtitle-input').value = '' @@ -33,6 +34,7 @@ function add_item(){ // dont forget to change the id variable id++ + localStorage.setItem('next_id',id) } function edit_item(item_id){ @@ -185,6 +187,10 @@ window.onload = function(){ document.getElementById('cancel-button').setAttribute('onclick','cancel_edit()') // load display todo items from local storage let list = document.getElementById('list') + if (localStorage.getItem('next_id')==null){ + id = 1 + localStorage.setItem('next_id',1) + } for (let key in localStorage) { if(isNaN(Number(key))) continue; @@ -195,7 +201,9 @@ window.onload = function(){ let description = item_string[2].split(':')[1] let item_element = create_todo_item_element(Number(key),title,subtitle,description) list.appendChild(item_element) - if(id < Number(key)){ + //make sure we get the right id in store for use + if(Number(localStorage.getItem('next_id')) <= Number(key)){ + localStorage.setItem('next_id',Number(key)+1) id = Number(key)+1 } } From ffd2b8c564a776391f28541edfedc13c2aec66db Mon Sep 17 00:00:00 2001 From: haimre Date: Sun, 6 Feb 2022 14:50:25 +0200 Subject: [PATCH 12/13] fix: camelCase, no inline css, element creation in splited functions, alerts, accessive indentaions removed --- 1-Vanilla/index.html | 12 +- 1-Vanilla/index.js | 229 +++++++++++++++++---------------------- 1-Vanilla/list-item.html | 2 +- 1-Vanilla/styles.css | 7 +- 4 files changed, 112 insertions(+), 138 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index 44422cf1..ca8319b2 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -21,15 +21,11 @@

    Vanilla TODO List

    Edit items and add new items
-
title:
-
subtitle:
-
description:
+
title:
+
content:
- - +
@@ -38,7 +34,7 @@

Vanilla TODO List

- +
diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index b772c0dd..6aa42b79 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -1,35 +1,31 @@ -var edited_id = 0; -var edit_mode = false; -var id = 1; - -function add_item(){ +// TODO: +// - split element build to smaller functions +// - add uuid to items +// - change variable names to camelCase +let edited_id = 0; +let editMode = false; +let id = 1; + +function addItem(){ let title = document.getElementById('title-input').value if (title ==''){ - console.log('cant add an item without a title') + alert('cant add an item without a title') return } - if (edit_mode){ - console.log('cant add an item while in edit mode') + if (editMode){ + alert('cant add an item while in edit mode') return } - let subtitle = document.getElementById('subtitle-input').value - let description = document.getElementById('description-input').value + let content = document.getElementById('content-input').value let list = document.getElementById('list') - - let itemElement = create_todo_item_element(id,title,subtitle,description) - - - // finally append item to the list + let itemElement = createTodoItemElement(id,title,content) list.appendChild(itemElement) - // now save to local storage - let itemObject = `title: ${title};subtitle: ${subtitle};description: ${description}` - localStorage.setItem(id,itemObject) + let itemString = `title: ${title};content: ${content}` + localStorage.setItem(id,itemString) // reset menu display - document.getElementById('title-input').value = '' - document.getElementById('subtitle-input').value = '' - document.getElementById('description-input').value = '' + clearMenu() document.getElementById('menu-button').innerText = 'add item' // dont forget to change the id variable @@ -37,154 +33,134 @@ function add_item(){ localStorage.setItem('next_id',id) } -function edit_item(item_id){ - edited_id = item_id - document.getElementById('title-input').value = document.getElementById(`title${item_id}`).innerText - document.getElementById('subtitle-input').value = document.getElementById(`subtitle${item_id}`).innerText - document.getElementById('description-input').value = document.getElementById(`description${item_id}`).innerText - edit_mode = true //to disable item deletion +function sendItemToEdit(itemID){ + edited_id = 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 delete_item(item_id){ - if(edit_mode){ - console.log('cant delete while in edit mode') +function deleteItem(itemID){ + if(editMode){ + alert('cant delete while in edit mode') return } - let item = document.getElementById(item_id) + let item = document.getElementById(itemID) let list = document.getElementById('list') // remove from display list.removeChild(item) // remove from item storage - localStorage.removeItem(item_id) + localStorage.removeItem(itemID) } -function cancel_edit(){ - document.getElementById('title-input').value = '' - document.getElementById('subtitle-input').value = '' - document.getElementById('description-input').value = '' - edit_mode = false +function cancelEdit(){ + clearMenu() + editMode = false document.getElementById('menu-button').innerText = 'add item' document.getElementById('cancel-button').hidden = true edited_id = 0 } -function clear_menu(){ +function clearMenu(){ document.getElementById('title-input').value = '' - document.getElementById('subtitle-input').value = '' - document.getElementById('description-input').value = '' + document.getElementById('content-input').value = '' } -function menu_button(){ - if(!edit_mode){ - add_item() +function menuButtonClick(){ + if(!editMode){ + addItem() }else{ if (document.getElementById('title-input').value == ''){ - console.log('cant set an empty title') + alert('cant set an empty title') return } let title = document.getElementById('title-input').value - let subtitle = document.getElementById('subtitle-input').value - let description = document.getElementById('description-input').value + let content = document.getElementById('content-input').value document.getElementById(`title${edited_id}`).innerText = title - document.getElementById(`subtitle${edited_id}`).innerText = subtitle - document.getElementById(`description${edited_id}`).innerText = description + document.getElementById(`content${edited_id}`).innerText = content // now update item in local storage - let itemObject = `title: ${title};subtitle: ${subtitle};description: ${description}` + let itemObject = `title: ${title};content: ${content}` localStorage.setItem(edited_id,itemObject) - document.getElementById('title-input').value = '' - document.getElementById('subtitle-input').value = '' - document.getElementById('description-input').value = '' - edit_mode = false + clearMenu() + editMode = false document.getElementById('menu-button').innerText = 'add item' document.getElementById('cancel-button').hidden = true edited_id = 0 } } -function add_button(caller){ - document.getElementById('title-input').value = '' - document.getElementById('subtitle-input').value = '' - document.getElementById('description-input').value = '' +function addButton(){ + clearMenu() document.getElementById('title-input').focus() } -function create_todo_item_element(item_id,title,subtitle,description){ +function createTodoItemElement(itemID,title,content){ // ol todo-item let itemElement = document.createElement('ol') itemElement.className = 'todo-item' - itemElement.id = item_id; - // input checkbox - let itemCheckboxElement = document.createElement('input') - itemCheckboxElement.type = 'checkbox' - itemCheckboxElement.className = 'item-checkbox' - // div todo-item-text - 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'+item_id - // item subtitle - let subtitleElement = document.createElement('div') - subtitleElement.innerText = subtitle - subtitleElement.className = 'todo-item-subtitle' - subtitleElement.id = 'subtitle'+item_id - // item description - let descriptionElement = document.createElement('div') - descriptionElement.innerText = description - descriptionElement.className = 'todo-item-description' - descriptionElement.id = 'description'+item_id - // div todo-item-buttons - 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',`edit_item(${item_id})`) - // button delete - let deleteButtonElement = document.createElement('button') - deleteButtonElement.innerText = 'delete' - deleteButtonElement.className = 'item-delete-button' - deleteButtonElement.setAttribute('onclick',`delete_item(${item_id})`) - - // append the text to parent - itemTextElement.appendChild(titleElement) - itemTextElement.appendChild(subtitleElement) - itemTextElement.appendChild(descriptionElement) - // append the buttons to parent - itemButtonsElement.appendChild(editButtonElement) - itemButtonsElement.appendChild(deleteButtonElement) + 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) - // the itemElement should look like this example: - - //
    - // - //
    - //
    Go for a walk with the dog
    - //
    very fun
    - //
    walk around the block 3 times, bring a doggy bag
    - //
    - //
    - // - // - //
    - //
- 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','clear_menu()') - document.getElementById('menu-button').setAttribute('onclick','menu_button()') - document.getElementById('cancel-button').setAttribute('onclick','cancel_edit()') + 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') if (localStorage.getItem('next_id')==null){ @@ -194,13 +170,12 @@ window.onload = function(){ for (let key in localStorage) { if(isNaN(Number(key))) continue; - let item_string = localStorage.getItem(key) - item_string = item_string.split(';') - let title = item_string[0].split(':')[1] - let subtitle = item_string[1].split(':')[1] - let description = item_string[2].split(':')[1] - let item_element = create_todo_item_element(Number(key),title,subtitle,description) - list.appendChild(item_element) + 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) //make sure we get the right id in store for use if(Number(localStorage.getItem('next_id')) <= Number(key)){ localStorage.setItem('next_id',Number(key)+1) diff --git a/1-Vanilla/list-item.html b/1-Vanilla/list-item.html index 0424eceb..8a8c0c2e 100644 --- a/1-Vanilla/list-item.html +++ b/1-Vanilla/list-item.html @@ -3,7 +3,7 @@
title
sub-title
-
description
+
content
diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css index f3540071..899cc93b 100644 --- a/1-Vanilla/styles.css +++ b/1-Vanilla/styles.css @@ -36,6 +36,9 @@ input:hover{ display: flex; justify-content: space-around; } +.menu-item{ + margin: 5px; +} .item{ display:flex; flex-direction:column; @@ -67,7 +70,7 @@ input:hover{ .item-checkbox:checked ~div.todo-item-text > .todo-item-subtitle { text-decoration: line-through; } -.item-checkbox:checked ~div.todo-item-text > .todo-item-description { +.item-checkbox:checked ~div.todo-item-text > .todo-item-content { display: none; } .todo-item-text{ @@ -123,7 +126,7 @@ input:hover{ font-weight: thin; padding-left: 15px; } -.todo-item-description{ +.todo-item-content{ font-weight: thin; padding-left: 15px; color: grey; From 719ebf697e9742a98167704615ab4ef2c0fab768 Mon Sep 17 00:00:00 2001 From: haimre Date: Sun, 6 Feb 2022 15:27:21 +0200 Subject: [PATCH 13/13] fix: ID is now random --- 1-Vanilla/index.html | 6 ++---- 1-Vanilla/index.js | 37 ++++++++++++------------------------- 1-Vanilla/styles.css | 20 ++++++++++++++++---- 3 files changed, 30 insertions(+), 33 deletions(-) diff --git a/1-Vanilla/index.html b/1-Vanilla/index.html index ca8319b2..43b9181e 100644 --- a/1-Vanilla/index.html +++ b/1-Vanilla/index.html @@ -2,9 +2,7 @@ - - @@ -21,8 +19,8 @@

Vanilla TODO List

Edit items and add new items
-
title:
-
content:
+
title:
+
content:
diff --git a/1-Vanilla/index.js b/1-Vanilla/index.js index 6aa42b79..65f3fbb2 100644 --- a/1-Vanilla/index.js +++ b/1-Vanilla/index.js @@ -1,11 +1,9 @@ -// TODO: -// - split element build to smaller functions -// - add uuid to items -// - change variable names to camelCase -let edited_id = 0; +let editedID = 0; let editMode = false; -let id = 1; +function getNewID(){ + return Math.floor(Math.random()*1000) +} function addItem(){ let title = document.getElementById('title-input').value if (title ==''){ @@ -18,7 +16,9 @@ function addItem(){ } 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}` @@ -27,14 +27,10 @@ function addItem(){ // reset menu display clearMenu() document.getElementById('menu-button').innerText = 'add item' - - // dont forget to change the id variable - id++ - localStorage.setItem('next_id',id) } function sendItemToEdit(itemID){ - edited_id = 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 @@ -60,7 +56,7 @@ function cancelEdit(){ editMode = false document.getElementById('menu-button').innerText = 'add item' document.getElementById('cancel-button').hidden = true - edited_id = 0 + editedID = 0 } function clearMenu(){ @@ -78,17 +74,17 @@ function menuButtonClick(){ } let title = document.getElementById('title-input').value let content = document.getElementById('content-input').value - document.getElementById(`title${edited_id}`).innerText = title - document.getElementById(`content${edited_id}`).innerText = content + 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(edited_id,itemObject) + localStorage.setItem(editedID,itemObject) clearMenu() editMode = false document.getElementById('menu-button').innerText = 'add item' document.getElementById('cancel-button').hidden = true - edited_id = 0 + editedID = 0 } } function addButton(){ @@ -163,10 +159,6 @@ window.onload = function(){ document.getElementById('add-button').setAttribute('onclick','addButton()') // load display todo items from local storage let list = document.getElementById('list') - if (localStorage.getItem('next_id')==null){ - id = 1 - localStorage.setItem('next_id',1) - } for (let key in localStorage) { if(isNaN(Number(key))) continue; @@ -176,10 +168,5 @@ window.onload = function(){ let content = itemString[1].split(':')[1] let itemElement = createTodoItemElement(Number(key),title,content) list.appendChild(itemElement) - //make sure we get the right id in store for use - if(Number(localStorage.getItem('next_id')) <= Number(key)){ - localStorage.setItem('next_id',Number(key)+1) - id = Number(key)+1 - } } } \ No newline at end of file diff --git a/1-Vanilla/styles.css b/1-Vanilla/styles.css index 899cc93b..857fa4b2 100644 --- a/1-Vanilla/styles.css +++ b/1-Vanilla/styles.css @@ -9,6 +9,9 @@ button{ button:hover{ transform: scale(1.3) } +input{ + margin: 0px 10px; +} input:hover{ transform: scale(1.1); } @@ -37,7 +40,14 @@ input:hover{ 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; @@ -45,11 +55,13 @@ input:hover{ align-items: end; } .display{ - min-width:40%; - max-width:60%; - display: flex; - flex-direction: column; + min-width: 40%; + max-width: 60%; + display: flex; + flex-direction: column; margin: 10px; + justify-content: start; + align-items: center; } .todo-item{ display: flex;