JSFiddle - React, Tailwind, and code Playground

by dvjc

HTML

<div id="divDirections">
  Please select one:
</div>

<div id="divOptions">
    <img src='http://vector-magz.com/wp-content/uploads/2013/08/rock-clipart1.png' onclick="chooseRock()"></img>
  <img src="http://bestclipartblog.com/clipart-pics/paper-clip-art-5.gif"  onclick="choosePaper()"></img>
  <img src="http://upload.wikimedia.org/wikipedia/commons/3/3e/Scissor-for-paper.jpg" onclick="chooseScissors()" ></img>
</div>

<div id="divResults">
    <br />
    <span>Computer Chose:</span>
    <span id="computerResult"></span>
    <span id="userResult"></span>
</div>

CSS

img {
    height: 100px;
    width: 100px;
}

#divResults {
    display: none;
}

JavaScript

var imgRock = "<img src='http://vector-magz.com/wp-content/uploads/2013/08/rock-clipart1.png' ></img>";
var imgPaper = "<img src='http://bestclipartblog.com/clipart-pics/paper-clip-art-5.gif' ></img>";
var imgScissors = "<img src='http://upload.wikimedia.org/wikipedia/commons/3/3e/Scissor-for-paper.jpg' ></img>";

function computerChoice(){
    var choice = Math.floor(Math.random()*3);
    return choice;
}

function choiceToObject(id){
    var desc = (id === 0 ? "rock" : (c == 1 ? "scissors" : "paper"));
    return desc;
}

function assertResult(u, c){
    // 0 == rock; 1 == scissors; 2 == paper;
    var delta = u-c;
    var result = (delta===0 ? "tie!" : ((delta==1 | delta==-2) ? "lose!" : "win!"));
    return result;
}

function updateUI(u, c){
    var resultDiv = document.getElementById("divResults");
    var compReslt = document.getElementById("computerResult");
    var userReslt = document.getElementById("userResult");
    
    resultDiv.style.display = "block";
    compReslt.innerHTML = "<img src='http://upload.wikimedia.org/wikipedia/commons/3/3e/Scissor-for-paper.jpg' ></img>";
    userReslt.innerHTML = "<img src='http://bestclipartblog.com/clipart-pics/paper-clip-art-5.gif' ></img>";
    
    
}

function chooseRock(){
    var u = 0;
    var c = computerChoice();    
    var result = assertResult(u,c);
    alert(result);
    updateUI(1,2);
}
function choosePaper(){
    var u = 2;
    var c = computerChoice();    
    var result = assertResult(u,c);
    alert(result);
}
function chooseScissors(){
    var u = 1;
    var c = computerChoice();    
    var result = assertResult(u,c);
    alert(result);
}