diff --git a/Dark/README.md b/Dark/README.md deleted file mode 100644 index 85433b5..0000000 --- a/Dark/README.md +++ /dev/null @@ -1,77 +0,0 @@ - -# KVIZ - -

- 13 -

- -This is a quiz app made using open trivia database API. The questions are dynamic and highscores are stored in local storage. - -## Tech stack used -* HTML -* CSS -* JavaScript - -## learn about APIs -[Fetch API](https://youtu.be/38uPRscJXfo) - -## Some screenshots - - - -![App Screenshot](https://drive.google.com/uc?export=view&id=1W5fEWqP2GCbSjW7JDwaq0qeecqvpikuR) -![App Screenshot](https://drive.google.com/uc?export=view&id=1hSyUDN-6MRIbReleCvmtHX4bv032nFfK) -![App Screenshot](https://drive.google.com/uc?export=view&id=1T_VYR91PL_-BR6YVSQeCByOoZAhe_ueP) - -## CONTRIBUTING TO THIS PROJECT - -- Take a look at the Existing Issues of your project and find one that interests you or create your own Issues! -- Tag the repository maintainers or issue creators to assign that issue to you. -- Wait for the Issue to be assigned to you after which you can start working on it. -- Fork the Repo and create a Branch for any Issue that you are working upon. -- Create a Pull Request which will be promptly reviewed and suggestions would be added to improve it. -- Once your PR is approved, you changes will be merged into the project. -- Add Screenshots to help us know what this Script is all about. -- Repository specific contribution information is in the respective READMEs of each repo. -- Do not abuse and/or use bad language. Ensure you don't insult anyone. Be respectful and inclusive. -- Please mention your full name on your GitHub handle to be eligible for prizes. - - - -You can take up any of the existing issues or create a new to to contribute any of your own projects!
-Contribution period ends: 22 December 2022 - - -## How to get started? - -You can refer to the following resources on Git and Github to get started and contact our Project Mentors via [Discord](https://discord.gg/xTNC4MGB) if you have any doubts. - -- [Learn how to contribute to GDSC IGDTUW Autumn of Code Projects](https://www.youtube.com/watch?v=Hcc1LXldeJk) -- [Go through this repository to how to contribute learn step-by-step](https://github.com/firstcontributions/first-contributions) -- [Watch this video to get started](https://youtu.be/SL5KKdmvJ1U) -- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) -- [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-a-pull-request) -- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) -- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) - - - -## Prizes -- Top 3 contributors 🍁
-Special prize | Swag Kits | Shoutouts on Social Media handles | Certificate of appreciation - -- Top 5 female contributors 🍁
-Special prize | Swag Kits | Shoutouts on Social Media handles | Certificate of appreciation - -- Top 10 contributors 🍁
-Shoutouts on Social Media handles | Swag kits and lots of exciting goodies | Certificate of appreciation - -- Top 25 contributors 🍁
-Swag kits and lots of exciting goodies | Certificate of appreciation - -- All the contributors will get a certificate of appreciation for their first successful pull request - - -Join our [Discord](https://discord.gg/KKFUVma6) to stay in touch with project mentors and for any furthur questions. - - diff --git a/Dark/index.html b/Dark/index.html index d86b004..171b104 100644 --- a/Dark/index.html +++ b/Dark/index.html @@ -5,18 +5,17 @@ Kviz: A quiz app + -
+ Dark Theme
- +

Kviz

Play High Scores
-
-
diff --git a/Dark/logo-kviz.jpg b/Dark/logo-kviz.jpg deleted file mode 100644 index 1301019..0000000 Binary files a/Dark/logo-kviz.jpg and /dev/null differ diff --git a/Light/README.md b/Light/README.md deleted file mode 100644 index 85433b5..0000000 --- a/Light/README.md +++ /dev/null @@ -1,77 +0,0 @@ - -# KVIZ - -

- 13 -

- -This is a quiz app made using open trivia database API. The questions are dynamic and highscores are stored in local storage. - -## Tech stack used -* HTML -* CSS -* JavaScript - -## learn about APIs -[Fetch API](https://youtu.be/38uPRscJXfo) - -## Some screenshots - - - -![App Screenshot](https://drive.google.com/uc?export=view&id=1W5fEWqP2GCbSjW7JDwaq0qeecqvpikuR) -![App Screenshot](https://drive.google.com/uc?export=view&id=1hSyUDN-6MRIbReleCvmtHX4bv032nFfK) -![App Screenshot](https://drive.google.com/uc?export=view&id=1T_VYR91PL_-BR6YVSQeCByOoZAhe_ueP) - -## CONTRIBUTING TO THIS PROJECT - -- Take a look at the Existing Issues of your project and find one that interests you or create your own Issues! -- Tag the repository maintainers or issue creators to assign that issue to you. -- Wait for the Issue to be assigned to you after which you can start working on it. -- Fork the Repo and create a Branch for any Issue that you are working upon. -- Create a Pull Request which will be promptly reviewed and suggestions would be added to improve it. -- Once your PR is approved, you changes will be merged into the project. -- Add Screenshots to help us know what this Script is all about. -- Repository specific contribution information is in the respective READMEs of each repo. -- Do not abuse and/or use bad language. Ensure you don't insult anyone. Be respectful and inclusive. -- Please mention your full name on your GitHub handle to be eligible for prizes. - - - -You can take up any of the existing issues or create a new to to contribute any of your own projects!
-Contribution period ends: 22 December 2022 - - -## How to get started? - -You can refer to the following resources on Git and Github to get started and contact our Project Mentors via [Discord](https://discord.gg/xTNC4MGB) if you have any doubts. - -- [Learn how to contribute to GDSC IGDTUW Autumn of Code Projects](https://www.youtube.com/watch?v=Hcc1LXldeJk) -- [Go through this repository to how to contribute learn step-by-step](https://github.com/firstcontributions/first-contributions) -- [Watch this video to get started](https://youtu.be/SL5KKdmvJ1U) -- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) -- [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-a-pull-request) -- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) -- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) - - - -## Prizes -- Top 3 contributors 🍁
-Special prize | Swag Kits | Shoutouts on Social Media handles | Certificate of appreciation - -- Top 5 female contributors 🍁
-Special prize | Swag Kits | Shoutouts on Social Media handles | Certificate of appreciation - -- Top 10 contributors 🍁
-Shoutouts on Social Media handles | Swag kits and lots of exciting goodies | Certificate of appreciation - -- Top 25 contributors 🍁
-Swag kits and lots of exciting goodies | Certificate of appreciation - -- All the contributors will get a certificate of appreciation for their first successful pull request - - -Join our [Discord](https://discord.gg/KKFUVma6) to stay in touch with project mentors and for any furthur questions. - - diff --git a/Light/game.css b/Light/game.css index 0109ee3..a1cac91 100644 --- a/Light/game.css +++ b/Light/game.css @@ -92,6 +92,9 @@ height: 12rem; animation: spin 2s linear infinite; } +.alert { + animation: bounceTimer 1.2s infinite ease-in-out; +} @keyframes spin { 0% { @@ -109,6 +112,26 @@ bottom: 0.8em; } +@keyframes bounceTimer { + + 0%, + 100% { + transform: scale(1); + } + + 25% { + transform: scale(1.5); + } + + 50% { + transform: scale(1); + } + + 75% { + transform: scale(1.5); + } +} + @media screen and (max-width: 600px) { .container { padding: 20px; diff --git a/Light/game.html b/Light/game.html index eec8d49..e5ad632 100644 --- a/Light/game.html +++ b/Light/game.html @@ -24,7 +24,7 @@
Time Left
-
15
+
15
diff --git a/Light/game.js b/Light/game.js index 57eca99..7e9ffa6 100644 --- a/Light/game.js +++ b/Light/game.js @@ -72,7 +72,7 @@ startGame = () => { getNewQuestion(); game.classList.remove('hidden'); loader.classList.add('hidden'); - next_btn.classList.remove("show"); + next_btn.classList.remove("show"); }; const next_btn = document.querySelector("footer .next_btn"); @@ -99,14 +99,14 @@ getNewQuestion = () => { availableQuesions.splice(questionIndex, 1); acceptingAnswers = true; - clearInterval(counter); - clearInterval(counterLine); - startTimer(timeValue); - startTimerLine(widthValue); - timeText.textContent = "Time Left"; + clearInterval(counter); + clearInterval(counterLine); + startTimer(timeValue); + startTimerLine(widthValue); + timeText.textContent = "Time Left"; }; -next_btn.onclick = ()=>{ +next_btn.onclick = () => { getNewQuestion(); } @@ -121,8 +121,8 @@ choices.forEach((choice) => { const classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'; - clearInterval(counter); - clearInterval(counterLine); + clearInterval(counter); + clearInterval(counterLine); if (classToApply === 'correct') { incrementScore(CORRECT_BONUS); @@ -137,44 +137,50 @@ choices.forEach((choice) => { getNewQuestion(); }, 1000); }); - next_btn.classList.add("show"); + next_btn.classList.add("show"); }); function startTimer(time) { counter = setInterval(timer, 1000); function timer() { - timeCount.textContent = time; time--; - if (time < 9) { + timeCount.textContent = time; time--; + if (time < 9) { let addZero = timeCount.textContent; - timeCount.textContent = "0" + addZero; + timeCount.textContent = "0" + addZero; } - if (time <= 0) { - clearInterval(counter); + if (time <= 0) { + clearInterval(counter); getNewQuestion(); - timeText.textContent = "Time Off"; - const allOptions = choices.children.length; - let correcAns = questions[questionCounter].answer; + timeText.textContent = "Time Off"; + const allOptions = choices.children.length; + let correcAns = questions[questionCounter].answer; for (i = 0; i < allOptions; i++) { - if (choices.children[i].textContent == correcAns) { - choices.children[i].setAttribute("class", "option correct"); - choices.children[i].insertAdjacentHTML("beforeend", tickIconTag); + if (choices.children[i].textContent == correcAns) { + choices.children[i].setAttribute("class", "option correct"); + choices.children[i].insertAdjacentHTML("beforeend", tickIconTag); console.log("Time Off: Auto selected correct answer."); } } for (i = 0; i < allOptions; i++) { - choices.children[i].classList.add("disabled"); + choices.children[i].classList.add("disabled"); } } + if (time < 5) { + document.getElementById("timer").classList.add("alert"); + } + else { + document.getElementById("timer").classList.remove("alert"); + } } } function startTimerLine(time) { counterLine = setInterval(timer, 29); function timer() { - time += 1; - time_line.style.width = time + "px"; - if (time > 549) { - clearInterval(counterLine); + time += 1; + time_line.style.width = time + "px"; + if (time > 549) { + clearInterval(counterLine); } } } diff --git a/Light/index.html b/Light/index.html deleted file mode 100644 index 695979e..0000000 --- a/Light/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Kviz: A quiz app - - - -
-
-
- -

Kviz

- Play - High Scores -
-
- - diff --git a/Light/logo-kviz.jpg b/Light/logo-kviz.jpg deleted file mode 100644 index 1301019..0000000 Binary files a/Light/logo-kviz.jpg and /dev/null differ diff --git a/Light/sounds/correctAns.mp3 b/Light/sounds/correctAns.mp3 deleted file mode 100644 index 5c82f39..0000000 Binary files a/Light/sounds/correctAns.mp3 and /dev/null differ diff --git a/Light/sounds/wrongAns.mp3 b/Light/sounds/wrongAns.mp3 deleted file mode 100644 index 164e96e..0000000 Binary files a/Light/sounds/wrongAns.mp3 and /dev/null differ diff --git a/README.md b/README.md index 39b0f9c..ca8fac3 100644 --- a/README.md +++ b/README.md @@ -40,4 +40,4 @@ https://user-images.githubusercontent.com/98908906/206414690-4c8a9f10-3130-4741- -Please refer to the above video for demo. +Please refer to the above video for demo. \ No newline at end of file diff --git a/Dark/kviz-1 (9).png b/assets/dark.png similarity index 100% rename from Dark/kviz-1 (9).png rename to assets/dark.png diff --git a/assets/kviz.png b/assets/kviz.png deleted file mode 100644 index 9393877..0000000 Binary files a/assets/kviz.png and /dev/null differ diff --git a/Light/kviz-1 (8).png b/assets/light.png similarity index 100% rename from Light/kviz-1 (8).png rename to assets/light.png diff --git a/Dark/sounds/correctAns.mp3 b/assets/sounds/correctAns.mp3 similarity index 100% rename from Dark/sounds/correctAns.mp3 rename to assets/sounds/correctAns.mp3 diff --git a/Dark/sounds/wrongAns.mp3 b/assets/sounds/wrongAns.mp3 similarity index 100% rename from Dark/sounds/wrongAns.mp3 rename to assets/sounds/wrongAns.mp3 diff --git a/index.html b/index.html index 5383ddd..f96174d 100644 --- a/index.html +++ b/index.html @@ -9,16 +9,13 @@ -
-
-

Kviz

-
- Dark Theme - Light Theme -
-
+ Dark Theme +
+
+ +

Kviz

+ Play + High Scores
- -