diff --git a/end.html b/end.html index 52295f2..f6541bf 100644 --- a/end.html +++ b/end.html @@ -14,7 +14,7 @@ - End + FE-quiz @@ -31,7 +31,7 @@ End Quiz Completed You scored... - Frontend + Score 7 out of 10 diff --git a/end.js b/end.js index 4635631..a8180b6 100644 --- a/end.js +++ b/end.js @@ -9,9 +9,9 @@ const mostRecentScore = localStorage.getItem('mostRecentScore'), finalScoreText = localStorage.getItem('finalScore') -const theFinalText = parseInt(finalScoreText) + 1 +const theFinalText = finalScoreText scoreRemains.innerText = `Got ${theFinalText} out of ${MAX_QUESTIONS} questions` -finalScore.innerText = parseInt(mostRecentScore) + 10 +finalScore.innerText = mostRecentScore function handleClick() { diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css index 4097a0e..992c91a 100644 --- a/html quiz/html-quiz.css +++ b/html quiz/html-quiz.css @@ -279,7 +279,7 @@ h4 { flex-direction: column; row-gap: 1rem; } - +/* .loader { border: 1.6rem solid var(--first-color-light); border-top: 1.6rem solid #020520; @@ -302,7 +302,7 @@ h4 { } } - +*/ .the__game-container { margin-top: -6rem; } @@ -316,18 +316,19 @@ h4 { .button { display: flex; align-items: center; - justify-content: flex-end; + justify-content: space-between; + margin-top: -1rem; } -.btn { +.btn, .skip { padding: .5rem 1rem; background: #9d25d0; outline: none; border: none; color: var(--title-color); border-radius: .5rem; - position: fixed; - bottom: 1.5rem; + font-size: var(--small-font-size); + } .correct { @@ -353,6 +354,11 @@ h4 { @media screen and (max-width: 320px) { + .button { + display: flex; + align-items: center; + justify-content: space-between; + } .html__title { font-size: var(--h3-font-size); font-weight: var(--font-weight-bold); @@ -508,14 +514,28 @@ h4 { color: var(--option-color); font-weight: var(--font-weight-medium); } + +} +@media screen and (min-width: 700px) { + body { + height: 70vh; + } + .html__title { + font-size: var(--bigger-font-size); + } + + + .html__choice-text { + font-size: var(--normal-font-size); + } } @media screen and (min-width: 1024px) { body { - height: 70vh; + height: 100vh; } .html__title { font-size: var(--h1-font-size); diff --git a/html-quiz.html b/html-quiz.html index 9e5cfdd..f6c023d 100644 --- a/html-quiz.html +++ b/html-quiz.html @@ -75,6 +75,8 @@ A portrait that comically exaggerates Back to menu + Skip to Score + diff --git a/html-quiz.js b/html-quiz.js index 6d13fb5..e8326a0 100644 --- a/html-quiz.js +++ b/html-quiz.js @@ -2,12 +2,13 @@ const questions = document.getElementById('html-question'), choices = Array.from(document.querySelectorAll('.html__choice-text')), choicePrefix = document.querySelector('.html__choice-prefix'), optionList = document.querySelector('.html__options-list'), - buttonBackToMenu = document.querySelector('.button'), + buttonBackToMenu = document.querySelector('.btn'), questionHtmlCounter = document.querySelector('.html__question-counter'), scoreCounter = document.querySelector('.html__score'), progressBarFull = document.querySelector('.html__progress-full'), loader = document.querySelector('.loader'), - game = document.querySelector('.the__game-container') + game = document.querySelector('.the__game-container'), + skip = document.querySelector('.skip') function scrollHeader() { const header = document.getElementById('header') @@ -28,7 +29,6 @@ let finalScore = 0 let htmlQuestions = []; fetch('questions.json') .then(res => { - console.log(res) return res.json() }) .then(loadedQuestions => { @@ -37,7 +37,6 @@ fetch('questions.json') htmlQuestions = loadedQuestions MAX_QUESTIONS = htmlQuestions.length - console.log(MAX_QUESTIONS) startGame() }) @@ -130,3 +129,8 @@ function handleClickButton() { return window.location.assign('index.html') } +skip.addEventListener('click', handleClickSkip) + +function handleClickSkip() { + return window.location.assign('end.html') +} \ No newline at end of file diff --git a/styles.css b/styles.css index 9efe192..6621920 100644 --- a/styles.css +++ b/styles.css @@ -415,6 +415,16 @@ h4 { font-weight: var(--font-weight-medium); font-size: var(--h2-font-size); } + + .btn { + padding: .5rem 1rem; + background: #9d25d0; + outline: none; + border: none; + color: var(--title-color); + border-radius: .5rem; + + } } @media screen and (min-width: 778px) { @@ -442,6 +452,34 @@ h4 { width: 300px; justify-content: center; } + + + + .score__output { + background-color: #0205206e; + height: 250px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + row-gap: 2rem; + border-radius: 1rem; + } + + .score__heading { + font-weight: var(--font-weight-bold); + font-size: var(--h1-font-size); + } + + .score { + font-size: 6rem; + } + + .end-btn { + padding: 1rem; + font-size: var(--h3-font-size); + font-weight: var(--font-weight-medium); + } } @media screen and (min-width: 1024px) { @@ -469,4 +507,43 @@ h4 { width: 60%; } + + .end__heading { + margin-top: 2rem; + } + + .end__heading-text { + font-size: var(--biggest-font-size); + font-weight: var(--font-weight-medium); + } + + .end__heading-text span { + font-weight: var(--font-weight-bold); + } + + .score__output { + background-color: #0205206e; + height: 250px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + row-gap: 2rem; + border-radius: 1rem; + } + + .score__heading { + font-weight: var(--font-weight-bold); + font-size: var(--h1-font-size); + } + + .score { + font-size: 6rem; + } + + .end-btn { + padding: 1rem; + font-size: var(--h3-font-size); + font-weight: var(--font-weight-medium); + } } \ No newline at end of file
out of 10