feat: build fortune telling app workshop

fullstack-cert/typescript-projects/fortune-app/src/index.html

@@ -36,24 +36,16 @@ <h2 class="hidden">Shuffling the cosmic deck...</h2>
 
             <section class="fortune_container hidden">
 
-                <div class="single_card hidden">
-                    <h2>Your Card</h2>
-                    <div class="card_container">
-                        <div class="card_front"> 
-                            <span>16</span>
-                            <span>The Tower</span>
-                            <span>Reversed</span>
-                        </div>
-                    </div>
+                <div class="single_card">
                 </div>
 
 
-                <!-- multipple fortune card  start-->
+                <!-- multiple fortune card  start-->
                 <h2 class="hidden text">Past • Present • Future</h2>
                 <div class="multiple_card hidden"> </div>
-                <!-- multipple fortune card  end -->
+                <!-- multiple fortune card  end -->
 
-                <!-- fortune descriptin container start  -->
+                <!-- fortune description container start  -->
                 <div class="fortune_description">
 
                     <h2> The Devil </h2>
@@ -65,9 +57,9 @@ <h5> Personal transformation, fear of change, averting disaster. </h5>
 
 
                 </div>
-                <!-- fortune descriptin container end-->
+                <!-- fortune description container end-->
 
-                <button  class="btn_revil ">New Reading</button>
+                <button  class="btn_reveal">New Reading</button>
 
             </section>
 

fullstack-cert/typescript-projects/fortune-app/src/script.ts

@@ -1,70 +1,106 @@
-/**
- * TODO: Fetch data from external source
- * Card images should be hosted on CDN
- */
+
+interface Card
+{
+  name: string; 
+  value: number; 
+}
+
+interface Deck
+{
+  cards: Card[]; 
+}
 
 const singleCardBtn = document.getElementById("btn-single-card") as HTMLButtonElement;
 const multipleCardsBtn = document.getElementById("btn-multiple-cards") as HTMLButtonElement;
-const fortune_container = document.getElementsByClassName("fortune_container")[0] as HTMLElement 
-const multiple_card = document.getElementsByClassName("multiple_card")[0] as HTMLElement
-const singleCard = document.getElementsByClassName("single_card")[0] as HTMLElement 
-const newReadingBtn = document.getElementsByClassName("btn_revil")[0] as HTMLButtonElement 
-const text = document.querySelector(".text") as HTMLElement
-console.log(singleCardBtn, multipleCardsBtn, singleCard) 
+const fortuneContainer = document.getElementsByClassName("fortune_container")[0] as HTMLElement;
+const multiple_card = document.getElementsByClassName("multiple_card")[0] as HTMLElement;
+const singleCard = document.getElementsByClassName("single_card")[0] as HTMLElement;
+const newReadingBtn = document.getElementsByClassName("btn_reveal")[0] as HTMLButtonElement;
+const apiURL = "https://cdn.freecodecamp.org/curriculum/typescript/tarot-app";
+
+const dataUrl = apiURL + "/card_data.json"; 
 
+const text = document.querySelector(".text") as HTMLElement;
 
+let cardData: Deck = {cards: []}; 
+
+document.addEventListener("DOMContentLoaded", async function () {
+  // This is the logic for where the card is fetched and parsed
+  const response = await fetch(dataUrl); 
+  cardData = await response.json(); 
+}); 
 
 const HideElement = (...element:HTMLElement[]) => {
 element.forEach(el => {
     el.classList.add("hidden")
 })
 }
 
+const cardTemplate = function (drawingType: string, cardName: string, value: number, isReversed : boolean) {
+  return `
+ <div>
+    <h2>${drawingType}</h2>
+    <div class="card_container ">
+        <div class="card_front ${isReversed ? 'reversed-card' : ""}"> 
+            <span>${value}</span>
+            <span>${cardName}</span>
+            ${isReversed ? "<span>Reversed</span>" : ""}
+        </div>
+    </div>
+    </div>
+  `;
+};
+
 const ShowElement = (...element:HTMLElement[]) =>{
     element.forEach(el => {
         el.classList.remove("hidden")
     })
 }
-// reail card for single card
+// reveal card for single card
 singleCardBtn.addEventListener("click", (e:Event) =>{ 
-       HideElement(singleCardBtn ,multipleCardsBtn,multiple_card,text)
-    ShowElement(singleCard, fortune_container)
-     multiple_card.innerHTML = "";
+  HideElement(singleCardBtn, multipleCardsBtn, multiple_card, text);
+  const isReversed = Math.round(Math.random()) + 1 === 1; 
+  let chosenCardIndex = Math.round(Math.random() * cardData.cards.length - 1);
+  console.log(chosenCardIndex); 
+      let chosenCard = cardData.cards[chosenCardIndex]; 
+
+  ShowElement(singleCard, fortuneContainer); 
+    singleCard.innerHTML = cardTemplate(
+      "Your card",
+      chosenCard.name,
+      chosenCard.value,
+      isReversed
+    );
+    multiple_card.innerHTML = "";
 })
 
 
-// revail card for muiltiple 
-multipleCardsBtn.addEventListener("click", (e:Event) =>{ 
-  ShowElement( multiple_card, fortune_container,text)
-    HideElement(singleCard, singleCardBtn ,multipleCardsBtn)
+// reveal card for multiple 
+multipleCardsBtn.addEventListener("click", (e: Event) => {
+  ShowElement(multiple_card, fortuneContainer, text)
+  HideElement(singleCard, singleCardBtn, multipleCardsBtn)
 
+  /// i am just adding to test how to multiple card look like we will change this later 
+  const cards = ["past", "future", "present"];
 
-/// i am just adding to test how to multipple card look like we will change this later 
-const cards = ["past", "future", "present"];
-
-const MultipleCards = `
-  ${cards.map(itm => `
- <div>
-    <h2>${itm}</h2>
-    <div class="card_container">
-        <div class="card_front"> 
-            <span>16</span>
-            <span>The Tower</span>
-            <span>Reversed</span>
-        </div>
-    </div>
-    </div>
-  `).join('')}`
+  const MultipleCards = `
+  ${cards.map(itm => {
+    // 1 for front, 2 for reversed
+    const isReversed = (Math.round(Math.random()) + 1) === 1;
+    let chosenCardIndex = Math.round(Math.random() * cardData.cards.length - 1); 
+    let chosenCard = cardData.cards[chosenCardIndex]; 
+    return cardTemplate(itm, chosenCard.name, chosenCard.value, isReversed);
+  }).join('')}`
 
-    multiple_card.innerHTML = MultipleCards
+  multiple_card.innerHTML = MultipleCards
 
-})
+});
 
 
-// new Reading button to just clear the revil card
+// new Reading button to just clear the reveal card
 newReadingBtn.addEventListener("click", (e:Event) =>{ 
  ShowElement( singleCardBtn ,multipleCardsBtn)
-    HideElement(singleCard, multiple_card, fortune_container)
+    HideElement(singleCard, multiple_card, fortuneContainer)
 
 })
 

fullstack-cert/typescript-projects/fortune-app/src/style.css

@@ -67,8 +67,8 @@ h2{
     font-weight:700;
     font-size:1.75rem;
     margin:2rem 0;
-
 }
+
 h6{
     color:var(--accent-secondary);
     font-size:1.8rem;
@@ -143,7 +143,7 @@ h5{
     background-image:linear-gradient(to right, var(--gradient-cosmic-to))
 }
 
-.btn_revil{
+.btn_reveal{
     color: var(--text-dark);
     font-weight: 500;
     font-size: .875rem;
@@ -160,7 +160,7 @@ h5{
     margin:1rem;
 }
 
-.btn_revil:hover{
+.btn_reveal:hover{
     background-color:var(--gradient-gold-from);
 }
 
@@ -192,10 +192,15 @@ h5{
     color:var(--accent-light-gold);
     cursor:pointer;
     z-index:1;
-  transform:rotate(180deg);
- transition: transform 0.4s ease;
 }
-.card_front:hover{
+
+.reversed-card
+{
+    transform:rotate(180deg);
+  transition: transform 0.4s ease;
+}
+
+.reversed-card:hover{
   transform:rotate(0deg) translateY(-4%);
 }