Overview
An interactive UI lets users create, edit, search, and keep track of their to-do items. I coded with JavaScript React, managing data models and rendering the virtual Document Object Model (DOM) to make the app dynamic.
Objective
The goal is to create an interactive app structure that is light on the backend and renders the input data quickly on its frontend UI.
Approach
To make the UI component interactive, first, I determined the user’s intent. The user will make, edit, and save sticky notes for this app.
Then, I added event handlers, listers, and listeners that allow the user to create new notes by entering the “+ New Note” button.
Finally, I coded editing and searching functions.
Delivery
The deliverable is developed on Code Sandbox.
The source code is uploaded to GitHub.
Result
When the user interacts with the app, the virtual DOM helps the UI load quicker by updating only the parts that need to be re-rendered.