https://github.com/yashi-singh-1/feedback-modal-component
In this frontend challenge, you'll build a Feedback Modal Component. This challenge is perfect for you if you've been learning HTML and CSS and are looking to practice what you've learned by building something new and beginner-friendly.
https://github.com/yashi-singh-1/feedback-modal-component
beginner-friendly challenge coding-challenge css css-flexbox css3 feedback-modal front-end frontend frontend-challenge html html5 responsive responsive-design ui-components web-development
Last synced: 8 months ago
JSON representation
In this frontend challenge, you'll build a Feedback Modal Component. This challenge is perfect for you if you've been learning HTML and CSS and are looking to practice what you've learned by building something new and beginner-friendly.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/feedback-modal-component
- Owner: Yashi-Singh-1
- Created: 2024-06-06T09:46:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-11T18:34:06.000Z (over 1 year ago)
- Last Synced: 2024-11-10T11:15:32.680Z (12 months ago)
- Topics: beginner-friendly, challenge, coding-challenge, css, css-flexbox, css3, feedback-modal, front-end, frontend, frontend-challenge, html, html5, responsive, responsive-design, ui-components, web-development
- Language: CSS
- Homepage:
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Feedback Modal Component
Challenge Requirements
The Feedback Modal Component should be triggered by a button, and it should appear as a modal overlay on top of the current page. The modal should include a rating scale that allows users to rate a product on a scale of 1 to 10. Users should be able to select a rating by clicking on a number in the scale. The modal should close when the user submits their feedback. The modal should get closed by clicking on a “Cancel” button or by clicking outside of the modal. Show the hover state of all the elements. The component should be responsive and display correctly on different screen sizes.
About the Challenge
In this frontend challenge, you'll build a Feedback Modal Component. This challenge is perfect for you if you've been learning CSS and HTML and are looking to practice what you've learned by building something new and beginner-friendly.
Taking Your Project to the Next Level
Consider enhancing your project with advanced CSS techniques or by exploring CSS frameworks like Bootstrap or Bulma. Additionally, you can experiment with basic JavaScript to add interactivity to your modal component.
Installation Steps
1. Clone the repository.
2. Open index.html in your web browser to view the menu.
Tech Stack
- HTML
- CSS
Prerequisites
Before installation, please make sure you have already installed the following tools:
- Web browser (e.g., Chrome, Firefox, Edge)
Preview
Project Structure
The project structure is organized as follows:
- index.html
- styles.css
Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (git checkout -b feature/AmazingFeature)
- Commit your Changes (git commit -m 'Add some AmazingFeature')
- Push to the Branch (git push origin feature/AmazingFeature)
- Open a Pull Request
Resources
[An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)