JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Questionnaire</title>
  <style>
    label {
      display: inline-block;
      margin-bottom: 5px;
    }
    .toggle-button {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      background-color: #eee;
      color: #555;
      cursor: pointer;
      outline: none;
    }
    .toggle-button.toggle-button-checked {
      background-color: green;
      color: white;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
    .summary {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Song Questionnaire</h1>
  <form>
    <h2>Track Information</h2>
    <!-- Track Information fields -->

    <h2>1. What is the overall vibe of this track?</h2>
    <div id="vibeCheckboxes"></div>

    <h2>2. What feelings does this track evoke in you?</h2>
    <!-- Question 2 checkboxes -->

    <h2>3. What are the top 3 musical lines driving this track?</h2>
    <!-- Question 3 checkboxes -->

    <h2>4. What is the most impactful/memorable part of this track?</h2>
    <!-- Question 4 checkboxes -->

    <h2>5. What is the story arc of the song from a musical energy perspective?</h2>
    <textarea name="storyArc" placeholder="Enter your response here..."></textarea>

    <h2>6. Other notes to mention?</h2>
    <textarea name="notes" placeholder="Enter your response here..."></textarea>

    <button type="submit">Submit</button>
  </form>

  <div class="summary">
    <h2>Summary</h2>
    <pre id="summaryData"></pre>
  </div>

  <script>
    const vibeList = [
      'Aggressive', 'Atmospheric', 'Blissful', 'Bittersweet', 'Brooding', 'Captivating', 'Catchy',
      'Cinematic', 'Cutting-edge', 'Dark', 'Dreamy', 'Driving', 'Eclectic', 'Edgy', 'Energetic',
      'Enchanting', 'Enigmatic', 'Euphoric', 'Ethereal', 'Experimental', 'Expressive', 'Expansive',
      'Funky', 'Futuristic', 'Glistening', 'Gritty', 'Groovy',...