From 88dcfba5653185badea21b0b89f0f1b14ba159b0 Mon Sep 17 00:00:00 2001 From: rbozek Date: Fri, 5 Jan 2024 01:05:05 -0500 Subject: [PATCH] more CSS tweaks, button hovers, readme update test --- js/pseudocode.js => .gitignore.js | 175 +++++++++++++++++++++++++++++- README.md | 2 + css/style.css | 11 +- js/DeadStorage.js | 169 ----------------------------- 4 files changed, 183 insertions(+), 174 deletions(-) rename js/pseudocode.js => .gitignore.js (54%) delete mode 100644 js/DeadStorage.js diff --git a/js/pseudocode.js b/.gitignore.js similarity index 54% rename from js/pseudocode.js rename to .gitignore.js index 14be0d7..438a8cd 100644 --- a/js/pseudocode.js +++ b/.gitignore.js @@ -40,8 +40,8 @@ // // README! can use "badges" for technology used & credits (inside Course SUpplements > GitHub Beautifuication (2nd link has nicer looking ones) // .gitignore or .env for dead code! -FIX THT LITTLE BLACK BOX ISUE!! SO CLOSE!! -min-width on big container for short questions +// FIX THT LITTLE BLACK BOX ISUE!! SO CLOSE!! +// min-width on big container for short questions CIRCLE BACK IF IM MENTALLY ABLE TO: -button styles & hover @@ -102,3 +102,174 @@ CIRCLE BACK IF IM MENTALLY ABLE TO: // 7) Create Reset functionality // -reset button to HTML (also as cached element, & event listener) + + +// let startTimer = setInterval(function() { +// countdown.textContent = timeLeft + ' seconds remaining.' +// timeLeft -= 1 +// if (timeLeft < 0) { +// countdownEl.textContent = 'Finished!' +// confetti.start(500) +// } +// }, 1000) + + + +let currQuestionIdx=0 -> this would icnrement up as we go thru next questions +could also do for let score = 0 -> same idea, to keep adding to score +render question method would put questions into (renderedQuestion) + +//array of objects +BENS ORIG IDEA - SWITCHING BACK TO THIS +const questionsCat1 = [ + { + quesQs: "What do you do etc etc?", + quesAs: [ + { answer: 'be rude', correctAnswer: false }, + { answer: 'be nice', correctAnswer: true }, + { answer: 'be crude', correctAnswer: false }, + { answer: 'be tude', correctAnswer: false }, + ] + }, + { + quesQs: "QUestion 2, what's good to do??", + quesAs: [ + { answer: 'help people', correctAnswer: true }, + { answer: 'hurt people', correctAnswer: false }, + { answer: 'kill people', correctAnswer: false }, + { answer: 'steal someones car', correctAnswer: false }, + ] + }, + { + quesQs: "#3, who's a good person to have around?", + quesAs: [ + { answer: 'bad friend', correctAnswer: false }, + { answer: 'no friend', correctAnswer: false }, + { answer: 'donut stealer', correctAnswer: false }, + { answer: 'Good friend', correctAnswer: true }, + ] + }, +] + + + + +2nd method, cleaner but will make more problems later +const questionsCat1 = [ + { + quesQs: "What do you do etc etc?", + correctAnswerIdx: 1, + quesAs: [ + { answer1: 'be rude' }, + { answer2: 'be nice' }, + { answer3: 'be crude' }, + { answer4: 'be tude' }, + ] + }, + { + quesQs: "Question #2?", + correctAnswerIdx: 0, + quesAs: [ + { answer1: 'help people' }, + { answer2: 'hurt people' }, + { answer3: 'kill people' }, + { answer4: 'steal someones car' }, + ] + }, + { + quesQs: "Question #3?", + correctAnswerIdx: 3, + quesAs: [ + { answer1: 'bad friend' }, + { answer2: 'no friend' }, + { answer3: 'donut stealer' }, + { answer4: 'Good friend' }, + ] + }, +] + + + + + +MY ORIG WAY: +{ + quesQs: "What do you do etc etc?", + quesAs: { + A: "A - be rude", + B: "B - be nice", + C: "C - be crude", + D: "D - be tude" + }, + correctAnswer: "B" +}, + { + question: "Question #2?", + answers: { + A: "help people", + B: "hurt people", + C: "kill people", + D: "steal someones car" + }, + correctAnswer: "A" + }, + { + question: "Question #3?", + answers: { + A: "bad friend", + B: "no friend", + C: "donut stealer", + D: "Good friend" + }, + correctAnswer: "D" + }, +] + + +from 1/3 @ 1:40 PM - saving in case i need to go back to anyting - from when i was adding click by adding LI id's +/*--------- Event Listeners ---------*/ +btnCategory1.addEventListener('click', renderQuestionCat1) +// eachAnswer.addEventListener('click', playerChooseAnswer) + +// tried for loop, when I was adding CLASS to li's instead of ids +// for (let idx = 0; idx < eachAnswer.length; idx++) { +// eachAnswer[idx].addEventListener('click', function() { +// console.log('eachAnswer ' + (idx) + ' clicked!'); +// }); +// } + + +/*------------ Functions ------------*/ +function renderQuestionCat1() { + //create variable to hold just one specific question (indicated by currentQuesIdx) + const singleQuestion = questionsCat1[currentQuesIdx] + //then use that new variable to access the question & print it + question.textContent = `${singleQuestion.quesQs}` + + //create variable to hold all answers to given question - now this holds an array of objects + const answersToSingleQuestion = singleQuestion.quesAs + // console.log(answersToSingleQuestion); + + //loop through quesA's array, for each create LI & add text to LI & append LI to parent + answersToSingleQuestion.forEach((eachA) => { + let renderedAnswer = document.createElement('li') + + // initial attempty + // add class to each li: + // renderedAnswer.setAttribute('class', 'answer-li'); + // OR id to each li + // renderedAnswer.setAttribute('id', 'answer-li'); + + renderedAnswer.textContent = `${eachA.answer}` + answers.appendChild(renderedAnswer) + // console.log(renderedAnswer); + }) + + //loop to update GLOBAL currentQuesIdx - Ben recs: want to increment the currentQuesIdx only after a player has made a guess, not all at once like this + // for (let i = 0; i < questionsCat1.length; i++){ + // currentQuesIdx += 1 + // console.log(currentQuesIdx); + } + + + diff --git a/README.md b/README.md index 3dbbd65..dabf357 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # BE A GREAT HUMAN - THE QUIZ ## “Get through life without looking dumb (or dying)” +readme update test + ![screenshot here eventually](https://dietmartemps.com/media_library/image/28928_1374416277166.jpg) What kind of footprint do you leave on the world? What impact do you have on the people around you? Do you know how to deal with emergency situations? Being a good person doesn't have to be a pretentious sweater you show off - all it takes is paying attention to the little details in life.
diff --git a/css/style.css b/css/style.css index 1741cab..9565cc8 100644 --- a/css/style.css +++ b/css/style.css @@ -49,7 +49,7 @@ div#question-container { background-color: rgb(0, 0, 0); border-radius: 10px; max-width: 450px; - min-width: 250px; + min-width: 350px; padding: 10px; } @@ -102,11 +102,16 @@ button { font-size: 16px; text-align: center; cursor: pointer; - border: none; + border: 3px solid; border-radius: 5px; /* transition: background-color 0.3s ease; */ } +button:hover { + background-color: rgb(61, 61, 61); + color: #fff; + font-weight: bold; +} #btn-reset { - margin-top: 30px; + margin-top: 20px; } \ No newline at end of file diff --git a/js/DeadStorage.js b/js/DeadStorage.js deleted file mode 100644 index ebd69b2..0000000 --- a/js/DeadStorage.js +++ /dev/null @@ -1,169 +0,0 @@ -// let startTimer = setInterval(function() { -// countdown.textContent = timeLeft + ' seconds remaining.' -// timeLeft -= 1 -// if (timeLeft < 0) { -// countdownEl.textContent = 'Finished!' -// confetti.start(500) -// } -// }, 1000) - - - -let currQuestionIdx=0 -> this would icnrement up as we go thru next questions -could also do for let score = 0 -> same idea, to keep adding to score -render question method would put questions into (renderedQuestion) - -//array of objects -BENS ORIG IDEA - SWITCHING BACK TO THIS -const questionsCat1 = [ - { - quesQs: "What do you do etc etc?", - quesAs: [ - { answer: 'be rude', correctAnswer: false }, - { answer: 'be nice', correctAnswer: true }, - { answer: 'be crude', correctAnswer: false }, - { answer: 'be tude', correctAnswer: false }, - ] - }, - { - quesQs: "QUestion 2, what's good to do??", - quesAs: [ - { answer: 'help people', correctAnswer: true }, - { answer: 'hurt people', correctAnswer: false }, - { answer: 'kill people', correctAnswer: false }, - { answer: 'steal someones car', correctAnswer: false }, - ] - }, - { - quesQs: "#3, who's a good person to have around?", - quesAs: [ - { answer: 'bad friend', correctAnswer: false }, - { answer: 'no friend', correctAnswer: false }, - { answer: 'donut stealer', correctAnswer: false }, - { answer: 'Good friend', correctAnswer: true }, - ] - }, -] - - - - -2nd method, cleaner but will make more problems later -const questionsCat1 = [ - { - quesQs: "What do you do etc etc?", - correctAnswerIdx: 1, - quesAs: [ - { answer1: 'be rude' }, - { answer2: 'be nice' }, - { answer3: 'be crude' }, - { answer4: 'be tude' }, - ] - }, - { - quesQs: "Question #2?", - correctAnswerIdx: 0, - quesAs: [ - { answer1: 'help people' }, - { answer2: 'hurt people' }, - { answer3: 'kill people' }, - { answer4: 'steal someones car' }, - ] - }, - { - quesQs: "Question #3?", - correctAnswerIdx: 3, - quesAs: [ - { answer1: 'bad friend' }, - { answer2: 'no friend' }, - { answer3: 'donut stealer' }, - { answer4: 'Good friend' }, - ] - }, -] - - - - - -MY ORIG WAY: -{ - quesQs: "What do you do etc etc?", - quesAs: { - A: "A - be rude", - B: "B - be nice", - C: "C - be crude", - D: "D - be tude" - }, - correctAnswer: "B" -}, - { - question: "Question #2?", - answers: { - A: "help people", - B: "hurt people", - C: "kill people", - D: "steal someones car" - }, - correctAnswer: "A" - }, - { - question: "Question #3?", - answers: { - A: "bad friend", - B: "no friend", - C: "donut stealer", - D: "Good friend" - }, - correctAnswer: "D" - }, -] - - -from 1/3 @ 1:40 PM - saving in case i need to go back to anyting - from when i was adding click by adding LI id's -/*--------- Event Listeners ---------*/ -btnCategory1.addEventListener('click', renderQuestionCat1) -// eachAnswer.addEventListener('click', playerChooseAnswer) - -// tried for loop, when I was adding CLASS to li's instead of ids -// for (let idx = 0; idx < eachAnswer.length; idx++) { -// eachAnswer[idx].addEventListener('click', function() { -// console.log('eachAnswer ' + (idx) + ' clicked!'); -// }); -// } - - -/*------------ Functions ------------*/ -function renderQuestionCat1() { - //create variable to hold just one specific question (indicated by currentQuesIdx) - const singleQuestion = questionsCat1[currentQuesIdx] - //then use that new variable to access the question & print it - question.textContent = `${singleQuestion.quesQs}` - - //create variable to hold all answers to given question - now this holds an array of objects - const answersToSingleQuestion = singleQuestion.quesAs - // console.log(answersToSingleQuestion); - - //loop through quesA's array, for each create LI & add text to LI & append LI to parent - answersToSingleQuestion.forEach((eachA) => { - let renderedAnswer = document.createElement('li') - - // initial attempty - // add class to each li: - // renderedAnswer.setAttribute('class', 'answer-li'); - // OR id to each li - // renderedAnswer.setAttribute('id', 'answer-li'); - - renderedAnswer.textContent = `${eachA.answer}` - answers.appendChild(renderedAnswer) - // console.log(renderedAnswer); - }) - - //loop to update GLOBAL currentQuesIdx - Ben recs: want to increment the currentQuesIdx only after a player has made a guess, not all at once like this - // for (let i = 0; i < questionsCat1.length; i++){ - // currentQuesIdx += 1 - // console.log(currentQuesIdx); - } - - -