{"id":20309615,"url":"https://github.com/coder-abdo/frontend-mentor-interactive-rating-component","last_synced_at":"2025-08-21T23:14:50.045Z","repository":{"id":245332678,"uuid":"817927361","full_name":"coder-abdo/frontend-mentor-interactive-rating-component","owner":"coder-abdo","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-20T19:21:29.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T11:58:19.646Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coder-abdo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-06-20T18:25:02.000Z","updated_at":"2024-06-20T19:21:32.000Z","dependencies_parsed_at":"2024-06-21T13:33:55.578Z","dependency_job_id":"3b0b7823-059f-4339-bd09-4f11304cec82","html_url":"https://github.com/coder-abdo/frontend-mentor-interactive-rating-component","commit_stats":null,"previous_names":["coder-abdo/frontend-mentor-interactive-rating-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-abdo%2Ffrontend-mentor-interactive-rating-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-abdo%2Ffrontend-mentor-interactive-rating-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-abdo%2Ffrontend-mentor-interactive-rating-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-abdo%2Ffrontend-mentor-interactive-rating-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coder-abdo","download_url":"https://codeload.github.com/coder-abdo/frontend-mentor-interactive-rating-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241809603,"owners_count":20023786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-14T17:28:02.027Z","updated_at":"2025-03-04T07:47:18.725Z","avatar_url":"https://github.com/coder-abdo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Interactive rating component solution\n\nThis is a solution to the [Interactive rating component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI). Frontend Mentor challenges help you improve your coding skills by building realistic projects.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n## Overview\n\nthis is my solution for the `front end mentor challenge interactive rating component` and I used the simplest solution using `HTML5`, `CSS3`, and `JS` without any frameworks or libraries.\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\n### Screenshot\n\n![screenshot of the solution](./images/screenshot.png)\n\n### Links\n\n- Solution URL: [frontendmentor solution](https://www.frontendmentor.io/solutions/interactive-rating-component-C8eWpTk7WB)\n- Live Site URL: [github pages](https://coder-abdo.github.io/frontend-mentor-interactive-rating-component/)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Responsive Layout\n- Flexbox\n- JS\n\n### What I learned\n\nMost of my solution was created with HTML5, CSS3, and pure JS DOM and Adding accessibility and Semantic these are what I focus on.\n\n```html\n\u003cdiv aria-describedby=\"rating-description\" class=\"rating-list\"\u003e\n  \u003cdiv class=\"rating\" data-rating=\"1\"\u003e1\u003c/div\u003e\n  \u003cdiv class=\"rating\" data-rating=\"2\"\u003e2\u003c/div\u003e\n  \u003cdiv class=\"rating\" data-rating=\"3\"\u003e3\u003c/div\u003e\n  \u003cdiv class=\"rating\" data-rating=\"4\"\u003e4\u003c/div\u003e\n  \u003cdiv class=\"rating\" data-rating=\"5\"\u003e5\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n@layer base,components,utilities;\n:root {\n  /* mobile size  */\n  --MOB-SIZE: 376px;\n  /* colors */\n  --Orange: hsl(25, 97%, 53%);\n  --White: hsl(0, 0%, 100%);\n\n  --Light-Grey: hsl(217, 12%, 63%);\n  --Light-Dark-Blue: hsl(217deg 14.57% 26.93%);\n  --Dark-Blue: hsl(213, 19%, 18%);\n  --Very-Dark-Blue: hsl(216, 12%, 8%);\n  /* font family and font base size */\n  --FONT: \"Overpass\", sans-serif;\n  --P-FONT-SIZE: 15px;\n}\n\n@layer base {\n  *,\n  *::before,\n  *::after {\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n  html {\n    font-size: 62.5%;\n  }\n  body {\n    font-family: var(--FONT);\n    background-color: var(--Very-Dark-Blue);\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n    padding: 0 2rem 1rem;\n  }\n  p {\n    font-size: var(--P-FONT-SIZE);\n    color: var(--Light-Grey);\n    \u0026.thanks-text {\n      line-height: 1.5;\n    }\n  }\n  h1 {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: var(--White);\n  }\n}\n```\n\n```js\nratingList.forEach((rating) =\u003e {\n  rating.addEventListener(\"click\", function (e) {\n    if (this.dataset.rating === e.target.textContent) {\n      ratingList.forEach((rating) =\u003e rating.classList.remove(\"active\"));\n      this.classList.add(\"active\");\n      selectedRating = this.innerText;\n    }\n  });\n});\n```\n\n### Continued development\n\nI focus on writing Accessible and semantic HTML5 markup.\n\n### Useful resources\n\nhttps://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text/\n\n- [MDN-a good basis of accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) - This helped me for add more accessible attributes. I really liked this pattern and will use it going forward.\n- [Design102-What’s the alternative? How to write good alt text](https://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text) - This is an amazing article which helped me understand how to write good alt text. I'd recommend it to anyone still learning this concept.\n\n## Author\n\n- Website - [my portfolio](https://abdelmonaem-portfolio.vercel.app/)\n- Frontend Mentor - [@coder-abdo](https://www.frontendmentor.io/profile/coder-abod)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoder-abdo%2Ffrontend-mentor-interactive-rating-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoder-abdo%2Ffrontend-mentor-interactive-rating-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoder-abdo%2Ffrontend-mentor-interactive-rating-component/lists"}