YOUR SCORE : 0
+COMPUTER SCORE : 0
+ + + + + + + + + + diff --git a/rock-paper-scissor-game/index.js b/rock-paper-scissor-game/index.js new file mode 100644 index 0000000..650f1fe --- /dev/null +++ b/rock-paper-scissor-game/index.js @@ -0,0 +1,33 @@ +var comp_score = 0; +var user_score = 0; + + +function check(str) { + var vals = ['rock', 'paper', 'scissor']; + var index = Math.floor((Math.random() * 3)); + var comp_res = vals[index]; + + if (str == comp_res) { + document.getElementById('result').innerHTML="Draw!"; + } + else if(str == 'rock' && comp_res == 'scissor') { + document.getElementById('result').innerHTML='You Won'; + user_score += 1; + document.getElementById('user_score_display').innerHTML=user_score; + } + else if(str == 'paper' && comp_res == 'rock') { + document.getElementById('result').innerHTML='You Won'; + user_score += 1; + document.getElementById('user_score_display').innerHTML=user_score; + } + else if(str == 'scissor' && comp_res == 'paper') { + document.getElementById('result').innerHTML="You Won"; + user_score += 1; + document.getElementById('user_score_display').innerHTML=user_score; + } + else { + document.getElementById('result').innerHTML='You Lose'; + comp_score += 1; + document.getElementById('comp_score_display').innerHTML=comp_score; + } +} diff --git a/rock-paper-scissor-game/styles.css b/rock-paper-scissor-game/styles.css new file mode 100644 index 0000000..687ed94 --- /dev/null +++ b/rock-paper-scissor-game/styles.css @@ -0,0 +1,47 @@ +body { + text-align: center; + font-family: 'Courier New', Courier, monospace; +} + +h1 { + font-size: 4rem; +} + +button { + height: 10rem; + width: 10rem; + border-radius: 2rem; + overflow: visible; + margin: 2rem; + padding: 2rem; + background-color:antiquewhite; +} + +img { + max-width: 100%; + max-height: 100%; +} + + +/* styles of ids */ +#user_score { + display: inline-block ; + font-size: 2.5rem; + margin: 4rem 1rem 4rem 2rem; +} + +#comp_score { + display: inline-block; + font-size: 2.5rem; + margin: 4rem 1rem 4rem 4rem; +} + +#result { + font-size: 1.5rem; +} + + +/* hovering effect */ +button:hover { + background-color:burlywood; +} \ No newline at end of file