Skip to main content

Building a Fun Rating Page: A Step-by-Step Guide

Building a Fun Rating Page: A Step-by-Step Guide


Hey there! Ready to create a cool rating page for your website? Let's make it simple and fun using HTML, CSS, and JavaScript. This step-by-step guide will help you create a visually appealing page where users can rate their experience with cute stars and emojis.




See the Pen Untitled by AryCodes (@AryCodes) on CodePen.


Step 1: Setting Up the Basics

Start with the basic structure of your HTML file. Include the title, link to your style sheet, and the main content container.


```html

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Rating Page</title>

    <link rel="stylesheet" href="styles.css">

</head>


<body>

    <div class="rating-container">

        <!-- Content Goes Here -->

    </div>

    <script src="script.js"></script>

</body>


</html>

```


Step 2: Making it Look Pretty with CSS


Add some style to your page. Create a nice background gradient and style the rating container.


```css

body {

    font-family: 'Poppins', sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background: linear-gradient(to right, #ecf0f1, #3498db);

    margin: 0;

}


.rating-container {

    background: linear-gradient(to right, #ffffff, #f0f0f0);

    padding: 30px;

    border-radius: 15px;

    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);

    text-align: center;

}


/* The rest of the styles are in the provided code snippet */

```


Step 3: Adding Fun Rating Stars


Let's create stars that users can click to rate their experience.


```html

<div class="rating-stars">

    <div class="star" onclick="selectStars(1)">★</div>

    <div class="star" onclick="selectStars(2)">★</div>

    <div class="star" onclick="selectStars(3)">★</div>

    <div class="star" onclick="selectStars(4)">★</div>

    <div class="star" onclick="selectStars(5)">★</div>

</div>

```


Step 4: Making it Interactive with JavaScript


Now, let's add some magic with JavaScript. When users click on a star, it gets selected, and a cute emoji reaction shows up.


```javascript

let selectedStars = 0;


function selectStars(stars) {

    selectedStars = stars;

    updateStars();

}


function updateStars() {

    const stars = document.querySelectorAll('.star');

    stars.forEach((star, index) => {

        star.classList.toggle('selected', index < selectedStars);

    });


    const emojiCode = getEmojiCode(selectedStars);

    const reactionEmoji = document.querySelector('.reaction-emoji');

    reactionEmoji.textContent = emojiCode;

}


function getEmojiCode(rating) {

    if (rating === 5) {

        return '🤩';

    } else if (rating >= 4) {

        return '😊';

    } else if (rating >= 3) {

        return '😐';

    } else if (rating >= 2) {

        return '😕';

    } else {

        return '😞';

    }

}

```

Step 5: Conclusion


And that's it! You now have a super fun and interactive rating page. Users can click on stars to express their feelings, and the page reacts with cute emojis. Customize it to match your website's vibe, and you're good to go. Happy coding! 🚀

Comments

Post a Comment

Popular posts from this blog

Creating a Festive Snowfall Effect For Christmas with HTML, CSS, and JavaScript

Creating a Festive Snowfall Effect For Christmas with HTML, CSS, and JavaScript Introduction: 'Tis the season to bring joy and festivity to your website! In this blog post, we'll walk through the process of creating a delightful snowfall effect using HTML, CSS, and JavaScript. By combining particle.js, anime.js, and some creative styling, we'll add a touch of magic to your web page. See the Pen Untitled by AryCodes ( @AryCodes ) on CodePen .  Setting the Stage To start, let's create the basic structure of our webpage. We have an HTML document with a red background, a Google Font for a stylish greeting, and a background image to enhance the festive atmosphere. The cursor is set to a crosshair, adding an interactive feel. ```html <!DOCTYPE html> <html lang="en"> <head>     <!-- meta tags, stylesheets, and script references --> </head> <body>     <!-- Particle animation container -->     <div id=...
Post a Comment
Read more

Getting Started with Programming

Programming , we can say language of the future , is a skill that has become most valuable in todays digital era . Whether you are interested in building website or developing mobile app , or dive into the data analysis , learn to code can open up a world of opportunities for you but where should you start , in this blog we are talking about the basis of programming and provide you the resources to start your journey Why Learning Programming ? before we are getting started lets know why programming and why this skill is worthy 1. High Demanding : with the rise in technology there is a growing demand of skilled programmers and developers across various industries whether it is tech of business related. 2. Problem Solving skills: Programming teaches you how to break down complex problems into slow one and solve that effortlessly and more manageable way. 3. Creativity : Coding and programing help you  to solve real world problems that you see around you and provide you to solve them ...
Post a Comment
Read more