freeCodeCamp · jdwilkin4 · Sep 2, 2025 · Jul 31, 2025 · Jul 31, 2025 · Aug 3, 2025
diff --git a/fullstack-cert/typescript-projects/fortune-app/.gitignore b/fullstack-cert/typescript-projects/fortune-app/.gitignore
@@ -0,0 +1,4 @@
+.parcel-cache/
+dist/
+node_modules/
+✨ 
diff --git a/fullstack-cert/typescript-projects/fortune-app/.parcelrc b/fullstack-cert/typescript-projects/fortune-app/.parcelrc
@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+  }
+}
diff --git a/fullstack-cert/typescript-projects/fortune-app/package.json b/fullstack-cert/typescript-projects/fortune-app/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "parcel-vanilla-starter",
+  "private": true,
+  "version": "0.0.0",
+  "source": "src/index.html",
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@parcel/config-default": "2.15.4",
+    "@parcel/transformer-typescript-tsc": "2.15.4"
+  },
+  "devDependencies": {
+    "parcel": "2.15.4"
+  }
+}
diff --git a/fullstack-cert/typescript-projects/fortune-app/pnpm-lock.yaml b/fullstack-cert/typescript-projects/fortune-app/pnpm-lock.yaml
diff --git a/fullstack-cert/typescript-projects/fortune-app/pnpm-workspace.yaml b/fullstack-cert/typescript-projects/fortune-app/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - '@swc/core'
+  - lmdb
+  - msgpackr-extract
diff --git a/fullstack-cert/typescript-projects/fortune-app/src/index.html b/fullstack-cert/typescript-projects/fortune-app/src/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Fortune Telling App</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <main id="main_container">
+
+            <!-- title start  -->
+            <div>
+                <h1>MyStic Tarot</h1>
+                <h6>Discover the wisdom of the cards and unveil the mysteris of your path</h6>
+            </div>
+            <!-- title start end -->
+
+
+            <!-- buttons start -->
+            <div  id="btn_title_container">
+
+
+                <!-- we will replace this title when card is being fetch  -->
+                <div class="title_wrapper">
+                    <h2>Choose Your Reading</h2>
+                    <h2 class="hidden">Shuffling the cosmic deck...</h2>
+                </div>
+
+                <div class="btn_wrapper">
+                    <button class="btn btn_singleCard" id="btn-single-card">Single Card Reading </button>
+                    <button class="btn btn_threeCard" id="btn-multiple-cards">Three Card Spread</button>
+                </div>
+            </div>
+            <!-- buttons end  -->
+
+            <section class="fortune_container hidden">
+
+                <div class="single_card">
+                </div>
+
+
+                <!-- multiple fortune card  start-->
+                <h2 class="hidden text">Past • Present • Future</h2>
+                <div class="multiple_card hidden"> </div>
+                <!-- multiple fortune card  end -->
+
+                <!-- fortune description container start  -->
+                <div class="fortune_description">
+
+                    <h2> The Devil </h2>
+                    <h5> Personal transformation, fear of change, averting disaster. </h5>
+
+                    <div class="description_wrapper"> 
+                        <span>Description:</span>
+                        <p> The High Priestess sits between two pillars, guarding the threshold to the unconscious mind. She represents intuitive wisdom and the mysteries that lie beneath the surface of consciousness. </p> </div>
+
+
+                </div>
+                <!-- fortune description container end-->
+
+                <button  class="btn_reveal">New Reading</button>
+
+            </section>
+
+
+        </main>
+        <script src="script.ts"/>
+</body>
+</html>
diff --git a/fullstack-cert/typescript-projects/fortune-app/src/script.ts b/fullstack-cert/typescript-projects/fortune-app/src/script.ts
@@ -0,0 +1,107 @@
+
+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 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")
+    })
+}
+// reveal card for single card
+singleCardBtn.addEventListener("click", (e:Event) =>{ 
+  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 = "";
+})
+
+
+// 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"];
+
+  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
+
+});
+
+
+// new Reading button to just clear the reveal card
+newReadingBtn.addEventListener("click", (e:Event) =>{ 
+ ShowElement( singleCardBtn ,multipleCardsBtn)
+    HideElement(singleCard, multiple_card, fortuneContainer)
+
+})
+
+