├── .gitignore ├── LICENSE ├── README.md ├── end.html ├── end.js ├── game.css ├── game.html ├── game.js ├── highscores.css ├── highscores.html ├── highscores.js ├── index.html ├── question.json ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # IDE - VSCode 3 | # .vscode/* 4 | # !.vscode/settings.json -- Line discovered that was overriding above (REMOVE) 5 | 6 | **/.vscode/ 7 | 8 | test.md 9 | # Logs 10 | logs 11 | *.log 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | lerna-debug.log* 16 | 17 | # Diagnostic reports (https://nodejs.org/api/report.html) 18 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 19 | 20 | # Runtime data 21 | pids 22 | *.pid 23 | *.seed 24 | *.pid.lock 25 | 26 | # Directory for instrumented libs generated by jscoverage/JSCover 27 | lib-cov 28 | 29 | # Coverage directory used by tools like istanbul 30 | coverage 31 | *.lcov 32 | 33 | # nyc test coverage 34 | .nyc_output 35 | 36 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 37 | .grunt 38 | 39 | # Bower dependency directory (https://bower.io/) 40 | bower_components 41 | 42 | # node-waf configuration 43 | .lock-wscript 44 | 45 | # Compiled binary addons (https://nodejs.org/api/addons.html) 46 | build/Release 47 | 48 | # Dependency directories 49 | node_modules/ 50 | jspm_packages/ 51 | 52 | # TypeScript v1 declaration files 53 | typings/ 54 | 55 | # TypeScript cache 56 | *.tsbuildinfo 57 | 58 | # Optional npm cache directory 59 | .npm 60 | 61 | # Optional eslint cache 62 | .eslintcache 63 | 64 | # Microbundle cache 65 | .rpt2_cache/ 66 | .rts2_cache_cjs/ 67 | .rts2_cache_es/ 68 | .rts2_cache_umd/ 69 | 70 | # Optional REPL history 71 | .node_repl_history 72 | 73 | # Output of 'npm pack' 74 | *.tgz 75 | 76 | # Yarn Integrity file 77 | .yarn-integrity 78 | 79 | # dotenv environment variables file 80 | .env 81 | .env.test 82 | 83 | # parcel-bundler cache (https://parceljs.org/) 84 | .cache 85 | 86 | # Next.js build output 87 | .next 88 | 89 | # Nuxt.js build / generate output 90 | .nuxt 91 | dist 92 | 93 | # Gatsby files 94 | .cache/ 95 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 96 | # https://nextjs.org/blog/next-9-1#public-directory-support 97 | # public 98 | 99 | # vuepress build output 100 | .vuepress/dist 101 | 102 | # Serverless directories 103 | .serverless/ 104 | 105 | # FuseBox cache 106 | .fusebox/ 107 | 108 | # DynamoDB Local files 109 | .dynamodb/ 110 | 111 | # TernJS port file 112 | .tern-port 113 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Oybek Kayumov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QuizAppHTML-CSS-JS-API-JSON -------------------------------------------------------------------------------- /end.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Congratulations! 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

16 |
17 | 18 | 19 |
20 | 21 | Play Again 22 | Go Home 23 | 24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /end.js: -------------------------------------------------------------------------------- 1 | const username = document.getElementById('username'); 2 | const saveScoreBtn = document.getElementById('saveScoreBtn'); 3 | 4 | //todo localStorage GET 5 | const finalScore = document.getElementById('finalScore'); 6 | const mostRecentScore = localStorage.getItem('mostRecentScore') 7 | 8 | // 1 9 | // localStorage.setItem('highScores', [ ]) //! NULL 10 | // localStorage.setItem('highScores1', []) 11 | 12 | // ! localStorage.setItem => JSON.stringify 13 | // ! localStorage.getItem => JSON.parse 14 | 15 | // 2 16 | // localStorage.setItem('highScores', JSON.stringify([])); //! [] 17 | 18 | // 3 19 | //todo мы хотим получить из localStorage или его нет то ПУСТОЙ Array !!! 20 | const highScores = JSON.parse(localStorage.getItem('highScores')) || []; 21 | // console.log(highScores); //! первый раз возврашает NULL без || [], а с || [] возвращает [] 22 | 23 | const MAX_HIGH_SCORES = 5 //* ДЛИНА СПИСКА РАВНО 5, т.е. (6) Шестой не будет включен в список 24 | 25 | 26 | finalScore.innerHTML = mostRecentScore; 27 | 28 | username.addEventListener('keyup', () => { 29 | saveScoreBtn.disabled = !username.value; 30 | }) 31 | 32 | saveHighScore = (e) => { 33 | 34 | e.preventDefault(); 35 | 36 | //? create score Object 37 | const score = { 38 | // для проверки списка с длиной 5 результатов 39 | score: Math.floor(Math.random() * 100), 40 | // score: mostRecentScore, 41 | name: username.value 42 | }; 43 | highScores.push(score); 44 | 45 | //todo sort 46 | // highScores.sort( (a, b) => { 47 | // return b.score - a.score 48 | // }); 49 | //! same 50 | highScores.sort( (a, b) => b.score - a.score ); 51 | //todo 52 | // a 53 | // b subtract a //вычесть 54 | // if b.score higher THAN a.score, THAN put b BEFORE a 55 | 56 | //TODO in INDEX 5 CUTTING OF everything AFTER that 57 | highScores.splice(5); 58 | 59 | //TODO in UPDATE LOCALSTORAGE 60 | localStorage.setItem('highScores', JSON.stringify(highScores)) 61 | 62 | //TODO AFTER SAVE GO TO THE MAIN PAGE 63 | window.location.assign('/'); 64 | 65 | } -------------------------------------------------------------------------------- /game.css: -------------------------------------------------------------------------------- 1 | .choice-container { 2 | display: flex; 3 | margin-bottom: 0.5rem; 4 | width: 100%; 5 | font-size: 1.8rem; 6 | border: 0.1rem solid rgba(86, 165, 235, 0.25); 7 | background-color: #fff; 8 | } 9 | 10 | .choice-container:hover { 11 | cursor: pointer; 12 | box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); 13 | transform: translateY(-0.1rem); 14 | transition: (transform 150ms); 15 | } 16 | 17 | .choice-prefix { 18 | padding: 1.5rem 2.5rem; 19 | background-color: #56a5eb; 20 | color: #fff; 21 | } 22 | 23 | .choice-text { 24 | padding: 1.5rem; 25 | width: 100%; 26 | } 27 | 28 | .correct { 29 | background-color: greenyellow; 30 | } 31 | 32 | .incorrect { 33 | background-color: red; 34 | } 35 | 36 | /* HUD */ 37 | 38 | #hud { 39 | display: flex; 40 | justify-content: space-around; 41 | } 42 | 43 | .hud-prefix { 44 | text-align: center; 45 | font-size: 2.5rem; 46 | } 47 | 48 | .hud-main-text { 49 | text-align: center; 50 | } 51 | 52 | #progressBar { 53 | width: 20rem; 54 | height: 4rem; 55 | border: 0.4rem solid #56a5eb; 56 | margin-top: 1.9rem; 57 | } 58 | 59 | #progressBarFull { 60 | height: 3.4rem; 61 | background-color: #56a5eb; 62 | width: 50%; 63 | width: 0%; 64 | } 65 | 66 | /*TODO LOADER */ 67 | 68 | #loader { 69 | border: 1.6rem solid white; 70 | border-radius: 50%; 71 | border-top: 1.6rem solid #56a5eb; 72 | border-top: 1.6rem solid red; 73 | border-top: 1.6rem solid goldenrod; 74 | width: 12rem; 75 | height: 12rem; 76 | animation: spin 2s linear infinite; 77 | } 78 | 79 | @keyframes spin { 80 | 0% { 81 | transform: rotate(0deg); 82 | } 83 | 100% { 84 | transform: rotate(360deg); 85 | } 86 | 87 | } -------------------------------------------------------------------------------- /game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quick Quiz - Play 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 62 |
63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /game.js: -------------------------------------------------------------------------------- 1 | const question = document.getElementById('question'); 2 | // const choices = document.getElementsByClassName('choice-text'); 3 | const choices = Array.from(document.getElementsByClassName('choice-text')); 4 | // console.log(choices); 5 | 6 | // const questionCounterText = document.getElementById('questionCounter'); 7 | const progressText = document.getElementById('progressText'); 8 | 9 | const scoreText = document.getAnimations('score') 10 | 11 | const progressBarFull = document.getElementById('progressBarFull'); 12 | 13 | //! loader 14 | const loader = document.getElementById('loader'); 15 | const game = document.getElementById('game'); 16 | 17 | 18 | let currentQuestion = {}; 19 | let acceptingAnswers = false; 20 | let score = 0; 21 | let questionCounter = 0; 22 | let availableQuestions = []; 23 | 24 | let questions = []; 25 | 26 | //! URL 27 | fetch("https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple") 28 | 29 | //! local json 30 | // fetch("question.jsson") 31 | // fetch("question.jsson") //! чтобы поймать например ошибку в .catch 32 | .then( response => { 33 | // console.log(response); 34 | return response.json() 35 | }) 36 | .then(loadQuestions => { 37 | // console.log(loadQuestions.results); //todo see downloaded json 38 | //!local json 39 | // questions = loadQuestions; 40 | // startGame(); 41 | 42 | //downloaded json 43 | questions = loadQuestions.results.map(loadQuestion => { 44 | const formattedQuestions = { 45 | question: loadQuestion.question 46 | }; 47 | 48 | const answerChoices = [...loadQuestion.incorrect_answers]; 49 | formattedQuestions.answer = Math.floor(Math.random() * 3 + 1); 50 | answerChoices.splice(formattedQuestions.answer -1, 0, loadQuestion.correct_answer); 51 | answerChoices.forEach((choice, index) => { 52 | formattedQuestions["choice" + (index+1)] = choice; 53 | }) 54 | 55 | return formattedQuestions; 56 | }) 57 | 58 | // loader.classList.add('hidden'); 59 | // game.classList.remove('hidden'); 60 | startGame(); 61 | }) 62 | .catch(err => { 63 | console.log(err); 64 | }) 65 | 66 | //todo мы будем загружать из файла lsn11 67 | // [ 68 | // { 69 | // question: "Inside which HTML element do we put the JavaScript??", 70 | // choice1: " 27 | 28 | -------------------------------------------------------------------------------- /highscores.js: -------------------------------------------------------------------------------- 1 | const highScoresList = document.getElementById("highScoresList"); 2 | const highScoresNoParse = localStorage.getItem('highScores'); 3 | const highScores = JSON.parse(localStorage.getItem('highScores')); 4 | 5 | // console.log(highScoresNoParse); 6 | // console.log(highScores); 7 | 8 | // console.log( //* returns array of strings 9 | // highScoresList.innerHTML = 10 | // highScores.map( score => { 11 | // console.log(score); 12 | 13 | // console.log(`
  • ${score.name} - ${score.score}
    • `); 14 | // return `
  • ${score.name} - ${score.score}
    • `; 15 | // }) 16 | // .join("") //* join in the array with empty string 17 | 18 | // ) //consol.log end 19 | 20 | highScores.forEach(score => { 21 | highScoresList.innerHTML += ` 22 |
  • ${score.name} - ${score.score}
    • 23 | `; 24 | }); 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
    13 |
    14 |

    Quick Quiz

    15 | Play 16 | Highscores 17 |
    18 |
    19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /question.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "question": "Inside which HTML element do we put the JavaScript??", 4 | "choice1": "