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