Add a table of contents and wireframes/repsonsiveness images to the R…

…EADME file
Robrowno · Apr 13, 2022 · 4d3e6ce · 4d3e6ce
1 parent f7f20e6
commit 4d3e6ce
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -9,14 +9,40 @@ This game is designed to be played by someone who wants to play a game but doesn
 
 The goal of this website, beyond testing my Javascript abilities, is to make a well-tested and fully functioning basic game that combines functionality with clean design and colours. 
 
+[Live Link here](robrowno.github.io/rock-paper-scissors/)
+
 ---
 ## Website across different platforms
+![Responsiveness check](/assets/images/readme-images/responsiveness.png)
 
 ---
 ## Table of Contents
+1. [Wireframe](#wireframe)
+2. [UX Description](#ux-description)
+3. [Website Features](#website-features)
+4. [Features to implement](#other-features-to-implement)
+5. [Testing and Validation](#testing-and-validation)
+6. [Bugs and Issues](#bugs-and-issues)
+7. [Peer Reviews](#peer-reviews)
+8. [Deployment](#deployment)
+9. [Credits](#credits)
+10. [Final Thoughts](#final-thoughts-for-pp2)
+
 
 ---
 ## Wireframe
+I used Balsamiq to create my wireframes for this project. I took a mobile/tablet-first approach with this project, and as such, my wireframes reflect that. 
+
+I first went about creating a wireframe for how I wanted my starting page to look, and when I was happy, I moved on to the game page sections for tablet and mobil respectively. 
+
+### Starting Page
+
+![Start page wireframe](assets/images/readme-images/start-page-wireframe.png)
+
+
+### Game Page
+
+![Game page wireframe](assets/images/readme-images/game-wireframe.png)
 
 ---
 ## UX Description
@@ -57,6 +83,15 @@ Colours:
 - Favicons imported from: [Favicon.io](https://favicon.io/emoji-favicons/oncoming-fist)
 - Learned how to make colour gradient backgrounds on: [cssgradient.io](https://cssgradient.io/)
 - Image for Rock, Paper, Scissors rules came from here: [RPS Rules image](https://andygrunwald.com/blog/playing-rockpaperscissors-with-500-people/)
+- Responsiveness check from: [Am I Responsive?](http:https://ami.responsivedesign.is/)
+
+
+### Help from Peers and mentors
+
+- A massive thanks to Danilo D'Auria for his superb help in getting me through some hurdles on my JS journey!
+- Many thanks to Daisy McGirr, my mentor through this project, who gave me all the guidance and support required to steer me in the right direction.
+- The London C.I Coding Community group. Always supporting which me with my questions and giving great advice. 
+
 
 ---
 ## Final Thoughts for PP2 

diff --git a/assets/images/readme-images/game-wireframe.png b/assets/images/readme-images/game-wireframe.png
diff --git a/assets/images/readme-images/start-page-wireframe.png b/assets/images/readme-images/start-page-wireframe.png
diff --git a/index.html b/index.html
@@ -11,11 +11,12 @@
  <link rel="stylesheet" href="./assets/css/style.css">
  <title>Rock-Paper-Scissors</title>
  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon_io/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon_io/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon_io/favicon-16x16.png">
-<link rel="manifest" href="assets/images/favicon_io/site.webmanifest">
+ <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon_io/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon_io/favicon-16x16.png">
+ <link rel="manifest" href="assets/images/favicon_io/site.webmanifest">
 </head>
 <!-- Start Page that user first sees when website is opened-->
+
 <body>
  <div id="start-page">
  <h1 id="home-h">Rock Paper Scissors! </h1>
@@ -25,7 +26,8 @@ <h1 id="home-h">Rock Paper Scissors! </h1>
  <p class="home-p">In this game, you have 3 choices to choose from. Rock (fist emoji 🤜), Paper (Open palm emoji
  ✋) and Scissors (Peace sign emoji ✌️). <br>
  <p class="home-p">In short, Rock beats Scissors, Paper beats Rock and Scissors beats paper. A score will be
- tallied for you at the bottom of the screen, keeping track as you play against the computer. When either you or the computer reaches a score of 10, that round will be won and another round will begin!
+ tallied for you at the bottom of the screen, keeping track as you play against the computer. When either
+ you or the computer reaches a score of 10, that round will be won and another round will begin!
  </p>
  <img src="assets/images/rock-paper-scissors-game-rules.png"
  alt="Rules of Rock, Paper, Scissors - demonstrated with drawings of a clenched fist, open palm and peace sign.">
@@ -39,7 +41,7 @@ <h1 id="home-h">Rock Paper Scissors! </h1>
  </div>
  <!-- End of Start Page section -->
 
- <!-- <div id="modal" class="modal-outer">
+  <!-- <div id="modal" class="modal-outer">
  <div class="modal-inner">
  <span id="close-modal">x</span>
  <p id="modalpara"></p>