JSFiddle - React, Tailwind, and code Playground

by Emurtzle

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Example Three.js Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
        <label>First Name</label>
        <input type="text" placeholder="Enter your first name here...", id="textbox-fname">

        <label>Last Name</label>
        <input type="text" placeholder="Enter your last name here...", id="textbox-lname">
       
        <label>Name Material</label>
        <select id="name-material-select">
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
                <option value="Polka Dots">Polka Dots</option>
        </select>

        <label>Name Animation</label>
        <select id="name-animation-select">
                <option value="Stay Still">Stay Still</option>
                <option value="Spin">Spin</option>
                <option value="Grow and Shrink">Grow and Shrink</option>
                <option value="Rotate">Rotate</option>
        </select>

        <br>

        <label>Slogan</label>
        <input type="text" placeholder="Enter your slogan here...", id="textbox-slogan">

        <label>Slogan Material</label>
        <select id="slogan-material-select">
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
                <option value="Polka Dots">Polka Dots</option>
        </select>

        <label>Slogan Animation</label>
        <select id="slogan-animation-select">
                <option value="Stay Still">Stay Still</option>
                <option value="Spin">Spin</option>
                <option value="Grow and Shrink">Grow and Shrink</option>
                <option...

JavaScript

//##################################################################################
//  Grab the first name textbox, last name textbox, name material drop down, and name animation drop down
const fNameTextbox = document.getElementById("textbox-fname");
const lNameTextbox = document.getElementById("textbox-lname");
const nameMaterialSelect = document.getElementById("name-material-select");
const nameAnimationSelect = document.getElementById("name-animation-select");

//  Grab the slogan textbox, slogan material drop down, and slogan animation drop down
const sloganTextbox = document.getElementById("textbox-slogan");
const sloganMaterialSelect = document.getElementById("slogan-material-select");
const sloganAnimationSelect = document.getElementById("slogan-animation-select");

//  Grab the background dropdown
const backgroundSelect = document.getElementById("background-select");

//  Grab the render button
const renderButton = document.getElementById("render-btn");

//  Grab the document body
const body = document.body;

//##################################################################################
//  Adds an event listener to the render button, that when clicked, will grab the values from all the text boxes and drop down menus and send them to the initializer function for the 3d scene. 
renderButton.addEventListener("click", (ev) => {
    //##################################################################################
    //  Grab the values from the first name textbox, the last name textbox, and the name material drop down
    let fName = fNameTextbox.value;
    let lName = lNameTextbox.value;
    let nameMat = nameMaterialSelect.value;
    let nameAnim = nameAnimationSelect.value;

    //  Grab the values of the slogan textbox and the slogan material drop down
    let slogan = sloganTextbox.value;
    let sloganMat = sloganMaterialSelect.value;
    let sloganAnim = sloganAnimationSelect.value;

    //  Grab the value of the background drop down 
   ...