Web ICP3 - abndnc/CS5590-0003 GitHub Wiki

1.Rock-Paper-Scissors(https://en.wikipedia.org/wiki/Rock–paper–scissors)

a.Build the game of rock paper scissors using JavaScript

b.A basic UI will be necessary

c.Hint: You can use a randomnumber generatorand conditional statementsto build the application(by comparing the numbers)

Implementation: I tried to use Grid Layout in Bootstrap so the content would look more organize. The content was placed in two rows inside a container. Each row had three columns indicating their own meaning.

The javascript decided how the page interacted. Based on what users click, a value will be assigned into userChoice variable and passed into play function. Also, a random value will be assigned and passed into computerChoice. Then, both variables are compared and a result is returned. Lastly, a new page is created and the result of the game is printed out.

  1. RWD Task a.Create a page that looks like the below mockup

b.Download the starter code from here

c.Follow the TO DO instructions in the 'input.html' file

d.Make the page responsive and check its responsiveness as the screen size increases or decreases

e.The font in the mockup looks different from what we have in the code now

f.Find the closest possible font to the one in the mockup and replace the existing font with it(Hint: Visit https://fonts.google.com/and look for "Play", "Rambla", "Lato", "Orbitron". One of them might be the font we need!)

g.Two colored squares and their respective hexadecimal numbers are given on the left side serve as only a reference for the colors used for the text content in the mockup

h.They are not a part of the final page that we build. Make the page as close as possible to the mockup. You can use your images, though.

Implementation: After getting all the necessary files and opening the html, I started with having Bootstrap imported inside the head tag so that the page would become responsive everytime I modify the size of the page. The font I decided to use was Lato. Inside the first row, my name (xs 1), picture and designation (xs 11)were included.

Then, a wall paper was filled out the next row (sm 12 px) with the words "Featured Work" underneath it in different row. Next was the images session with four responsive pictures placed in four column (sm 3 each). Lastly, the link session had the same format with the images' session, representing the four link of my Github repositories.

Responsive page