![]() ![]() Local storage: The code uses `localStorage` to persistently store the notes, ensuring that they are still available when the user returns to the page. It hides notes that don't match the selected tag. ![]() Filtering notes by tag: Users can filter notes by selecting a tag from the dropdown menu. It filters the notes based on the search input in real-time. Searching notes: The code allows users to search for notes by text. Deleting completed notes: The "Delete Completed" button deletes all completed notes from the list and `noteItems`. Sorting notes: The "Sort" button sorts the notes based on their completion status, moving completed notes to the bottom of the list. The code also updates the `noteItems` array to reflect the completion status. Completing notes: When a note's checkbox is clicked, it toggles the "completed" class, visually indicating the note's completion status. Deleting notes: When the "Delete" button is clicked on a note, it prompts the user for confirmation and, if confirmed, deletes the note from the list and `noteItems`. After editing, the user can click the "Update" button to save changes. Editing notes: When the "Edit" button is clicked on a note, it allows the user to edit the note's text and tag. It also updates the filter options for tags. If so, it adds a new note to the list and stores it in the `noteItems` array. Here are some key functionalities implemented in the JavaScript code: - Adding notes: When the user submits the form, the code checks if a note and an optional tag are entered. It selects various HTML elements by their IDs and adds event listeners to them. It listens for the `DOMContentLoaded` event, ensuring that the JavaScript code is executed after the page has fully loaded. **JavaScript (`script.js`):** - It adds functionality to the Note App. It handles the appearance of completed notes and styles for the container. It defines the appearance of the note items, checkboxes, tags, and buttons. **CSS (`ali1.css`):** - It provides styles for various elements on the page, including fonts, colors, spacing, and button styles. It links to external CSS and JavaScript files (`ali1.css` and `script.js`). Here's a breakdown of what this code does: **HTML (`index.html`):** - It defines the structure of the web page, including form elements for adding notes, buttons for sorting and deleting notes, and a list to display the notes. This is an HTML, CSS, and JavaScript code snippet for a simple Note App. Here are just some of the past few years’ final projects, randomly ordered! GitHub Instagram LinkedIn Reddit Threads Twitter ~~~~~This post contains some affiliate links for your convenience (which means if you make a purchase after clicking a link I will earn a small commission which helps keep my blog up and running but it won’t cost you a penny more)! Click here to read my full disclosure policy.This is CS50 CS50’s Introduction to Computer Scienceĭavid J. However, if you want smaller, simply reduce the print size! If you’re not sure on how much to reduce, check out my post “ How to Resize Printables to Fit Your Planner.”
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |