| Event | Day | Date | Time |
|---|---|---|---|
| Release | Wed | Sep 18 | 09:00 AM ET |
| Due | Wed | Sep 25 | 05:00 PM ET |
In this homework, you will complete the StickyNotes App, a web application where users can add, edit, and delete sticky notes.
Your task is to write the JavaScript that makes this application functional. The HTML (styled with TailwindCSS) has been provided for you.
Please see the demo on Panopto.
Log into your GitHub account at https://github.com/. Next, click on this link and accept the invitation. This will create a private GitHub repository containing the starter code.
Please ensure the repository remains private. Do not alter its visibility or add collaborators. Clone this repository locally to commence your work.
Clone the repository to your computer, then open the index.html file in VSCode to familiarize yourself with its content. You’ll find the layout bears resemblance to the one we used for the ToDo app. Notably, this file uses the TailwindCSS utility classes for styling.
You should refrain from making any changes to the index.html file.
Open the src/main.js file and develop the app according to the provided description, specification, and demo. You should adhere to either functional programming or object-oriented programming style.
Before you submit, make sure to run prettier and deploy your app as a GitHub page. Additionally, update the info.json file with links to your GitHub repository and the location of your deployed app:
{
"repo": "",
"app": ""
}Ensure the updated info.json file is committed and pushed to your GitHub repository. Following this, submit your work on Gradescope.
Should you need to resubmit, push the changes to your repository first and then re-submit on Gradescope.
Teaching assistants will evaluate your submission using the following criteria:
Spec 1: Users should be able to add a new note by typing into the provided textarea and pressing “Enter”.
Spec 2: Multiline content can be added to a note using “Shift + Enter”.
Spec 3: After a new note is added, the textarea should be cleared, including any new lines. The placeholder “Create a new note…” should be visible when the textarea is empty.
Spec 4: Notes should be arranged in a grid layout, akin to sticky notes. They should be ordered such that the oldest note appears at the top left, while the newest note is positioned at the bottom right.
Spec 5: The content of the notes should retain the format in which they were written. For example, a note written in multiple lines should be displayed as such.
Spec 6: A note can be deleted by clicking its trash icon, which is visible on hover and located at the top right corner of each note.
Spec 7: A note can be edited by double-clicking it, revealing a textarea with the note’s content. The textarea should be focused for editing.
Spec 8: Changes can be saved after editing by pressing “Enter” or “Escape”.
Spec 9: While editing, multiline content can be added with “Shift + Enter”.
Spec 10: Clicking outside the textarea while editing should also save changes.
Spec 11: When entering the edit mode, only the note that the user double-clicked should be in this mode. When exiting the edit mode, no note should remain in edit mode.
Spec 12: The app should operate smoothly without any JavaScript errors. There should be no errors or debugging messages in the console. The source code should be free of visible inefficiencies. For instance, event delegation should be implemented instead of attaching an event listener to each note.
Spec 13: The JavaScript code should follow either the functional programming or object-oriented paradigm. For the functional style, the code should include at least four functions: addNote, removeNote, editNote, and createStickyNotesApp. If you choose the object-oriented paradigm, the code must contain at least three classes: Note, NotesWall, and StickyNotesApp.
Spec 14: The submission should reflect best practices in code readability. This includes consistent indentation, clear naming conventions, and relevant code comments. If you opt for the functional style, the code should use pure functions, higher-order functions, closures, and immutable data. If you choose the object-oriented style, the code should adhere to principles of encapsulation and composition. In either case, the programming style emphasizes modularity, with helper functions focusing on single responsibilities and avoiding excessive length.