Learn how to create a shooting star rating system using HTML, CSS, and JavaScript. A comprehensive guide with step-by-step instructions.
Table of Contents
The shooting star rating system is a visually appealing and interactive way to collect user ratings or feedback on websites. It adds an engaging element to websites that involve user-generated content, product reviews, or any other form of user input. With a shooting star rating, users can easily express their opinions and provide feedback using a familiar and intuitive star-based system.
The implementation of a shooting star rating system requires the integration of HTML, CSS, and JavaScript. HTML provides the structure and markup for the rating system, CSS is used to style the appearance of the star and the overall rating container, and JavaScript adds interactivity and functionality to capture user actions and update the rating dynamically.
By incorporating a shooting star rating system into a website, businesses, and content creators can gather valuable feedback, enhance user engagement, and improve the overall user experience. Users appreciate the simplicity and visual appeal of the rating system, making it an effective tool for evaluating products, services, articles, or any other form of content.
In the following sections of this tutorial, we will guide you through the step-by-step process of creating a shooting star rating system using HTML, CSS, and JavaScript. Whether you are a web developer looking to add a rating feature to your website or a beginner interested in learning more about front-end web development, this tutorial will provide you with the necessary knowledge and skills to implement your own customizable shooting star rating system.
Let's start making an amazing shooting star rating system using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our shooting star rating system.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break it down section by section:
1. <!DOCTYPE html>: This is the document type declaration and it specifies that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag for the HTML document and it specifies the language of the document, which is set to English ("en" stands for English).
3. <head>: This is the head section of the HTML document. It contains metadata and other information about the webpage.
4. <title>Home</title>: This is the title of the webpage, which will be displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag specifies the character encoding for the HTML document, which is set to UTF-8. UTF-8 is a widely used character encoding that supports a wide range of characters from various languages.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport of the webpage to the width of the device. It ensures that the webpage is rendered properly on different devices with varying screen sizes.
7. <link rel="stylesheet" href="styles.css" />: This link tag is used to include an external CSS (Cascading Style Sheets) file named "styles.css". The CSS file is used to define the styles and layout of the HTML elements.
8. </head>: This is the closing tag for the head section.
9. <body>: This is the body section of the HTML document. It contains the visible content of the webpage.
10. <div>: This is a block-level HTML element used to create a division or section within the webpage.
11. <p>Drag the star to rate us.</p>: This is a paragraph element that contains the text "Drag the star to rate us." It will be displayed as a paragraph of text on the webpage.
12. <input id="myrange" type="range" min="0" max="100" value="50" step="25" list="markers" />: This is an input element of type "range". It creates a slider control that allows users to select a value within a specified range. The slider has a minimum value of 0, maximum value of 100, initial value of 50, and a step size of 25. The id attribute is set to "myrange" to uniquely identify this input element. The list attribute is set to "markers" to associate it with a datalist (not shown in the given code) that may contain predefined values for the slider.
13. </div>: This is the closing tag for the div element.
14. <script src="script.js"></script>: This script tag is used to include an external JavaScript file named "script.js". The JavaScript file contains code that will be executed on the webpage, allowing for dynamic functionality and interactivity.
15. </body>: This is the closing tag for the body section.
16. </html>: This is the closing tag for the HTML document.
This is the basic structure of our shooting star rating system using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the shooting star rating system is in place, the next step is to add styling to the shooting star rating system using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our shooting star rating system.
Here's a summary of what each part does:
The body selector sets some general styles for the entire page. It sets the box-sizing to border-box, sets the background color to a dark shade of gray (rgb(32, 32, 32)), ensures a minimum height of 100% of the viewport height, displays the content in a grid and centers it, sets the text alignment to center, specifies the font-family, and sets the text color to a gold shade (#f2bf4a).
There are multiple selectors starting with input[value='X']::-webkit-slider-runnable-track. These selectors define different styles for the track of a range input based on its value. Each selector sets custom CSS variables (--color, --loc, --scale, --track-scale) that determine the color, position, scaling, and size of the track.
The div selector sets the width of all div elements to 50%.
The p selector adds a bottom margin of 3rem to all p elements.
The input[type='range'] selector defines styles for range input elements. It removes the default appearance, sets the width to 100%, makes the background transparent, and rotates it slightly.
The input[type='range']::-webkit-slider-runnable-track selector sets styles for the track of the range input. It specifies the width and height of the track, adds a gradient background and a border, and sets the border radius.
The input[type='range']::-webkit-slider-thumb selector defines styles for the thumb (slider handle) of the range input. It sets the box shadow, border, width, aspect ratio, background color, cursor style, and transforms it.
This will give our shooting star rating system an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
box-sizing: border-box;
background-color: rgb(32, 32, 32);
min-height: 100vh;
display: grid;
place-items: center;
text-align: center;
font-family: system-ui;
color: #f2bf4a;
}
/* values for each star position */
input[value='0']::-webkit-slider-runnable-track {
--color: #fbdda1;
--loc: 7.5%;
--scale: scale(0.5);
--track-scale: 12px;
}
input[value='25']::-webkit-slider-runnable-track {
--color: #f8ce78;
--loc: 30%;
--scale: scale(0.75);
--track-scale: 16px;
}
input[value='50']::-webkit-slider-runnable-track {
--color: #f2bf4a;
--loc: 50%;
--scale: scale(1);
--track-scale: 20px;
}
input[value='75']::-webkit-slider-runnable-track {
--color: #f3b933;
--loc: 70%;
--scale: scale(1.25);
--track-scale: 24px;
}
input[value='100']::-webkit-slider-runnable-track {
--color: #f3b411;
--loc: 95%;
--scale: scale(1.5);
--track-scale: 28px;
}
div {
width: 50%;
}
p {
margin-bottom: 3rem;
}
input[type='range'] {
-webkit-appearance: none;
width: 100%;
background: transparent;
transform: rotate(-15deg);
}
input[type='range']:focus {
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: var(--track-scale);
cursor: pointer;
background: linear-gradient(
to bottom,
transparent 25%,
rgb(32, 32, 32) 25% 50%,
transparent 50% 75%,
rgb(32, 32, 32) 75% 100%
),
linear-gradient(
to right,
transparent,
var(--color) var(--loc),
transparent var(--loc)
),
rgb(32, 32, 32);
image-rendering: pixelate;
border-radius: 25px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
input[type='range']::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
width: 75px;
aspect-ratio: 1/1;
border-radius: 7px;
background: var(--color);
cursor: pointer;
-webkit-appearance: none;
transform: translateY(-45%) rotate(0deg) var(--scale);
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
When the value of the input element changes (when the user interacts with it), the code inside the arrow function is executed.
Inside the arrow function, the setAttribute method is used to update the "value" attribute of the "myrange" input element with the new value. The event.target.value retrieves the current value of the input element that triggered the event, and this value is then assigned to the "value" attribute using setAttribute.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
myrange.addEventListener("input", (event) => {
myrange.setAttribute('value', event.target.value)
});Final Output:
Conclusion:
In this tutorial, we explored the process of creating a shooting stars rating system using HTML, CSS, and JavaScript. By following the step-by-step instructions, you can now build your own customizable rating system and tailor it to fit your website's needs. Have fun experimenting and engaging your users with shooting stars ratings!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
