JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<div id="output"></div>
      
<div id="container">
    <input type="text" id="input" value="">
</div>

<!-- jquery for enter key press -->      
<script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: black;
}

h1, p {
	font-family: sans-serif;
	text-align: center;
	color: white;
	font-size:  60px;
}


p {
	font-size: 18px;
}

#output, #container {
    display: flex;
    justify-content: center;
    margin-top: 100px;
}


input {
    background-color: #eee;
    border: none;
    font-family: sans-serif;
    color: #000;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
}

JavaScript

var questionNum = 0;													// keep count of question, used for IF condition.
var question ='<h1>what is your name?</h1>';				  // first question

var output = document.getElementById('output');				// store id="output" in output variable
output.innerHTML = question;													// ouput first question

function bot() { 
    var input = document.getElementById("input").value;
    console.log(input);

    if (questionNum == 0) {
    output.innerHTML ='<h1>hello ' + input +'</h1>';// output response
    document.getElementById("input").value = "";   		// clear text box
    question ='<h1>how old are you?</h1>';			    	// load next question		
    setTimeout(timedQuestion, 2000);									// output next question after 2sec delay
    }

    else if (questionNum == 1) {
    output.innerHTML ='<h1>That means you were born in ' + (2018 - input) +'</h1>';
    document.getElementById("input").value = "";   
    question ='<h1>where are you from?</h1>';					      	
    setTimeout(timedQuestion, 2000);
    }  

    else if (questionNum == 2) {
	var statesUS = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming']
    var citiesUS = ['New York' ,'Los Angeles' ,'Chicago' ,'Houston' ,'Phoenix' ,'Philadelphia' ,'San Antonio' ,'San Diego' ,'Dallas' ,'San Jose' ,'Detroit' ,'Jacksonville' ,'Indianapolis' ,'San Francisco' ,'Columbus' ,'Austin' ,'Memphis' ,'Fort Worth' ,'Baltimore' ,'Charlotte' ,'El Paso' ,'Boston' ,'Seattle' ,'Washington'...