{"id":19543262,"url":"https://github.com/codewithalamin/interactive-rating-component","last_synced_at":"2026-01-27T00:38:38.236Z","repository":{"id":154934127,"uuid":"623979176","full_name":"CodeWithAlamin/Interactive-rating-component","owner":"CodeWithAlamin","description":"This is a solution to the Interactive rating component challenge on Frontend Mentor.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:03:04.000Z","size":171,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T18:15:17.839Z","etag":null,"topics":["accessibility","alamin","beginner-friendly","codepapa360","codewithalamin","dom-manipulation","event-listeners","front-end-development","frontendmentor","interactive-web-development","javascript","rating-component","responsive-design","user-interface-design"],"latest_commit_sha":null,"homepage":"https://interactive-rating-alamin.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-05T13:44:16.000Z","updated_at":"2024-10-30T12:03:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"758e5da9-979d-4c79-9f90-ad500f3dd859","html_url":"https://github.com/CodeWithAlamin/Interactive-rating-component","commit_stats":null,"previous_names":["codewithalamin/interactive-rating-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeWithAlamin/Interactive-rating-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-rating-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-rating-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-rating-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-rating-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Interactive-rating-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-rating-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28794011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","alamin","beginner-friendly","codepapa360","codewithalamin","dom-manipulation","event-listeners","front-end-development","frontendmentor","interactive-web-development","javascript","rating-component","responsive-design","user-interface-design"],"created_at":"2024-11-11T03:18:09.182Z","updated_at":"2026-01-27T00:38:38.220Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","readme":"\u003ch1 align=\"center\"\u003eInteractive Rating Component\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://interactive-rating-alamin.netlify.app/\" target=\"_blank\"\u003e\n      🚀 Live Site\n    \u003c/a\u003e\n    |\n    \u003ca href=\"https://www.frontendmentor.io/solutions/interactive-rating-component-w-sass-ItEH_ZdH0y\" target=\"_blank\"\u003e\n      💡 Solution\n    \u003c/a\u003e\n  \u003c/h5\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    This is my solution for the Interactive Rating Component challenge on Frontend Mentor. The challenge required me to create a responsive and interactive rating component using HTML, CSS, and JavaScript. Check out the live site!\u003c/p\u003e\n\u003c/div\u003e\n\n### Screenshot\n\n\u003ca align=\"center\" href=\"https://interactive-rating-alamin.netlify.app/\" target=\"_blank\"\u003e\n\n\u003cimg src=\"screenshots/Screenshot Interactive rating component Frontend Mentor Alamin.png\"/\u003e\n\u003c/a\u003e\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the app depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Select and submit a number rating\n- See the \"Thank you\" card state after submitting a rating\n- **Bonus** Added a Back arrow button to go back and rate again.\n\n#### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- JavaScript\n- Mobile-first workflow\n- NPM\n\n### What I learned\n\nIn this project, I was able to practice my JavaScript skills by creating an interactive rating component. I gained practical experience in working with event listeners and managing states in JavaScript. Through this challenge, I was able to apply my knowledge of JavaScript to build real-world applications. Overall, this project helped me improve my front-end development skills, specifically in JavaScript.\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Interactive-rating-component.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Run command:\n\n```sh\nnpm start\n```\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Acknowledgments\n\nI would like to express my gratitude to the team at Frontend Mentor for providing me with this engaging challenge. Their platform has been an invaluable resource for improving my front-end development skills. I also want to thank my fellow developers and the online community for their support and inspiration throughout this project.\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Interactive-rating-component/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Finteractive-rating-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Finteractive-rating-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Finteractive-rating-component/lists"}