clean up more html & css, add meditate image

rbozek · Jan 5, 2024 · 075ff11 · 075ff11
1 parent e598f50
commit 075ff11
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/css/style.css b/css/style.css
@@ -15,12 +15,24 @@ body {
   border-radius: 10px;
 }
 
-div#intro-div {
+h1, h2 {
+  background-color:  rgba(53, 53, 53, 0.75);
+  margin: 0px;
+  padding: 10px;
+  border-radius: 10px;
+  max-width:}
+
+#meditate-pic {
+  width:400px;
+}
+
+div#rules-div {
   background-color: rgb(187, 187, 187);
 }
 
 div#question-container {
   background-color: rgb(255, 146, 146);
+  max-width: 450px;
 }
 
 p#question-p{

diff --git a/index.html b/index.html
@@ -11,13 +11,14 @@
 </head>
 
 <body>
-  <h1 class="generic-background">Quiz - Be a Better Human!</h1>
-  <h2 class="generic-background">Get through life without looking dumb (or dying)</h2>
+  <h1>Quiz - Be a Better Human!</h1>
+  <h2>Get through life without looking dumb (or dying)</h2>
 
+  <div id="meditate-div"><img src="../assets/images/meditate.png" id="meditate-pic"></div>
 
-  <div class="generic-background">
-    <div id="rules-btn-container">
-      <div id="intro-div">"RULES GO HERE"<br>
+  <div class="generic-background" id="game-container">
+    <div id="rules-btns-container">
+      <div id="rules-div">"RULES GO HERE"<br>
       Choose category to begin!</div>
       <div id="buttons-container">
         <button class="button" id="btn-category-1">Category 1</button>
@@ -37,7 +38,6 @@ <h2 class="generic-background">Get through life without looking dumb (or dying)<
     <button id="btn-reset">Reset Game</button>
   </div>
 
-
 </body>
 </html>
 
diff --git a/js/app.js b/js/app.js
@@ -21,7 +21,7 @@ const btnCategory3 = document.getElementById("btn-category-3")
 const question = document.getElementById("question-p")
 const answers = document.getElementById("answers-ul")
 const btnReset = document.getElementById("btn-reset")
-const rulesBtnDiv = document.getElementById("rules-btn-container")
+const rulesBtnsDiv = document.getElementById("rules-btns-container")
 const btnContainer = document.getElementById("buttons-container") // for playClick audio purposes only
 const playerScoreContainer = document.getElementById("player-score")
 let initialScoreState = playerScoreContainer.innerHTML = `score`
@@ -62,7 +62,7 @@ function stopTimer() {
 }
 
 function renderQuestionCat1() {
-  rulesBtnDiv.style.display = 'none'
+  rulesBtnsDiv.style.display = 'none'
   currentCategory = 1 // to fix problem at end of playerChooseAnswer
   let singleQuestion = questionsCat1[currentQuesIdx]    //HOLDS ONE SPECIFIC QUESTION:
   question.textContent = `${singleQuestion.quesQ}`
@@ -79,7 +79,7 @@ function renderQuestionCat1() {
   })
 }
 function renderQuestionCat2() {
-  rulesBtnDiv.style.display = 'none'
+  rulesBtnsDiv.style.display = 'none'
   currentCategory = 2
   let singleQuestion = questionsCat2[currentQuesIdx] 
   question.textContent = `${singleQuestion.quesQ}`
@@ -95,7 +95,7 @@ function renderQuestionCat2() {
   })
 }
 function renderQuestionCat3() {
-  rulesBtnDiv.style.display = 'none'
+  rulesBtnsDiv.style.display = 'none'
   currentCategory = 3
   let singleQuestion = questionsCat3[currentQuesIdx]
   question.textContent = `${singleQuestion.quesQ}`
@@ -173,11 +173,10 @@ function roundOver(){
 }
 
 
-
 function resetGame(){
   gameAudio.stopAudio()
   gameAudio.playClick()
-  rulesBtnDiv.style.display = ''
+  rulesBtnsDiv.style.display = ''
   playerScoreContainer.innerHTML = initialScoreState;
   countdown.textContent = ``
   question.textContent = '' // this line isnt needed?

diff --git a/js/pseudocode.js b/js/pseudocode.js
@@ -31,14 +31,22 @@
 // // -Check playerScore!! might be a little wonky
 
 // // timer for entire category, not each question
-// ** sounds: sound for button clicks, add sound for playerScore, and diff sound for perfect score  ->  button to turn off sounds??
+// // ** sounds: sound for button clicks, add sound for playerScore, and diff sound for perfect score  ->  button to turn off sounds??
+
+// fonts! (quick)
 // ** images: favicon to page DONE, monk image for top of page before game starts
-// color scheme: warm colors
+    // Put rules & category buttons on top of meditate image
+    // flexbox layout adjust!
+    // have score, timer, and reset game buttons appear once game starts
+
+// README!
+
+
 
 // IF I HAVE TIME
 // clearing Q's and A's - diditn mess with it for fear of breaking it - but see if i can display.none instead of innerHTML (but might make a mess with reest? idk)
-// seaprate "rules" & "buttons" - when user starts, everything disappears, but after a reset, only buttons re-appear
-// perfect score make more exciting - if player perfect score, hidden image or page
+// // seaprate "rules" & "buttons" - when user starts, everything disappears, but after a reset, only buttons re-appear
+// perfect score make more exciting - if player perfect score, hidden image or page!