My Class Website Rock Paper Scissors

   

DIRECTIONS: Follow along with this guide to learn more about web design. You will be learning  to author content for the web using HTML, CSS, and JavaScript; afterwards, you will publish your  nished product to your class website. Remember, never include personally identi able  information in your web projects, e.g., full name, address, mother’s maiden name, cell number, etc. 

  Table of Contents  Getting Started  Creating the Page  Publishing the Page 

Getting Started   

Step 

Detailed Instructions 

❏

  Launch Brackets 

■ On Windows:  ○ Start > All Programs > Brackets (or use Desktop Icon)  ■ On Mac:  ○ Finder > Applications > Brackets 

❏

  Open "My Class  Website" Project 

■ FILE > Open Folder...  ■ Navigate to and open "my-class-website" folder  

   

 

James Colestock 

My Class Website - Rock, Paper, Scissors

Page 1 of 5 

Creating the Page   

Step  ❏

  Create New Page 

Detailed Instructions  ■ Right/Ctrl-Click "New File" or FILE > New   ■ Right/Ctrl-Click "Rename" to rps.html 

❏

  Apply Boilerplate 

■ Type the Basic HTML5 Boilerplate in the code editor:  http://static.colestock.com/Basic_HTML5_Boilerplate.pdf  

❏

  Launch Live  Preview 

■ To see the web page as you build it, launch Live Preview:  http://static.colestock.com/Brackets_Live_Preview.pdf 

❏

  Title Page 

■ Update contents of element to:   Rock, Paper, Scissors 

❏

  Add Google Font  to Page 

■ Add a element inside the to include the  "Raleway" Google Font in your page: 

○ For hrefattribute, use https://fonts.googleapis.com/css?family=Raleway  ○ For relattribute, use stylesheet  ○ For typeattribute, use text/css   

❏

  Add Embedded  Style to Page 

■ Inside the , include the following embedded style: 

<style>    * {  font-family: 'Raleway';  margin: 0;  padding: 0;  font-size: 20px;  line-height: 2;  }    body {  background-color: #2b2b2b;  }    #game {  margin: 0 auto; 

James Colestock 

My Class Website - Rock, Paper, Scissors

Page 2 of 5 

text-align: center;  max-width: 400px;  }   

 

 

#play-game {  width: 200px;  height: 75px;  }    #player, #computer {  color: white;  font-weight: bold;  }    #result {  color: red;  } 

   

❏

  Add jQuery to Page  ■ In the , include the following: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">   

❏

  Add JavaScript   for Game 

■ In the , after the closing jQuery tag,  include the following: 

<script>  $(document).ready(function() {  $("#play-game").click(function() {  var choices = ["rock", "paper", "scissors"];  var player = prompt("Choose rock, paper, or scissors");  var computer = choices[Math.floor(Math.random() * 3)];  var result;  if (player === computer) {  result = "Tie. Play again!";  } else if (player === "rock" && computer === "scissors") {  result = "You win!";  } else if (player === "paper" && computer === "rock") {  result = "You win!";  } else if (player === "scissors" && computer === "paper") {  result = "You win!";  } else {  result = "Computer wins! You lose!";  }  $("#player").text("You chose: " + player); 

James Colestock 

My Class Website - Rock, Paper, Scissors

Page 3 of 5 

$("#computer").text("The computer chose: " + computer);  $("#result").text(result);  });  });   

❏

  Create Game  Container 

■ Add a with the idof gameto the   (place all content within this container):   

❏

  Create Rock,  Paper, Scissors  Image 

■ Add an element (image) inside the gamefor  the Rock, Paper, Scissors logo: 

○ For srcattribute, use http://static.colestock.com/images/rock-paper-scissors.jpg  ○ For widthattribute, use 300  ○ For altattribute, use Rock, Paper, Scissors   

❏

■ After the Rock, Paper, Scissors element, add "Play  Game" button: 

  Add Play   Game Button 

Play Game 

❏

❏

  Create Additional  Game Containers 

■ Under the element, add the following containers: 

  Style Button and  Result Text 

■ Add the following style directives to #play-game: 

      border-radius: 10px;  margin: 0 auto 10px;  font-weight: bold;  font-size: 30px;   

■ Add the following style directives to #result:  font-weight: bold;  font-size: 32px; 

❏

  Review Your Work 

■ Your page should have: a Rock, Paper, Scissors logo; a "Play  Game" button; and result text that shows you who won the  round:   

James Colestock 

My Class Website - Rock, Paper, Scissors

Page 4 of 5 

   

  ❏

  Save Page 

■ Ctrl+S/⌘ S or FILE > Save  

Publishing the Page   

Step  ❏

  Publish Page to  Class Website 

Detailed Instructions  ■ Use FileZilla to FTP rps.html to your class website:  http://static.colestock.com/FileZilla_Publishing.pdf 

 

James Colestock 

My Class Website - Rock, Paper, Scissors

Page 5 of 5