first commit

CSS/index.css

@@ -0,0 +1,81 @@
+main {
+background-color: #000000;
+background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect fill='none' stroke-width='77.7' stroke-opacity='0.39' id='a' x='-400' y='-300' width='800' height='600'/%3E%3C/defs%3E%3Cg style='transform-origin:center'%3E%3Cg transform='rotate(180 0 0)' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%23000000' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%23000011' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%23000022' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%23000033' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%23000044' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23000055' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%23000066' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%23000077' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%23000088' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%23000099' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%230000aa' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%230000bb' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%230000cc' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%230000dd' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%230000ee' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%2300F' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+background-attachment: fixed;
+background-size: cover;
+background-position: center;
+}
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+.heading {
+    --radius: 10px;
+    width: fit-content;
+    padding: 6px;
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+    border-radius: var(--radius);
+    margin-bottom: 50px;
+    text-align: center;
+  }
+
+  .heading h1 {
+    font-size: 50px;
+    padding: 15px;
+    background-image: linear-gradient(30deg, #eee, #fff);
+    font-family: "Electrolize", sans-serif;
+    border-radius: inherit;
+  }
+
+  .heading::before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    transform: scale(2) translate(-50%, -50%);
+    scale: 1.1;
+    background-image: conic-gradient(#fc5130, #613dc1);
+    animation: spinning 7s infinite linear;
+    z-index: -1;
+    border-radius: inherit;
+  }
+
+  @keyframes spinning {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(45deg);
+    }
+    75% {
+      transform: rotate(315deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+.animate__delay-1s {
+    animation-delay: 1s;
+}
+.input-control {
+    height: 40px;
+}
+.douma {
+    width: 25px;
+}
+.choices li {
+  cursor: pointer;
+  transition: 0.3s;
+}
+.choices li:hover {
+  background-color: #320d99;
+  color: white;
+}
+.text-lead {
+  font-size: clamp(0.3rem , 1rem , 1.5rem);
+}

JS/Question.js

@@ -0,0 +1,98 @@
+import {
+  questionContainer,
+  questionView,
+  quiz,
+  quizQuestions,
+} from "./index.js";
+
+export class Question {
+  constructor(index) {
+    this.index = index;
+    this.category = quizQuestions[index].category;
+    this.level = quizQuestions[index].difficulty;
+    this.question = quizQuestions[index].question;
+    this.correctAnswer = quizQuestions[index].correct_answer;
+    this.wrongAnswers = quizQuestions[index].incorrect_answers;
+    this.choices = this.getChoices(quizQuestions[index]);
+    this.answered = false;
+  }
+  getChoices(questionDetails) {
+    return questionDetails.incorrect_answers
+      .concat(questionDetails.correct_answer)
+      .sort();
+  }
+
+  displayQuestion() {
+    let questionBox = `
+        
+        
+                    <div class="d-flex justify-content-between flex-wrap">
+                        <span class="p-1 my-2 text-center rounded-1 bg-dark text-white text-start">${
+                          this.category
+                        }</span>
+                        <span class="p-1 my-2 text-center rounded-1 bg-info text-white text-end">${
+                          this.index + 1
+                        } of ${quizQuestions.length} Questions</span>
+                    </div>
+                    <p class="text-lead text-capitalize mx-auto my-3 fw-normal">${
+                      this.question
+                    }</p>
+                    <ul class="choices list-unstyled my-3 w-100">
+                        ${this.choices
+                          .map(
+                            (choice) =>
+                              `<li class="w-100 my-2 text-center border border-1 border-black rounded-pill p-2">${choice}</li>`
+                          )
+                          .toString()
+                          .replaceAll(",", "")}
+                    </ul>
+                    <p>Your score is ${quiz.score} &#128512;</p>
+        
+        `;
+    questionContainer.innerHTML = questionBox;
+    const choices = Array.from(document.querySelectorAll(".choices li"));
+    for (let i = 0; i < choices.length; i++) {
+      choices[i].addEventListener("click", () => {
+        this.checkAnswer(choices[i]);
+        this.nextQuestion();
+      });
+    }
+  }
+
+  checkAnswer(choice) {
+    if (!this.answered) {
+      this.answered = true;
+      if (choice.innerHTML == this.correctAnswer) {
+        choice.classList.add(
+          "bg-success",
+          "animate__animated",
+          "animate__flipInX"
+        );
+        quiz.score++;
+      } else {
+        choice.classList.add(
+          "bg-danger",
+          "animate__animated",
+          "animate__shakeX"
+        );
+      }
+    }
+  }
+
+  nextQuestion() {
+    this.index++;
+    setTimeout(() => {
+      if (this.index < quizQuestions.length) {
+        const newQ = new Question(this.index);
+        newQ.displayQuestion();
+      } else {
+        questionContainer.innerHTML = quiz.showResult();
+        questionView.classList.replace("d-flex", "d-none");
+        const again = document.getElementById("again");
+        again.addEventListener("click", function () {
+          window.location.reload();
+        });
+      }
+    }, 2000);
+  }
+}

JS/Quiz.module.js

@@ -0,0 +1,30 @@
+export class Quiz {
+  constructor(category, difficulty, qNumber) {
+    this.category = category;
+    this.difficulty = difficulty;
+    this.qNumber = qNumber;
+    this.score = 0;
+  }
+
+  async getQuestionsFromApi() {
+    const api = await fetch(
+      `https://opentdb.com/api.php?amount=${this.qNumber}&category=${this.category}&difficulty=${this.difficulty}`
+    );
+    const apiResponse = await api.json();
+    return apiResponse.results;
+  }
+
+  showResult() {
+    return `
+            <div class="question w-100 d-flex flex-column">
+                <h2 class="mb-3 mx-auto">${
+                  this.score == this.qNumber
+                    ? `Congratulations  &#127881;`
+                    : `Your Score Is ${this.score}`
+                }</h2>
+                <button id="again" class="p-1 btn-primary rounded-pill"><i class="fas fa-retweet"></i> Try Again</button>
+            </div>
+        
+        `;
+  }
+}

JS/index.js

@@ -0,0 +1,28 @@
+import { Question } from "./Question.js";
+import { Quiz } from "./Quiz.module.js";
+
+// ! html catches
+export const quizSelection = document.getElementById("quizSelection");
+export const categoryMenu = document.getElementById("categoryMenu");
+export const levelMenu = document.getElementById("levelMenu");
+export const questionsNumber = document.getElementById("questionsNumber");
+const startBtn = document.getElementById("startBtn");
+export const questionView = document.getElementById("questionView");
+export const questionContainer = document.querySelector(".question-container");
+
+// ! app variables
+export let quiz;
+export let quizQuestions;
+
+startBtn.addEventListener("click", async function () {
+  const categorySelection = categoryMenu.value;
+  const levelSelection = levelMenu.value;
+  const questionsNumberSet = questionsNumber.value;
+
+  quiz = new Quiz(categorySelection, levelSelection, questionsNumberSet);
+  quizQuestions = await quiz.getQuestionsFromApi();
+  let question = new Question(0);
+  quizSelection.classList.add("d-none");
+  questionContainer.classList.replace("d-none", "d-block");
+  question.displayQuestion();
+});

index.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quiz</title>
+    <!-- ! Website icon -->
+    <link rel="website icon" href="Assets/imgs/logo.png" type="png" />
+    <!-- ! Animate css Library -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+    <!-- ! bootstrap  -->
+    <link rel="stylesheet" href="CSS/bootstrap.min.css" />
+    <!-- ! fontawesome -->
+    <link rel="stylesheet" href="CSS/all.min.css" />
+    <!-- ! main css file -->
+    <link rel="stylesheet" href="CSS/index.css" />
+  </head>
+  <body>
+    <main class="min-vh-100 d-flex justify-content-center align-items-center">
+      <div
+        class="container d-flex flex-column justify-content-center align-items-center"
+      >
+        <div class="heading animate__animated animate__zoomInDown">
+          <h1 class="mb-0">Quiz App</h1>
+        </div>
+        <form
+          class="w-75 p-3 text-center animate__animated animate__zoomInUp animate__delay-1s"
+          id="quizSelection"
+        >
+          <div class="form-floating">
+            <select
+              class="form-select my-3"
+              id="categoryMenu"
+              aria-label="category Select"
+            >
+              <option selected="" value="">Any Category</option>
+              <option value="9">General Knowledge</option>
+              <option value="27">Animals</option>
+              <option value="18">Science: Computers</option>
+              <option value="19">Science: Mathematics</option>
+              <option value="20">Mythology</option>
+              <option value="21">Sports</option>
+              <option value="22">Geography</option>
+              <option value="23">History</option>
+              <option value="24">Politics</option>
+              <option value="25">Art</option>
+            </select>
+            <label for="categoryMenu">Choose Category</label>
+          </div>
+          <div class="form-floating">
+            <select
+              class="form-select my-3"
+              id="levelMenu"
+              aria-label="difficulty Select"
+            >
+              <option value="easy" selected>Easy</option>
+              <option value="medium">Medium</option>
+              <option value="hard">Hard</option>
+            </select>
+            <label for="levelMenu">Choose difficulty level</label>
+          </div>
+          <div class="form-floating">
+            <input
+              type="number"
+              class="form-control"
+              id="questionsNumber"
+              placeholder="Number of Questions"
+            />
+            <label for="questionsNumber">Number of Questions</label>
+          </div>
+          <button
+            type="button"
+            class="w-100 btn btn-outline-primary fw-bold text-white my-3"
+            id="startBtn"
+          >
+            Start
+          </button>
+          <div
+            class="social-links mt-3 my-3 d-flex align-items-start justify-content-center gap-3"
+          >
+            <span
+              class="rounded-circle d-flex justify-content-center align-items-center"
+              ><a
+                class="fab fa-facebook-f fa-lg text-decoration-none"
+                href="https://www.facebook.com/adham.gamal.9404/"
+              ></a
+            ></span>
+            <span
+              class="rounded-circle d-flex justify-content-center align-items-center"
+              ><a
+                class="fab fa-linkedin-in fa-lg text-decoration-none"
+                href="https://www.linkedin.com/in/adham-gamal-abdelnasser-%F0%9F%87%B5%F0%9F%87%B8-b47312225/"
+              ></a
+            ></span>
+            <span
+              class="rounded-circle d-flex justify-content-center align-items-center"
+              ><a
+                class="fab fa-github fa-lg text-decoration-none"
+                href="https://github.com/Adham-Gamal-Abdelnasser"
+              ></a
+            ></span>
+            <span
+              class="doma d-flex justify-content-center align-items-center rounded-circle mt-1"
+            >
+              <a
+                href="https://www.linkedin.com/in/adham-gamal-abdelnasser-%F0%9F%87%B5%F0%9F%87%B8-b47312225/"
+                class="douma d-flex justify-content-center align-items-center translate-middle-y"
+                ><img src="Assets/imgs/logo.png" class="w-100"
+              /></a>
+            </span>
+          </div>
+        </form>
+        <div
+          class="question-container d-none w-75 bg-white p-3 rounded-3 animate__animated animate__bounceIn"
+        >
+          <div
+            class="question d-flex flex-column justify-content-center align-items-center"
+            id="questionView"
+          ></div>
+        </div>
+      </div>
+    </main>
+    <!-- ! bootstrap file -->
+    <script src="JS/bootstrap.bundle.min.js"></script>
+    <!-- ! main operation file  -->
+    <script src="JS/index.js" type="module"></script>
+  </body>
+</html>