
## Code

<codePlayground
  template="react"
  files={{
    "/App.js": `import React from "react";
import "./style.css";
\n\
const StarRatings = ({ testimonial }) => {
  return (
     <>
      <head>
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
        />
      </head>
      <div class="star-container">
        {[...Array(testimonial.stars)].map((_, index) => (
          <span
            key={index}
            class="material-symbols-outlined"
          >
            star
          </span>
        ))}
      </div>
    </>
  );
};
\n\
const Ratings = () => {
  const testimonial = {
    stars: 5,
  };
  return (
    <div class="ratings-container">
      <StarRatings testimonial={testimonial} />
      <p class="ratings-text">
        Star Ratings: {testimonial?.stars}/5
      </p>
    </div>
  );
};
\n\
export default Ratings;
    `,
    "/style.css": `/* Star Ratings component styles */
.star-container {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: orange;
}
\n\
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
\n\
/* Ratings component styles */
.ratings-container {
  margin-bottom: 2rem;
  width: max-content;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
}
\n\
.ratings-text {
  margin-bottom: 0;
  text-align: center;
}
`,
  }}
/>

<connectWithMe />


Easily add star ratings to your website with this simple JavaScript code snippet.

How to Create Star Ratings with JavaScript

Stay updated! Subscribe to my newsletter.

Subscribe to my newsletter 💌