Survey Form with Star Rating

<form id="surveyForm" onsubmit="submitSurvey(event)">
  <div style="margin-bottom:20px">
    <label>How was your experience?</label>
    <div id="starRating" style="font-size:28px;cursor:pointer">
      <span class="star" data-val="1" onclick="setRating(1)">&#9734;</span>
      <span class="star" data-val="2" onclick="setRating(2)">&#9734;</span>
      <span class="star" data-val="3" onclick="setRating(3)">&#9734;</span>
      <span class="star" data-val="4" onclick="setRating(4)">&#9734;</span>
      <span class="star" data-val="5" onclick="setRating(5)">&#9734;</span>
    </div>
    <input type="hidden" name="rating" id="ratingInput" value="0">
  </div>
  <div style="margin-bottom:20px">
    <label>Would you recommend us?</label>
    <label><input type="radio" name="recommend" value="yes" required> Yes</label>
    <label><input type="radio" name="recommend" value="no"> No</label>
  </div>
  <textarea name="feedback" placeholder="Additional feedback..." rows="4"></textarea>
  <button type="submit">Submit Survey</button>
</form>
<script>
let rating = 0;
function setRating(val) {
  rating = val;
  document.getElementById("ratingInput").value = val;
  document.querySelectorAll(".star").forEach(s => {
    s.innerHTML = parseInt(s.dataset.val) <= val ? "&#9733;" : "&#9734;";
  });
}
function submitSurvey(e) {
  e.preventDefault();
  if (rating === 0) { alert("Please select a rating"); return; }
  const data = new FormData(e.target);
  console.log("Survey:", Object.fromEntries(data));
  alert("Thank you for your feedback!");
}
</script>