Merge pull request #4 from Trictonicmp/interactive-list

Interactive list

README.md

@@ -11,6 +11,20 @@
 - Fameworks: N/A
 - Technologies: Linters, Git, GitHub, Webpack
 
+## Screenshots
+> Initial state
+
+![imagen](https://user-images.githubusercontent.com/11634112/165835674-3538b3f0-7fb3-4232-8a80-195f4fe1fc27.png)
+> Adding new Items
+
+![imagen](https://user-images.githubusercontent.com/11634112/165835885-ce6ef129-ad8a-4deb-a07e-649e14f63427.png)
+> Editing list items and deleting them with the "delete" button
+
+![imagen](https://user-images.githubusercontent.com/11634112/165836099-f1faa229-8fbd-4e7f-8541-2ca2aed299a0.png)
+> Completing tasks
+
+![imagen](https://user-images.githubusercontent.com/11634112/165836578-7c213bfe-2707-49dc-beae-a8fb172881ac.png)
+
 
 ## Getting Started
 

dist/index.html

@@ -14,14 +14,14 @@ <h1>Today's list</h1>
       <button type="button" title="Refresh" class="list-button"><img src="images/04fbf9164fdce37c4132.svg" alt="refresh"></button>
     </div>
     <form class="form" id="main-form">
-      <input type="text" placeholder="Add to your list...">
+      <input type="text" placeholder="Add to your list..." required>
       <button type="submit" class="list-button"><img src="images/fa544f635765db738d2e.png" alt="add"></button>
     </form>
     <ul class="list-container" id="items-container">
       <!-----------List container----------->
     </ul>
     <div class="footer">
-      <button type="button">Clear all completed</button>
+      <button type="button" id="completed-button">Clear all completed</button>
     </div>
   </main>
 </body>

public/index.html

@@ -14,14 +14,14 @@ <h1>Today's list</h1>
       <button type="button" title="Refresh" class="list-button"><img src="../src/images/refresh.svg" alt="refresh"></button>
     </div>
     <form class="form" id="main-form">
-      <input type="text" placeholder="Add to your list...">
+      <input type="text" placeholder="Add to your list..." required>
       <button type="submit" class="list-button"><img src="../src/images/intro.png" alt="add"></button>
     </form>
     <ul class="list-container" id="items-container">
       <!-----------List container----------->
     </ul>
     <div class="footer">
-      <button type="button">Clear all completed</button>
+      <button type="button" id="completed-button">Clear all completed</button>
     </div>
   </main>
 </body>

src/css/animations.css

@@ -0,0 +1,40 @@
+@keyframes insert {
+  from {
+    opacity: 0;
+    transform: translateY(3em);
+    margin-top: -3em;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    margin-top: 0;
+  }
+}
+
+@keyframes insert-reversed {
+  from {
+    opacity: 0;
+    transform: translateY(-3em);
+    margin-top: 0;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes delete {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+    margin-top: 0;
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-3em);
+    margin-top: -3em;
+  }
+}

src/css/main.css

@@ -1,4 +1,5 @@
 @import url('reset.css');
+@import url('animations.css');
 @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;600&display=swap');
 
 /* ---------- CSS variables ---------- */
@@ -10,13 +11,15 @@
   --text-disabled-color: #aaa;
   --border-color: #eee;
   --accent-color: #f2f2f2;
+  --unique-color: #333;
   --editing-color: #fffeca;
   --icon-opacity: 0.2;
   --icon-opacity-hover: 0.5;
 }
 
 body {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   height: 100vh;
@@ -82,6 +85,7 @@ main > *,
 .footer button {
   background-color: transparent;
   border: none;
+  color: var(--unique-color);
 }
 
 .header button:hover {
@@ -119,10 +123,18 @@ main > *,
   width: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .list-container li {
   display: flex;
+  align-items: center;
+  z-index: 1;
+  background-color: var(--main-color);
+  transition-property: background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in;
+  overflow: hidden;
 }
 
 .list-container .checkbox {
@@ -135,6 +147,7 @@ main > *,
   font-size: 1em;
   background-color: transparent;
   color: var(--text-color);
+  resize: none;
 }
 
 .list-container li .description,
@@ -162,11 +175,6 @@ main > *,
   outline: none;
 }
 
-.list-container li .description span,
-.list-container li .description input[type=text] {
-  flex-grow: 1;
-}
-
 .list-container .checkbox:checked + span {
   text-decoration: line-through;
   font-style: italic;
@@ -198,3 +206,18 @@ main > *,
   text-decoration: underline;
   cursor: pointer;
 }
+
+.insert {
+  animation-name: insert;
+  animation-duration: 0.3s;
+}
+
+.insert-button {
+  animation-name: insert-reversed;
+  animation-duration: 0.3s;
+}
+
+.delete {
+  animation-name: delete;
+  animation-duration: 0.3s;
+}

src/js/DataHandler.js

@@ -3,26 +3,34 @@ import ListHandler from './ListHandler.js';
 export default class DataHandler {
   constructor() {
     this.listHandler = new ListHandler();
-    if (localStorage.getItem('list-data')) {
-      const storedData = JSON.parse(localStorage.getItem('list-data'));
-      storedData.forEach((item) => {
-        this.listHandler.addItem(item.description, item.completed);
-      });
-    }
-
     this.form = document.getElementById('main-form');
     this.form.onsubmit = (event) => {
       event.preventDefault();
       this.addItem();
     };
-
+    this.formInput = document.querySelector('input');
     this.listHandler.saveData = () => {
       this.saveData();
     };
+
+    this.completedButton = document.getElementById('completed-button');
+    this.completedButton.onclick = () => {
+      this.clearCompleted();
+    };
+  }
+
+  init() {
+    if (localStorage.getItem('list-data')) {
+      const storedData = JSON.parse(localStorage.getItem('list-data'));
+      storedData.forEach((item) => {
+        this.listHandler.addItem(item.description, item.completed);
+      });
+    }
   }
 
   addItem() {
-    const inputValue = this.form[0].value;
+    const inputValue = this.formInput.value;
+
     this.listHandler.addItem(inputValue);
     this.form.reset();
     this.form.focus();
@@ -32,4 +40,9 @@ export default class DataHandler {
   saveData() {
     localStorage.setItem('list-data', JSON.stringify(this.listHandler.items));
   }
+
+  clearCompleted() {
+    this.listHandler.clearCompleted();
+    this.saveData();
+  }
 }

src/js/Item.js

@@ -6,14 +6,20 @@ export default class Item {
     this.description = description;
     this.index = index;
     this.completed = completed;
+    this.isNew = true;
+    this.isEditing = false;
 
     this.htmlElement = document.createElement('li');
     this.descriptionSpan = document.createElement('span');
-    this.descriptionInput = document.createElement('input');
+    this.descriptionInput = document.createElement('textarea');
+    this.descriptionInput.rows = 1;
+    this.checkbox = document.createElement('input');
+    this.checkbox.checked = this.completed;
     this.deleteButton = document.createElement('button');
-
+    this.htmlElement.classList.add('insert');
     this.descriptionInput.oninput = () => {
       this.updateDescription();
+      this.updateInputHeight();
     };
 
     this.deleteButton.onclick = () => {
@@ -35,15 +41,20 @@ export default class Item {
     this.descriptionSpan.innerText = this.description;
   }
 
+  updateInputHeight() {
+    this.descriptionInput.style.height = `${this.descriptionInput.scrollHeight.toString()}px`;
+  }
+
   createHtml() {
-    const checkbox = document.createElement('input');
-    checkbox.classList.add('checkbox');
-    checkbox.type = 'checkbox';
-    this.htmlElement.append(checkbox);
+    this.checkbox.classList.add('checkbox');
+    this.checkbox.type = 'checkbox';
+    this.checkbox.onchange = (event) => {
+      this.completed = event.target.checked;
+    };
+    this.htmlElement.append(this.checkbox);
 
     this.descriptionSpan.innerText = this.description;
     this.descriptionSpan.classList.add('description');
-    this.descriptionInput.type = 'text';
     this.descriptionInput.value = this.description;
     this.descriptionInput.classList.add('description-input');
     this.htmlElement.append(this.descriptionSpan);
@@ -53,6 +64,7 @@ export default class Item {
     move.type = 'button';
     move.classList.add('list-button');
     move.classList.add('move');
+    move.classList.add('insert-button');
     const dotsImg = new Image();
     dotsImg.src = dotsSvg;
     dotsImg.alt = ':';
@@ -62,6 +74,7 @@ export default class Item {
     this.deleteButton.type = 'button';
     this.deleteButton.classList.add('list-button');
     this.deleteButton.classList.add('trash');
+    this.deleteButton.classList.add('insert');
     const trashImg = new Image();
     trashImg.src = trashSvg;
     trashImg.alt = 'delete';
@@ -70,15 +83,34 @@ export default class Item {
   }
 
   getHtml() {
+    if (!this.isNew) {
+      this.htmlElement.classList.remove('insert');
+    }
+    this.isNew = false;
     return this.htmlElement;
   }
 
   makeEditable(editable) {
     if (editable) {
+      if (!this.isEditing) {
+        const spanHeight = this.descriptionSpan.clientHeight;
+        this.descriptionInput.style.height = `${spanHeight}px`;
+        this.isEditing = true;
+      }
       this.htmlElement.classList.add('editing');
       this.descriptionInput.focus();
     } else {
       this.htmlElement.classList.remove('editing');
+      this.isEditing = false;
     }
   }
+
+  delete() {
+    this.htmlElement.classList.add('delete');
+    this.htmlElement.style.zIndex = 0;
+  }
+
+  setCompleted(completedValue) {
+    this.completed = completedValue;
+  }
 }