{"id":21496728,"url":"https://github.com/alaeddinejebali/five-star-rating-component","last_synced_at":"2025-09-10T23:35:17.138Z","repository":{"id":25122074,"uuid":"28543781","full_name":"alaeddinejebali/Five-star-rating-component","owner":"alaeddinejebali","description":"Using CSS for the layout and JavaScript to get the result","archived":false,"fork":false,"pushed_at":"2017-08-16T10:50:14.000Z","size":17,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T22:12:21.121Z","etag":null,"topics":["css3","html-components","rating-stars","rating-system","ratings"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/alaeddinejebali.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}},"created_at":"2014-12-27T18:50:48.000Z","updated_at":"2022-06-16T22:07:01.000Z","dependencies_parsed_at":"2022-08-23T19:30:18.067Z","dependency_job_id":null,"html_url":"https://github.com/alaeddinejebali/Five-star-rating-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FFive-star-rating-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FFive-star-rating-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FFive-star-rating-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FFive-star-rating-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alaeddinejebali","download_url":"https://codeload.github.com/alaeddinejebali/Five-star-rating-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244031029,"owners_count":20386534,"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":["css3","html-components","rating-stars","rating-system","ratings"],"created_at":"2024-11-23T16:18:23.024Z","updated_at":"2025-03-17T12:22:11.169Z","avatar_url":"https://github.com/alaeddinejebali.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Five star ratings component\n![alt text](demo.png \"Demo image\")\n\n\n## Using only CSS to build the component\n```css\nbody {\n\tcolor: #000;\n\tbackground: #eaebef;\n\tfont: 700 16px/1.5 Verdana;\n}\n\n#section-result{\n    border-bottom: 1px solid #999;\n    margin-bottom: 50px;\n}\n\n#section-rating, h1{\n\ttext-align: center;\n}\n\n.set {\n\tdisplay: inline-block;\n\tfont-size: 3rem;\n\tborder: none;\n}\n\n.set:after {\n\tcontent: \"\";\n\tdisplay: table;\n\tclear: both;\n}\n\n.star {\n\tfloat: right;\n\tpadding-left: 15px;\n\tcursor: pointer;\n\tcolor: #FFB300;\n}\n\n.star:last-child {\n\tpadding-left: 0;\n}\n\n.star:hover:before, .star:hover~.star:before, .rd:checked~.star:before {\n\tcontent: \"\\f005\";\n}\n\n.rd {\n\tdisplay: none;\n}\n\n.rating {\n\tfont-size: 0;\n}\n```\n\n## Using JavaScript to get the selected value\n```javascript\nfunction showresult(res){\n\tdocument.getElementById('result').innerText = \"You selected the value: \" + res;;\n}\n\ndocument.getElementById('rd1').addEventListener('click', function(){\n\tshowresult(1);\n});\n\ndocument.getElementById('rd2').addEventListener('click', function(){\n\tshowresult(2);\n});\n\ndocument.getElementById('rd3').addEventListener('click', function(){\n\tshowresult(3);\n});\n\ndocument.getElementById('rd4').addEventListener('click', function(){\n\tshowresult(4);\n});\n\ndocument.getElementById('rd5').addEventListener('click', function(){\n\tshowresult(5);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaeddinejebali%2Ffive-star-rating-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaeddinejebali%2Ffive-star-rating-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaeddinejebali%2Ffive-star-rating-component/lists"}