JSFiddle - React, Tailwind, and code Playground
HTML
<h1>
HELLO. GOODBYE.
</h1>
<ul>
<li>The button randomly shows. You have one option.</li>
<li>If the greeting is mutual, no one wins.</li>
<li>If you say hello and they say goodbye, you get a point.</li>
<li>If you say goodbye and they say hello. Computer gets a point.</li>
</ul>
<table>
<tr>
<td id="user-score">User: 0</td>
<td id="computer-score">Computer: 0</td>
</tr>
</table>
<div class="container">
</div>
CSS
.control{
text-align: center;
width: 100px;
background-color: lightblue;
color: white;
padding: 20px;
text-transform: uppercase;
font-family: sans-serif;
border-radius: 15px;
position: absolute;
left: 50%;
margin-left: -70px;
cursor: pointer;
}
.control:hover{
opacity: .7;
}
.container{
height: 100px;
position: relative;
}
table{
width: 100%;
}
td{
text-align: center;
width: 50%;
}
JavaScript
var helloGoodbye = ['hello', 'goodbye'];
var userScore = 0;
var computerScore = 0;
var buttons = ['<a class=\"control\" data-value=\"hello\">Hello.</a>','<a class=\"control\" data-value=\"goodbye\">Goodbye.</a>'];
function randomButton(){
var randButton = buttons[Math.floor(Math.random() * buttons.length)];
$('.container').html(randButton);
}
function theGame(){
$(document).on('click','.control', function(){
var randomString = helloGoodbye[Math.floor(Math.random() * helloGoodbye.length)];
var choice = $(this).data('value');
if (choice == 'hello' && randomString == 'hello'){
alert('A mutual \'hello\'. No points awarded.');
} else if (choice == 'goodbye' && randomString == 'goodbye'){
alert('A mutual \'goodbye\'. No points awarded.');
} else if (choice == 'hello' && randomString == 'goodbye'){
alert('You said hello, they say goodbye. Have a point.');
userScore++;
$('#user-score').html('User: '+userScore);
} else if (choice == 'goodbye' && randomString == 'hello'){
alert('NO BEATLES. Computer point');
computerScore++;
$('#computer-score').html('Computer: '+computerScore);
}
randomButton();
});
}
theGame();
randomButton();