To build an interactive comments section, where users can create, read, update, and delete comments and replies. The challenge requires a strong understanding of HTML, CSS, and JavaScript. The app should be responsive to different device screen sizes and include hover states for interactive elements.
The data for the comments section is provided in a local data.json file. The first-level comments should be ordered by score, whereas nested replies are ordered by time added. The app should also include upvoting and downvoting for comments.
Additionally using localStorage to save the current state in the browser, and dynamically tracking the time since the comment or reply was posted.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Create, Read, Update, and Delete comments and replies
- Upvote and downvote comments
- use
localStorageto save the current state in the browser that persists when the browser is refreshed. - using timestamps and dynamically track the time since the comment or reply was posted.
- Live Site URL: https://interactive-comment-site.netlify.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
To run the app locally, clone the GitHub repository and run the npm install to install the packages to run this project. Typing the command npm start the view the projet in your terminal