JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<h1>282-Harmony</h1>
<h2>Sign up with 282-Harmony to find your soulmate!</h2>

<form action="signup-submit.php" method="post" enctype="multipart/form-data">

    <div id="form">

        <div>Name: <br/><input id = "name" type="text" value = "" name="name"/> </div>
        <div>E-mail Address:<br/><input id = "email" type="text" value="" name="email"/></div>
        <div>Gender: <input type="radio" id="male" name="gender" value="male" checked="" /> <label id="female_label">Female</label>
            <input type="radio" name="gender" id="female" value="female" /><label id="male_label">Male</label> </div>
        <div>Seeking:<br/><select option="seeking" name="seeking">
            <option>Male</option>
            <option>Female</option>
            <option>Both</option>
        </select></div>

    </div>


    <div>Upload a photo if you wish:<br/>
    <input type="file" name="picture" id="picture"></div>


    <div><input type="reset" id="reset"/> <input type="submit" value="Sign Up"/></div>
    </div>
</form>

CSS

body {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}
div {
    margin-top:1em;
}

JavaScript

function genderChanged() {
    var woman = document.getElementById("female");
    var man = document.getElementById("male");
    var mlabel = document.getElementById("male_label");
    var flabel = document.getElementById("female_label");
    mlabel.style.color = '#444444';
    flabel.style.color = '#444444';
    if (woman.checked) {                
        mlabel.style.color = "#04356C";        
    } else {                        
        flabel.style.color = "#E869AA";
    }
}

function resetColors() {
    var woman = document.getElementById("male");
    var man = document.getElementById("female");
    var mlabel = document.getElementById("male_label");
    var flabel = document.getElementById("female_label");
    mlabel.style.color = '#444444';
    flabel.style.color = '#444444';
}


function events() {
    document.getElementById("female").onclick = genderChanged;
    document.getElementById("male").onclick = genderChanged;
    document.getElementById("reset").onclick = resetColors;
    genderChanged()
}

window.onload = events;