feat: added animations

brysah · Oct 31, 2023 · 2da6f53 · 2da6f53
1 parent 8e997f6
commit 2da6f53
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 11 deletions.
diff --git a/game-result.html b/game-result.html
@@ -33,7 +33,7 @@
 
     <section class="s-result">
         <div class="container">
-            <div class="title">
+            <div class="title animate__animated animate__tada">
                 <h1 class="green" id="headline">where the music</h1>
                 <h1 id="message">magic happens!</h1>
             </div> 

diff --git a/game-setting.html b/game-setting.html
@@ -14,7 +14,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <title>GuessTheVerse</title>
     <link rel="stylesheet" href="./css/main.css">
 
@@ -28,7 +29,7 @@
     </header>
     <section class="s-setting">
         <div class="container">
-            <div class="title"><img src="./img/choose.png" alt="Choose your favorite artist">
+            <div class="title animate__animated animate__heartBeat"><img src="./img/choose.png" alt="Choose your favorite artist">
             </div>
             <form>
                 <label for="artist" class="search-label">

diff --git a/game.html b/game.html
@@ -37,16 +37,16 @@
             </div>
             <div class="thin-line"></div>
             <div class="game-content">
-                <div class="artist-info">
+                <div class="artist-info animate__animated animate__flipInY">
                     <img src="" class="artist-img">
                 </div>
                 <div class="questions">
                     <h3 class="lyrics">Loading lyric...</h3>
                     <div class="answers">
-                        <button class="option a">A) </button>
-                        <button class="option b">B) </button>
-                        <button class="option c">C) </button>
-                        <button class="option d">D) </button>
+                        <button class="option a animate__animated animate__bounceInLeft">A) </button>
+                        <button class="option b animate__animated animate__bounceInRight">B) </button>
+                        <button class="option c animate__animated animate__bounceInLeft">C) </button>
+                        <button class="option d animate__animated animate__bounceInRight">D) </button>
                     </div>
                 </div>
                 <div class="next-question">

diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <title>GuessTheVerse</title>
     <link rel="stylesheet" href="./css/main.css">
 
@@ -33,7 +33,7 @@
 
         <section class="s-welcome">
             <div class="container">
-                <div class="title">
+                <div class="title animate__animated animate__tada">
                     <h1 class="yellow">where the music</h1>
                     <h1>magic happens!</h1>
                 </div>

diff --git a/js/game.js b/js/game.js
@@ -59,9 +59,9 @@ nextQuestion.addEventListener('click', () => {
             localStorage.setItem('question', question);
             setTimeout(refresh, 3000);
         } else {
-            setTimeout(refresh, 3000);
             localStorage.setItem('question', 0);
             localStorage.setItem('prevSongs', '');
+            setTimeout(refresh, 3000);
             window.location.href = 'game-result.html';
         }
     }