Merge pull request #5 from illonab/feature/add-styles

Added styles
illonab · Dec 7, 2023 · b900717 · b900717
2 parents 64019a6 + 538e28d
commit b900717
Show file tree

Hide file tree

Showing 19 changed files with 154 additions and 112 deletions.
diff --git a/assets/images/1.gif → assets/gifs/1.gif b/assets/images/1.gif → assets/gifs/1.gif
diff --git a/assets/gifs/10.gif b/assets/gifs/10.gif
diff --git a/assets/images/2.gif → assets/gifs/2.gif b/assets/images/2.gif → assets/gifs/2.gif
diff --git a/assets/gifs/3.gif b/assets/gifs/3.gif
diff --git a/assets/gifs/4.gif b/assets/gifs/4.gif
diff --git a/assets/gifs/5.gif b/assets/gifs/5.gif
diff --git a/assets/gifs/6.gif b/assets/gifs/6.gif
diff --git a/assets/gifs/7.gif b/assets/gifs/7.gif
diff --git a/assets/gifs/8.gif b/assets/gifs/8.gif
diff --git a/assets/gifs/9.gif b/assets/gifs/9.gif
diff --git a/assets/gifs/score/winner-1.gif b/assets/gifs/score/winner-1.gif
diff --git a/assets/gifs/score/winner-2.gif b/assets/gifs/score/winner-2.gif
diff --git a/assets/gifs/score/winner-3.gif b/assets/gifs/score/winner-3.gif
diff --git a/assets/images/Friends.mp3 b/assets/images/Friends.mp3
diff --git a/assets/images/logo.png b/assets/images/logo.png
diff --git a/assets/images/trasparent.gif b/assets/images/trasparent.gif
diff --git a/index.html b/index.html
@@ -6,87 +6,100 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Friends Quiz</title>
     <link rel="stylesheet" href="build/css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
 
 <body class=" w-screen h-screen">
+    <main class="flex flex-col w-screen h-screen justify-center">
 
-    <main class="flex flex-col justify-center w-screen h-screen">
-        <h1 class="mb-8 text-2xl font-bold  text-center">Frieds Quiz</h1>
         <div id="container">
 
         </div>
 
         <template id="startComponent">
-            <video class="w-screen h-screen relative "
-                id="xl-desktop-video-template--16457922773160__16536155441d99f4be" playsinline="true" autoplay="true"
-                muted="true" loop="true" data-state="play"
-                src="https://cdn.shopify.com/videos/c/o/v/7f10064cb62041cd825215da935adf5c.mp4">
-
-            </video>
-            <div
-                class="flex flex-col justify-center items-center bg-white w-1/2 h-1/2 absolute z-10 top-1/4 left-1/4 rounded-lg opacity-80 ">
-                <p class="text-xl text-center my-[4rem]">Lorem ipsum, dolor sit amet consectetur
-                    adipisicing elit. At ipsam soluta vero dicta dolor
-                    doloribus
-                    totam labore quas, quae eius aut error consequatur illum incidunt, aliquam sapiente autem atque
-                    fuga.
-                </p>
-                <button id="btnStart" type="button"
-                    class=" md:mx-0 bg-purple-400 hover:bg-purple-700 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Start</button>
+            <div class="flex flex-col-reverse lg:flex-row items-center gap-5 bg-black h-screen justify-center">
+                <div class="flex flex-col items-center bg-white h-full  w-full lg:w-1/2 justify-center">
+                    <div class="flex flex-col rounded items-center ">
+                        <h1 class="text-3xl text-center my-[4rem] font-bold">Welcome to Friends Quiz!</h1>
+                        <p class="text-xl text-center my-[4rem]">Test your
+                            knowledge on the iconic sitcom, from unforgettable moments to classic quotes. Whether you're
+                            a
+                            casual viewer or a die-hard fan, challenge yourself and relive the humor, love, and
+                            camaraderie
+                            that made 'Friends' a timeless favorite."
+                        </p>
+                        <button id="btnStart" type="button"
+                            class="font-bold  md:mx-0 bg-purple-400 hover:bg-purple-600 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Start</button>
+                    </div>
+                </div>
+                <div class="w-full lg:w-1/2 h-1/2">
+                    <video id="xl-desktop-video-template--16457922773160__16536155441d99f4be" playsinline="true"
+                        autoplay="true" muted="true" loop="true" data-state="play"
+                        src="https://cdn.shopify.com/videos/c/o/v/7f10064cb62041cd825215da935adf5c.mp4">
+                    </video>
+                </div>
             </div>
         </template>
 
         <template id="checkComponent">
-            <div class="flex">
-                <div class="flex flex-col items-center w-1/2 border-4  border-r-black">
-                    <h2 id="question" class="text-xl text-center my-[4rem]">Question</h2>
-                    <ul id="answerList" class="text-xl text-left my-[4rem]">
-
+            <div class="flex flex-col-reverse lg:flex-row items-center gap-5">
+                <div class="flex flex-col items-center justify-center w-full lg:w-1/2 lg:border-r-2  lg:border-t-0">
+                    <h1 id="question" class="text-2xl text-center my-[4rem] font-bold">Welcome to Friends Quiz!</h1>
+                    <ul id="answerList" class="text-xl text-left flex flex-col items-center gap-3 w-1/3">
                     </ul>
                     <button id="btnCheck" type="button"
-                        class=" md:mx-0 bg-purple-400 hover:bg-purple-700 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Check
+                        class="my-[4rem] font-bold  md:mx-0 bg-purple-400 hover:bg-purple-600 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Check
                         answer</button>
                 </div>
                 <div class="bg-white w-1/2">
-                    <img src="" alt="gif answer" id="gif">
+                    <img src="assets/images/trasparent.gif" alt="gif answer" id="gif" frameBorder="0"
+                        class="w-full h-full">
                 </div>
             </div>
         </template>
 
-        <template id="questionComponent">
-            <div class="flex">
-                <div class="flex flex-col items-center w-1/2 border-4  border-r-black">
-                    <h2 id="question" class="text-xl text-center my-[4rem]">Question</h2>
-                    <ul id="answerList" class="text-xl text-left my-[4rem]">
+        <template id="listComponent">
+            <li
+                class="li flex flex-col justify-center li  mt-5 font-bold border border-solid border-black  md:mx-0 hover:bg-purple-400 hover:transition-colors duration-500 ease-linear text-black hover:text-white w-48 rounded-3xl text-center shadow-lg">
+                <label class="w-full h-full p-3 cursor-pointer">
+                    <input type="radio" name="answer" value=""
+                        class="answer mb-3 p-3 hidden checked:bg-purple-400  checked:text-white checked:border-purple-400"><span
+                        class="answerText"></span>
+                </label>
+            </li>
+        </template>
 
-                    </ul>
+        <template id="answerComponent">
+            <div class="flex flex-col-reverse lg:flex-row items-center gap-5 bg-black h-screen">
+                <div class="flex flex-col items-center justify-center w-full lg:w-1/2  lg:border-t-0 bg-white h-full">
+
+                    <h1 class="text-2xl text-center my-[4rem] font-bold">The answer is:</h1>
+                    <p id="answer" class="text-2xl text-center  font-bold"></p>
                     <button id="btnNext" type="button"
-                        class=" md:mx-0 bg-purple-400 hover:bg-purple-700 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Next</button>
+                        class=" my-[4rem]  font-bold hover:text-white md:mx-0 bg-purple-400 hover:bg-purple-600 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Next</button>
                 </div>
-                <div class="bg-white w-1/2">
-                    <img src="" alt="gif answer" id="gif">
+                <div class="bg-white w-1/2 ">
+                    <img src="assets/images/trasparent.gif" alt="gif answer" id="gif" frameBorder="0"
+                        class="w-full h-full">
                 </div>
             </div>
         </template>
 
-
-        <template id="answerComponent">
-            <div class="flex flex-col justify-center ">
-                <li>
-                    <label>
-                        <input type="radio" name="answer" value="" class="answer mb-3 p-3"><span
-                            class="answerText"></span>
-                    </label>
-                </li>
-            </div>
-        </template>
-
         <template id="scoreComponent">
-            <div class="flex flex-col justify-center items-center ">
-                <p>You score is: <span class="scoreText"></span>
-                </p>
-                <button id="btnRestart" type="button"
-                    class=" md:mx-0 bg-purple-400 hover:bg-purple-700 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Restart</button>
+            <div class="flex flex-col-reverse lg:flex-row items-center gap-5 bg-black h-screen">
+                <div class="flex flex-col items-center justify-center w-full lg:w-1/2  lg:border-t-0 bg-white h-full">
+                    <p class="text-2xl text-center my-[4rem] font-bold">Your score is: <span
+                            class="scoreText"></span>/10
+                    </p>
+                    <button id="btnRestart" type="button"
+                        class="my-[4rem] font-bold  md:mx-0 bg-purple-400 hover:bg-purple-600 hover:transition-colors duration-500 ease-linear text-white p-3 w-48 rounded-full">Restart</button>
+                </div>
+                <div class="bg-white w-1/2">
+                    <img src="assets/images/trasparent.gif" alt="gif answer" id="gif" frameBorder="0"
+                        class="w-full h-full">
+                </div>
             </div>
         </template>
     </main>

diff --git a/index.js b/index.js
@@ -1,16 +1,29 @@
 const container = document.querySelector("#container");
 const startComponent = document.querySelector("#startComponent");
-const answerComponent = document.querySelector("#answerComponent");
+const listComponent = document.querySelector("#listComponent");
 const questionComponent = document.querySelector("#questionComponent");
+const answerComponent = document.querySelector("#answerComponent");
 let questionIndex = 0;
 let score = 0;
 
+const scoreGifs = [
+  {
+    winner1: "assets/gifs/score/winner-1.gif",
+  },
+  {
+    winner2: "assets/gifs/score/winner-2.gif",
+  },
+  {
+    winner3: "assets/gifs/score/winner-3.gif",
+  },
+];
+
 const questions = [
   {
     question: "Who got stuck in a pair of leather pants?",
     answer: ["Chandler", "Ross", "Joey", "Monica"],
     correctAnswer: "Ross",
-    gif: "assets/images/1.gif",
+    gif: "assets/gifs/1.gif",
   },
   {
     question: "What was the name of Joey's character on 'Days of Our Lives'?",
@@ -21,8 +34,8 @@ const questions = [
       "Gunther",
     ],
     correctAnswer: "Dr. Drake Ramoray",
-    gif: "assets/images/2.gif",
-  } /*
+    gif: "assets/gifs/2.gif",
+  },
   {
     question:
       "What is the name of Phoebe's alter ego, the street performer with a guitar?",
@@ -33,39 +46,59 @@ const questions = [
       "Princess Consuela Bananahammock",
     ],
     correctAnswer: "Regina Phalange",
+    gif: "assets/gifs/3.gif",
   },
   {
     question: "Who peed on Monica after she was stung by a jellyfish?",
     answer: ["Chandler", "Ross", "Joey", "Phoebe"],
-    correctAnswer: "Ross",
+    correctAnswer: "Chandler",
+    gif: "assets/gifs/4.gif",
   },
   {
-    question: "What is the title of Joey's soap opera?",
-    answer: [
-      "Days of Our Lives",
-      "General Hospital",
-      "The Bold and the Beautiful",
-      "As the World Turns",
-    ],
-    correctAnswer: "Days of Our Lives",
+    question: "What Joey doesn't share?",
+    answer: ["Socks", "Food", "Pizza", "Sandwich"],
+    correctAnswer: "Food",
+    gif: "assets/gifs/5.gif",
   },
   {
     question:
       "What did Joey get stuck in his own body during Thanksgiving dinner?",
     answer: ["A refrigerator", "A turkey", "A pumpkin", "A washing machine"],
     correctAnswer: "A turkey",
+    gif: "assets/gifs/6.gif",
   },
   {
     question: "What is the name of Phoebe's twin sister?",
     answer: ["Ursula", "Regina Phalange", "Gladys", "Leslie"],
     correctAnswer: "Ursula",
+    gif: "assets/gifs/7.gif",
   },
   {
     question:
       "What does Ross famously scream when trying to help move his new couch up the stairs?",
     answer: ["Upward!", "Turn!", "Push!", "Pivot!"],
     correctAnswer: "Pivot!",
-  },*/,
+    gif: "assets/gifs/8.gif",
+  },
+  {
+    question:
+      "What is the name of Chandler's annoying ex-girlfriend who nobody likes?",
+    answer: ["Kathy", "Angela", "Mindy", "Janice"],
+    correctAnswer: "Janice",
+    gif: "assets/gifs/9.gif",
+  },
+  {
+    question:
+      "What is the term 'Unagi' according to Ross, and why does he believe it's crucial for personal safety?",
+    answer: [
+      "A type of sushi roll",
+      "Martial arts training",
+      "Self-defense technique",
+      "A state of total awareness",
+    ],
+    correctAnswer: "A state of total awareness",
+    gif: "assets/gifs/10.gif",
+  },
 ];
 
 const onStart = () => {
@@ -89,7 +122,7 @@ const renderQuestionCheck = (questionByIndex) => {
   const answerList = document.querySelector("#answerList");
 
   for (let answer of questionByIndex.answer) {
-    const cloneAnswer = answerComponent.content.cloneNode(true);
+    const cloneAnswer = listComponent.content.cloneNode(true);
     const answerField = cloneAnswer.querySelector(".answer");
     answerField.setAttribute("value", answer);
     const answerText = cloneAnswer.querySelector(".answerText");
@@ -98,65 +131,58 @@ const renderQuestionCheck = (questionByIndex) => {
   }
 
   const btnCheck = document.querySelector("#btnCheck");
+  //const btnNext = document.querySelector("#btnNext");
+
   btnCheck.addEventListener("click", () => {
-    renderQuestion(questions[questionIndex]);
+    const selectedAnswer = document.querySelector(
+      "input[name='answer']:checked"
+    );
+    if (selectedAnswer) {
+      if (selectedAnswer.value === questions[questionIndex].correctAnswer) {
+        score++;
+      }
+      renderAnswer(questionByIndex);
+    } else {
+      alert("Please select one of the optionce");
+    }
   });
 };
 
-const renderQuestion = (questionByIndex) => {
+const renderAnswer = (questionByIndex) => {
   container.innerHTML = "";
-  const clone = questionComponent.content.cloneNode(true);
+  const clone = answerComponent.content.cloneNode(true);
   container.append(clone);
-  const question = document.querySelector("#question");
-  question.innerText = questionByIndex.question;
-  const answerList = document.querySelector("#answerList");
-
-  for (let answer of questionByIndex.answer) {
-    const cloneAnswer = answerComponent.content.cloneNode(true);
-    const answerField = cloneAnswer.querySelector(".answer");
-    answerField.setAttribute("value", answer);
-    const answerText = cloneAnswer.querySelector(".answerText");
-    answerText.innerText = answer;
-    answerList.append(cloneAnswer);
-  }
-
   const gif = document.querySelector("#gif");
   gif.setAttribute("src", questionByIndex.gif);
-
+  const answer = document.querySelector("#answer");
+  answer.innerText = questionByIndex.correctAnswer;
   const btnNext = document.querySelector("#btnNext");
   btnNext.addEventListener("click", () => {
     onNext();
   });
 };
 
 const onNext = () => {
-  //console.log("clicked here");
-  // const answerField = document.querySelector(".answer");
-  // console.log(answerField);
-  const selectedAnswer = document.querySelector("input[name='answer']:checked");
-  //console.log(selectedAnswer);
-  if (selectedAnswer) {
-    // console.log(selectedAnswer.value);
-    //console.log(questions[questionIndex].correctAnswer);
-    //console.log(questions[questionIndex]);
-    if (selectedAnswer.value === questions[questionIndex].correctAnswer) {
-      score++;
-    }
+  questionIndex++;
 
-    questionIndex++;
-    if (questionIndex < questions.length) {
-      renderQuestionCheck(questions[questionIndex]);
+  if (questionIndex < questions.length) {
+    renderQuestionCheck(questions[questionIndex]);
+  } else {
+    container.innerHTML = "";
+    const clone = scoreComponent.content.cloneNode(true);
+    container.append(clone);
+    const scoreText = document.querySelector(".scoreText");
+    scoreText.innerText = score;
+    const gif = document.querySelector("#gif");
+    if (score > 8) {
+      gif.setAttribute("src", scoreGifs[0].winner1);
+    } else if (score >= 5 && score < 8) {
+      gif.setAttribute("src", scoreGifs[1].winner2);
     } else {
-      container.innerHTML = "";
-      const clone = scoreComponent.content.cloneNode(true);
-      container.append(clone);
-      const scoreText = document.querySelector(".scoreText");
-      scoreText.innerText = score;
-
-      onRestart();
+      gif.setAttribute("src", scoreGifs[2].winner3);
     }
-  } else {
-    alert("Please select one of the optionce");
+
+    onRestart();
   }
 };
 
@@ -171,11 +197,7 @@ const onRestart = () => {
 
 const onCheck = () => {
   const selectedAnswer = document.querySelector("input[name='answer']:checked");
-  //console.log(selectedAnswer);
   if (selectedAnswer) {
-    // console.log(selectedAnswer.value);
-    //console.log(questions[questionIndex].correctAnswer);
-    //console.log(questions[questionIndex]);
     if (selectedAnswer.value === questions[questionIndex].correctAnswer) {
       score++;
     }