JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Form</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap">
  <style>
    /* CSS styles here */
  </style>
  <script>
    function toggleCheckboxButton(checkboxId) {
      // Checkbox button code here
    }
    
    function submitForm() {
      // Get the form field values
      var artistName = document.getElementById("artistName").value;
      var songName = document.getElementById("songName").value;
      var key = document.getElementById("key").value;
      var bpm = document.getElementById("bpm").value;
      var overallFeelCheckboxes = document.querySelectorAll('input[name="overallFeel"]:checked');
      var feelingsCheckboxes = document.querySelectorAll('input[name="feelings"]:checked');
      var overallFeel = Array.from(overallFeelCheckboxes).map(function(checkbox) {
        return checkbox.value;
      });
      var feelings = Array.from(feelingsCheckboxes).map(function(checkbox) {
        return checkbox.value;
      });
      
      // Call the server-side function using google.script.run
      google.script.run.onSubmitForm({
        artistName: artistName,
        songName: songName,
        key: key,
        bpm: bpm,
        overallFeel: overallFeel,
        feelings: feelings
      });
      
      // Clear the form fields (optional)
      document.getElementById("songForm").reset();
    }
  </script>
  <script src="https://apis.google.com/js/api.js"></script>
  <script>
    // Load the Google API client
    function handleClientLoad() {
      gapi.load('client', initClient);
    }
    
    // Initialize the Google API client
    function initClient() {
      gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
        'scope': 'https://www.googleapis.com/auth/spreadsheets'
      }).then(function() {
        console.log('Google API client initialized');
 ...