Add a div for a modal in html and style accordingly for later js impl…

…ementation.

assets/css/style.css

@@ -107,7 +107,7 @@ h1 {
  cursor: pointer;
 }
 
-/* Player/Computer display bar */
+/*-- Player/Computer display bar --*/
 .player {
  background: lightgreen;
  border: 3px solid black;
@@ -122,30 +122,37 @@ h1 {
  padding-top: 3%;
 }
 
-/*-- Timer box styling --*/
-#timer, #rounds {
- background: #fff;
- border: 3px solid black;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- font-size: 20px;
- margin: 0 auto;
- height: 35px;
- width: 70px
+
+/*-- Modal Styling --*/
+.model-outer {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ height: 80%;
+ width: 80%;
+ background-color: aquamarine;
 }
 
-#rounds-label {
+.model-inner {
+ background: #fff;
  margin: 0 auto;
- font-size: 18px;
- display: flex;
- justify-content: center;
- align-items: center;
+ padding: 2%;
+
 }
 
+.close-modal {
+ float: right;
+ font-size: 20px;
+ color: black;
 
-/* 'Arena styling */
+}
+.close-modal:hover {
+ cursor: pointer;
+ text-decoration: none;
+}
+/*-- End of Modal styling --*/
+
+/*-- 'Arena styling --*/
 .arena-block {
  background-color: lightgreen;
  border: 3px solid black;
@@ -197,6 +204,29 @@ h1 {
 
 }
 
+/*-- Rounds box styling --*/
+#rounds {
+ background: #fff;
+ border: 3px solid black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ font-size: 20px;
+ margin: 0 auto;
+ height: 35px;
+ width: 70px
+}
+
+#rounds-label {
+ margin: 0 auto;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
 /*-- Green Reset button (div) --*/
 #reset {
  width: 110px;

assets/javascript/style.js

@@ -130,13 +130,23 @@ function checkRound() {
  document.getElementById('u-rounds').innerHTML = parseInt(userRound)+1
  document.getElementById('u-score').innerHTML = 0
  document.getElementById('c-score').innerHTML = 0
+ /* let modal = document.getElementById('modal')
+ let modalPara = document.getElementById('modalpara')
+ modal.style.display = 'block'
+ modal.classList.add('modal-outer')
+ modalPara.innerText = 'You won the round! Keep playing to see if you can win another!' */
+
 
-
  } if (compPoint >= 10) {
  compRound = document.getElementById('c-rounds').innerHTML
  document.getElementById('c-rounds').innerHTML = parseInt(compRound)+1
  document.getElementById('u-score').innerHTML = 0
  document.getElementById('c-score').innerHTML = 0
+ /* let modal = document.getElementById('modal')
+ let modalPara = document.getElementById('modalpara')
+ modal.style.display = 'block'
+ modal.classList.add('modal-outer')
+ modalPara.innerText = 'Hard luck! The computer won this time. Play another round to see if you can beat the computer this time!' */
 
 
  } 

index.html

@@ -37,6 +37,13 @@ <h1 id="home-h">Rock Paper Scissors! </h1>
  <div id="start-game">Start!</div>
  </div>
 
+ <!-- <div id="modal" class="modal-outer">
+ <div class="modal-inner">
+ <span id="close-modal">x</span>
+ <p id="modalpara"></p>
+ </div>
+ </div> -->
+
  <main id="main">
  <h1>Rock Paper Scissors!</h1>
  <div class="content-block">