From 075ff110de3d4633eec98928f1031509b02ab8c1 Mon Sep 17 00:00:00 2001 From: rbozek Date: Thu, 4 Jan 2024 19:10:58 -0500 Subject: [PATCH] clean up more html & css, add meditate image --- css/style.css | 14 +++++++++++++- index.html | 12 ++++++------ js/app.js | 11 +++++------ js/pseudocode.js | 16 ++++++++++++---- 4 files changed, 36 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index cdbc9dc..5f45953 100644 --- 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 index 59b5ab0..8baf431 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,14 @@ -

Quiz - Be a Better Human!

-

Get through life without looking dumb (or dying)

+

Quiz - Be a Better Human!

+

Get through life without looking dumb (or dying)

+
-
-
-
"RULES GO HERE"
+
+
+
"RULES GO HERE"
Choose category to begin!
@@ -37,7 +38,6 @@

Get through life without looking dumb (or dying)<

- diff --git a/js/app.js b/js/app.js index 0d88bb9..f0f784e 100644 --- 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 index 9c6a561..1c77c1c 100644 --- 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!