JSFiddle - React, Tailwind, and code Playground

by yotamoo

HTML

<script src="http://www.freeimagehosting.net/newuploads/i2pls.png"></script>
<script src="http://www.freeimagehosting.net/newuploads/jr1f4.png"></script>
<script src="http://www.freeimagehosting.net/newuploads/omqzf.png"></script>
<script src="http://www.freeimagehosting.net/newuploads/68lo8.png"></script>
<script src="http://www.freeimagehosting.net/newuploads/kc61m.png"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rock-paper-scissers</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<img src="http://www.freeimagehosting.net/newuploads/i2pls.png">
<div class="InnerLeft">
<img src="http://www.freeimagehosting.net/newuploads/jr1f4.png"><br>
<select id="p1" onchange="change('p1','rpsleft')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="http://www.freeimagehosting.net/newuploads/68lo8.png" id="rpsleft"></p>
</div>
<div class="InnerRight">
<img src="http://www.freeimagehosting.net/newuploads/omqzf.png"><br>
<select id="p2" onchange="change('p2','rpsright')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="http://www.freeimagehosting.net/newuploads/kc61m.png" id="rpsright"></p>
</div>
<div id="footer">
<img src="http://www.freeimagehosting.net/t/sbcoa.jpg" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)"
onMouseOver="document.getElementById('andale').src='andale2.png'"
onMouseOut="document.getElementById('andale').src='andale.png'">
</div>
</div>
</body>

CSS

body{
    width: 100%;
    height: 100%;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c));
    background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c); 
    background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c);
    background-repeat: no-repeat;
}
div#container {
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
div.InnerLeft {
    width: 50%;
    position: relative;
    float: left;
}
div.InnerRight {
    width: 50%;
    position: relative;
    float: right;
}
select {
    background: transparent;
    margin-top: 15px;
    width: 220px;
    font-size: 16px;
    -webkit-appearance: none;
    border: 0px;
    height: 34px;
}

JavaScript

// JavaScript Document
function rps(p1,p2) {
    if (p1 == 0 && p2 == 0) {
        alert("At least one player must play");
        return;
    }
    if (p1 == 0) {
        p1 = Math.floor(Math.random()*4) + 1;
        document.getElementById('p1').value = p1;
    }
    
    if (p2 == 0) {
        p2 = Math.floor(Math.random()*4) + 1;
        document.getElementById('p2').value = p2;
    }
    
    if (p1 == p2) {
        alert("It's a tie!");
        reset();
        return;
    }
    
    var sum = parseInt(p1) + parseInt(p2);
    var winner;
    switch(sum) {
        case 3:
            (p1 == 2) ? winner = '1' : winner = '2';
            break;
        case 4:
            (p1 == 1) ? winner = '1' : winner = '2';
            break;
        case 5:
            (p1 == 3) ? winner = '1' : winner = '2';
            break;                        
    }
    alert(winner + " is the winner");
    reset();
    return;
}

function reset() {
    document.getElementById('p1').value = 0;
    document.getElementById('p2').value = 0;
}