JSFiddle - React, Tailwind, and code Playground

by jnfsmile

CSS

* {
    background-color:black;
    color:white;
    text-align:center;
}

img {
    width:30%;
}

JavaScript

var name = prompt("Welcome! To begin, please tell me your name:");
    var gender = 0;
    var maleImage = 0;
    var femaleImage = 0;
    var genderPrompt = 0;
    document.genderChoice = function(genderImage) {
        if (genderImage === 1) {
            gender = "male";
        } else {
            gender = "female";
        }
        setTimeout(genderReset,250);

    }
    document.writeln("<h2>Hello " + name + "! Welcome to Design Your Own Story! " + 
                     "In this game, you pick how the story goes!</h2><h2 id='genderPrompt'>Let's begin. Click which gender you are.</h2>");

    document.writeln("<img id='maleImage' src='maleImage.jpg' alt='Male Image' onclick='genderChoice(1)' />");
    document.writeln("<img id='femaleImage' src='femaleImage.jpg' alt='Female Image' onclick='genderChoice(2)' />");



    function genderReset() {
        if (gender === "female") {  
            maleImage = document.getElementById("maleImage");
            maleImage.parentNode.removeChild(maleImage);
        }
        if (gender === "male") {
            femaleImage = document.getElementById("femaleImage");
            femaleImage.parentNode.removeChild(femaleImage);
        }
        genderPrompt = document.getElementById("genderPrompt");
        genderPrompt.parentNode.removeChild(genderPrompt);

        document.writeln("<h1 class='title'>Design Your Own Story</h1>");
        document.writeln("<h2>Ok, " + name + ", so you're " + gender + "! Let's start our journey...</h2>");
        setTimeout(leavesHome,1500);
    }