Rock Paper Scissors Using Javascript Logics

Hello guys, In this lockdown I've been doing different things to keep me sane. One of the project that I've done is Rock paper and scissors game. I have done this with the help of Javascript for logics, CSS for styles and HTML & Bootstrap for Website. We often play this game to decide who does the work first, or to decide who will go first and in other situations. So I was bored this afternoon and thought of creating this by thinking that my basics of javascript will also be covered. So let's get into this. 

First of all, create a folder in your system directory as Rock_paper_scissors. Inside this folder, create an index.html file. Also create a styles.css files and main.js file. 

Commands:

C:\Users\swarna krishnan k>cd "C:\Users\swarna krishnan k\OneDrive\Desktop"

C:\Users\swarna krishnan k\OneDrive\Desktop>mkdir Rock_paper_scissors

After doing this you will have a folder with name Rock_paper_scissors on your desktop.

Commands:
C:\Users\swarna krishnan k\OneDrive\Desktop\Rock_Paper_Scissors>type nul> index.html

C:\Users\swarna krishnan k\OneDrive\Desktop\Rock_Paper_Scissors>type nul> styles.css

C:\Users\swarna krishnan k\OneDrive\Desktop\Rock_Paper_Scissors>type nul> main.js




Create a folder inside the Rock_paper_scissors and name it as images. This folder will contain all the images required to create this website.

Command:
C:\Users\swarna krishnan k\OneDrive\Desktop\Rock_Paper_Scissors>mkdir images

Now, download the images of rock, paper and scissors hand images. Download these images into the Rock_paper_scissors\images folder. 

Image link for Rock symbol image: https://www.clipartkey.com/view/bbwJoi_transparent-rock-paper-scissors-clipart-rock-paper-scissors/ 

Image link for Paper symbol image: https://www.clipartkey.com/view/ohJTRb_rock-paper-scissors-png/ 

Image link for Scissors symbol image: https://www.clipartkey.com/view/ohJTwR_rock-paper-scissors-png/  

Now, open index.html file and do the necessary changes. 

Now, open styles.css file and write the following code.

This is the most important part of the code, now open the main.js file and addthe following code to it. Using this code we are giving the logic to the web page.

In this part of code, we first initiate the player score and the computer score to zero and then we create a piece of code which shows the option chose by the player.

This part of code compares the option selected by the player and the computer and decides the winner based on the choices.

This part of code describes the reset of score and scorecard of player and computer. To put all together in main.js, it looks something like this..

This is the final code.

Thank you guys, Keep yourself sane, healthy and always be happy..