Skip to content

moustf/comments-interactive-section

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💡 comments-interactive-section

Interactive comments section where you can update, delete, reply to you comments and rate them.

📍 Live link to the webpage.

Check it out form HERE.

📍 What is this component?

this is an interactive comments-reply component section where you can rate comments, upadate-eidt them, delete them, and vote them as well. And all the things done are saved for you.

📍 User journey:

  • When the user first open the component webpage, he/she will find a comments generator box to post your thoughts, when you're finished typing the words, you can hit the SEND button to post the comment.
  • for posted comments, you can reply to others' comments by clicking the Reply button at the upper right of the comment box, and a box will appear to the bottom of the comment where you can release your reply and post it. Also, you can up vote or down vote them by the plus/minus signs on the left side of the box.
  • When you are the author of the comment, as an addition to the features above, you can edit or delete your comment/reply. To delete the comment, press the delete button and then YES, DELETE, to cancel press NO, CANCEL. To edit the comment, press the Edit button, then update what you need and press UPDATE to save.

📍 User stories:

  • As a user, I should be able to view the optimal layout for the app depending on their device's screen size.
    • As a user, I should be able to see hover states for all interactive elements on the page.
  • As a user, I should be able to post my thoughts as a comment.
  • As a user, I should be able to up vote and down vote my comments and other people's comments.
  • As a user, I should be able to edit my comments/replies and update them.
  • As a user, I should be able to to delete my comments/replies.
  • As a user, I should be able to reply to other people's comments.

📍 How to install the project on your local machine:

clone

  • You can click the code drop-down menu as illustrated in the picture above and copy the link to clone the repo.
  • Now go to your terminal and type: git clone <the link here> and then the repo will be cloned to your local machine.
  • By now you have to open your IDE -I recommend VSCode- and open the project.
  • to open a live page from your local machine project, you can download the live Server extension. This's a link to the extension.
  • Now right click with your mouse and choose: Open with live server.
  • Happy Coding!🤞

📍 Technologies that I used:

HTML5. ➙ CSS3. ➙ javaScript. ➙ Local Storage. ➙ Git and GitHub. ➙ SASS Preprocessor

📍 Design Images:

desktop-design active-states desktop-modal mobile-design mobile-modal

📍 Challenge link from HERE.

.

💡 Coded by: Mustafa Salem.