Push Method with UUID Generation

Author: arduino731

5project/README.md

@@ -0,0 +1,25 @@
+# Push Method with UUID Generation
+
+###### Summary for this project 
+###### Purpose: Showcase JavaScript code manages a to-do list.
+
+**Link to work:** [Push Method with UUID Generation](https://arduino731.github.io/JavaScript-Algorithms-and-Data-Structures/5project/)
+
+Your JavaScript code manages a to-do list, adding new tasks while ensuring that users enter valid text. It includes the following key features:
+
+1. Push Method with UUID Generation:
+
++ Each new to-do item gets a unique identifier using uuidv4(), a function that generates a 128-bit unique identifier.
++ New tasks are added to the todos array with push(), including an animated property for UI effects.
+
+2. Error Handling with Animation:
+
++ If the input is empty, an error message appears (fadeIn effect).
++ Once the user adds a valid entry, the error message disappears (fadeOut effect with a delay of 600ms).
+
+3. Form Submission Handling:
+
++ Prevents default form behavior using e.preventDefault().
++ Validates the input field before adding a new task.
++ Clears the input field after a successful submission.
++ Calls render(todos) to update the UI.

day17/css/style.css renamed to 5project/css/style.css

@@ -23,6 +23,7 @@ document.querySelector('#new-todo').addEventListener('submit', (e) => {
           completed: false,
           animated: true
       })
+      console.log(todos)
       render(todos); // refresh function list and add new todo
       // saveTodos(todos) will be save and store data
       e.target.elements.text.value = '';

day17/img/hex-dark.png renamed to 5project/img/hex-dark.png

@@ -13,6 +13,7 @@ https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
 | 01  |     [JavaScript Select Menu: Changing Background with Switch and DOM Manipulation](https://github.com/arduino731/JavaScript-Algorithms-and-Data-Structures/tree/master/1project) | [Live Demo](https://arduino731.github.io/JavaScript-Algorithms-and-Data-Structures/1project/)  |
 | 02  |     [Form Input Text Wave](https://github.com/arduino731/JavaScript-Algorithms-and-Data-Structures/tree/master/2project) | [Live Demo](https://arduino731.github.io/JavaScript-Algorithms-and-Data-Structures/2project/)  |
 | 03  |     [Animation Paws](https://github.com/arduino731/JavaScript-Algorithms-and-Data-Structures/tree/master/3project) | [Live Demo](https://arduino731.github.io/JavaScript-Algorithms-and-Data-Structures/3project/)  |
+| 04  |     [Animated Countdown and Change Background](https://github.com/arduino731/JavaScript-Algorithms-and-Data-Structures/tree/master/4project) | [Live Demo](https://arduino731.github.io/JavaScript-Algorithms-and-Data-Structures/4project/)  |
 
 
 
@@ -90,10 +91,3 @@ Day 16
 
 **Link to Work**: [Todo List](https://arduino731.github.io/100daysofcode/day16/index.html)
 
-Day 17
-
-**Today's Progress**: Basically, I am using flexbox 
-
-**Thoughts**: 
-
-**Link to Work**: [Todo List](https://arduino731.github.io/100daysofcode/day17/index.html)