{"id":25869596,"url":"https://github.com/pasek108/fm-interactiveratingcomponent","last_synced_at":"2026-05-13T04:03:56.377Z","repository":{"id":167659761,"uuid":"643287301","full_name":"Pasek108/FM-InteractiveRatingComponent","owner":"Pasek108","description":"Frontend mentor challange - Interactive rating component","archived":false,"fork":false,"pushed_at":"2025-02-19T13:51:34.000Z","size":375,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-19T14:33:57.980Z","etag":null,"topics":["challenge","frontend-mentor","interactive-rating-component"],"latest_commit_sha":null,"homepage":"https://pasek108.github.io/FM-InteractiveRatingComponent/","language":"TypeScript","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/Pasek108.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":"2023-05-20T17:22:33.000Z","updated_at":"2025-02-19T13:51:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf06feff-cf2e-4621-a7e1-c92999547cbc","html_url":"https://github.com/Pasek108/FM-InteractiveRatingComponent","commit_stats":null,"previous_names":["pasek108/interactiveratingcomponent"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-InteractiveRatingComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-InteractiveRatingComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-InteractiveRatingComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pasek108%2FFM-InteractiveRatingComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pasek108","download_url":"https://codeload.github.com/Pasek108/FM-InteractiveRatingComponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241460810,"owners_count":19966636,"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":["challenge","frontend-mentor","interactive-rating-component"],"created_at":"2025-03-02T05:18:57.586Z","updated_at":"2026-05-13T04:03:56.328Z","avatar_url":"https://github.com/Pasek108.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eFM-InteractiveRatingComponent - Readme\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    My solution to the \u003ca href=\"https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI\" target=\"_blank\"\u003eFrontend Mentor \"Interactive rating component\" challenge\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.frontendmentor.io/home\"\u003e\n    \u003cimg src=\"_for_readme/banner.jpg?\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003e [!CAUTION]  \n\u003e \u003ch4\u003ePlease, don't look at my solutions until you have completed it yourself.\u003c/h4\u003e\n\u003e Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach.  \n\u003e If you can't complete a challenge, skip it and come back to it later. Only look at someone else's solutions as a last resort, and treat it as a defeat.\n\n\u003cbr\u003e\n\n# Table of Contents\n* [FrontendMentor :thinking:](#frontendmentor-thinking)\n  * [What is it](#what-is-it)\n  * [Is it worth doing](#is-it-worth-doing)\n* [Overview :sparkles:](#overview-sparkles)\n  * [About](#about)\n  * [Features](#features)\n  * [Technologies](#technologies)\n  * [Setup](#setup)\n  * [Copyright](#copyright-copyright)\n* [Details :scroll:](#details-scroll)\n  * [User interface](#user-interface)\n  * [Performance](#performance)\n\n\u003cbr\u003e\n\n# FrontendMentor :thinking:\n\n## What is it\n[FrontendMentor](https://www.frontendmentor.io/home) is a platform that provides real-world front-end coding challenges to help developers improve their skills. It offers projects ranging from simple layouts to complex web applications, allowing users to practice HTML, CSS, and JavaScript by building solutions that closely resemble professional work.  \n\n## Is it worth doing\nFrontend Mentor is a great resource for developers looking to gain hands-on experience by working on practical projects. The challenges help reinforce best practices, improve design implementation skills, and build a portfolio. However, since there is no automated grading system, feedback depends on community reviews, making it essential to engage with others for constructive criticism.  \n\n\u003cbr\u003e\n\n# Overview :sparkles:\n\n## About\nMy solution to the [Frontend Mentor \"Interactive rating component\" challenge](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI). The project was created using Angular, TypeScript and SCSS.\n\nCheck out the [live version](https://pasek108.github.io/FM-InteractiveRatingComponent/) of this project, as well as my [Frontend Mentor profile](https://www.frontendmentor.io/profile/Pasek108).\n\n\u003cbr\u003e\n\n![preview](/_for_readme/preview.png)\n\n## Technologies\nLanguages:\n- JavaScript\n- TypeScript\n- CSS\n- HTML\n\nLibraries and frameworks:\n- [Angular](https://angular.dev) 15.2.0\n- [SCSS](https://sass-lang.com)\n- [GoogleFonts](https://fonts.google.com)\n  \nPrograms:\n- [VSCode](https://code.visualstudio.com)\n- [PowerToys](https://learn.microsoft.com/en-us/windows/powertoys/)\n- [ShareX](https://getsharex.com)\n- [GIMP](https://www.gimp.org)\n\n## Features\n### Challenge requirements\n- ✅ Optimal layout for the app depending on their device's screen size\n- ✅ Hover states for all interactive elements on the page\n- ✅ Select and submit a number rating\n- ✅ \"Thank you\" card state after submitting a rating\n\n## Setup\n- Use [live version](https://pasek108.github.io/FM-InteractiveRatingComponent/).\n\n- Download this repository and:\n  - Open project in VSCode\n  - Run `npm install`\n  - Run `ng serve`\n  - Open generated address in the browser\n\n- Deployment for GitHub:\n  - Run `ng build --output-path docs --base-href /FM-InteractiveRatingComponent/`\n  - Delete `3rdpartylicenses.txt` from `/docs`\n\n## Copyright :copyright:\nI do not own the rights to the content of the challenges. All challenge data was downloaded and included only to provide context for the solutions.\n\n\u003cbr\u003e\n\n\n# Details :scroll:\n\n## User interface\n### Rating\n![rating](/_for_readme/UI/rating.png)\nFirst, the user is asked to select a rating from 1 to 5.  \n\n\u003cbr\u003e  \n\n![thank you](/_for_readme/UI/thank-you.png)  \nAfter submitting the form, a thank-you message is displayed. \n\n## Performance\n\n### Desktop\n![desktop performance](/_for_readme/desktop-performance.png)\n\n### Mobile\n![mobile performance](/_for_readme/mobile-performance.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpasek108%2Ffm-interactiveratingcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpasek108%2Ffm-interactiveratingcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpasek108%2Ffm-interactiveratingcomponent/lists"}