Answer

README.md

@@ -1,22 +1,33 @@
-# 📊 Project: Simple API 1
-
-### Goal: Display data returned from an api
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# 🎯 Truth Be Told — A True/False Trivia Game
+
+A bold, playful trivia game where you pick a **category**, hit **Start**, and decide whether each statement is **True or False**.  
+Built for both **solo thinkers** and **friendly competition**, it brings game-night energy without the timer stress.
+
+[Link to project](https://simple-trivia-api.vercel.app/)  
+![screenshot](img/trivia.png "Truth Be Told — A True/False Trivia Game")
+
+---
+
+## How It’s Made:
+**Tech used:** HTML, CSS, JavaScript  
+
+Truth Be Told fetches True/False questions from the **Open Trivia DB API** and displays them in a clean, vibrant interface.  
+The layout features **8 colorful square category tiles** arranged in two rows of four, bold typography using **Bungee** and **Rubik**, and a simple flow — choose, play, and see if you’re right.
+
+---
+
+## Optimizations
+- Add a score counter or streak tracker.  
+- Include a sound effect or visual “correct/incorrect” animation.  
+- Add category icons for faster visual selection.  
+- Introduce a “Play Again” or “Random Mix” button.  
+- Optional timer mode for competitive play.
+
+---
+
+## Lessons Learned
+- Working with boolean data and rendering questions dynamically.  
+- Designing a grid-based UI that feels balanced on desktop and mobile.  
+- Creating visual cohesion through bold fonts and consistent color.  
+- Even simple interactions can feel exciting with the right design rhythm.
+

css/styles.css

@@ -0,0 +1,197 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 40px;
+    background-color: #111;
+    color: #fff;
+    font-family: 'Rubik', sans-serif;
+    text-align: center;
+}
+
+h2 {
+    font-family: 'Bungee', cursive;
+    font-size: 36px;
+    margin-bottom: 30px;
+    letter-spacing: 1px;
+    color: #ffd166;
+}
+
+/* --- category grid --- */
+#categories {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    justify-content: center;
+    margin: 0 auto 30px auto;
+    max-width: 800px;
+}
+
+#categories button {
+    aspect-ratio: 1 / 1;
+    border: none;
+    border-radius: 12px;
+    font-family: 'Bungee', cursive;
+    color: #111;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 10px;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+#categories button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
+}
+
+#categories button.selected {
+    outline: 3px solid #fff;
+    outline-offset: -3px;
+}
+
+/* tile colors */
+#categories button:nth-child(1) {
+    background-color: #ff5757;
+}
+
+
+#categories button:nth-child(2) {
+    background-color: #ff9f1c;
+}
+
+
+#categories button:nth-child(3) {
+    background-color: #ffd166;
+}
+
+
+#categories button:nth-child(4) {
+    background-color: #06d6a0;
+}
+
+
+#categories button:nth-child(5) {
+    background-color: #118ab2;
+}
+
+
+#categories button:nth-child(6) {
+    background-color: #6c63ff;
+}
+
+
+#categories button:nth-child(7) {
+    background-color: #ef476f;
+}
+
+#categories button:nth-child(8) {
+    background-color: #7bd389;
+}
+
+
+/* --- main buttons --- */
+#startGame {
+    background-color: #ffd166;
+    border: none;
+    border-radius: 999px;
+    color: #111;
+    font-family: 'Bungee', cursive;
+    font-size: 20px;
+    padding: 14px 40px;
+    cursor: pointer;
+    margin-bottom: 30px;
+    transition: background-color 0.15s ease;
+}
+
+#startGame:hover {
+    background-color: #ffb347;
+}
+
+/* --- question area --- */
+#question {
+    margin: 20px auto;
+    font-size: 22px;
+    max-width: 600px;
+    background-color: rgba(255, 255, 255, 0.05);
+    padding: 15px;
+    border-radius: 10px;
+}
+
+/* --- true or false options --- */
+#choices {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+#choices label {
+    background-color: #222;
+    color: #fff;
+    padding: 12px 25px;
+    border-radius: 999px;
+    font-family: 'Bungee', cursive;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+#choices label:hover {
+    background-color: #333;
+}
+
+#choices input[type="radio"] {
+    display: none;
+}
+
+#choices input[type="radio"]:checked+span {
+    background-color: #06d6a0;
+    color: #111;
+}
+
+#feedback {
+    min-height: 20px;
+    font-size: 18px;
+    margin-bottom: 20px;
+}
+
+#submitAnswer,
+#next {
+    background-color: #444;
+    color: #fff;
+    border: none;
+    border-radius: 999px;
+    padding: 10px 20px;
+    font-family: 'Bungee', cursive;
+    cursor: pointer;
+    margin: 0 5px;
+    transition: background-color 0.15s ease;
+}
+
+#submitAnswer:hover,
+#next:hover {
+    background-color: #666;
+}
+
+#submitAnswer:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.hidden {
+    display: none;
+}
+
+
+@media (max-width: 700px) {
+    #categories {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+    }
+
+    #categories button {
+        font-size: 16px;
+    }
+}

index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Rubik:wght@400;600&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+
+<body class="game-wrap">
+    <h2>Truth Be Told</h2>
+
+    <!-- Categories -->
+    <section id="categories">
+        <button data-cat="" class="selected">Any</button>
+        <button data-cat="9">General Knowledge</button>
+        <button data-cat="17">Science & Nature</button>
+        <button data-cat="22">Geography</button>
+        <button data-cat="32">Cartoons & Animations</button>
+        <button data-cat="15">Video Games</button>
+        <button data-cat="20">Mythology</button>
+        <button data-cat="12">Music</button>
+    </section>
+
+    <button id="startGame" class="cta">Start Game</button>
+
+    <h3 id="question"></h3>
+
+    <section id="choices" class="tf">
+        <label class="tf-btn">
+            <input type="radio" name="choice" value="True"> True
+        </label>
+        <label class="tf-btn">
+            <input type="radio" name="choice" value="False"> False
+        </label>
+    </section>
+
+    <p id="feedback"></p>
+    <button id="submitAnswer" disabled class="secondary">Submit</button>
+    <button id="next" class="secondary">Next</button>
+
+    <script src="js/main.js"></script>
+</body>
+
+
+</html>

js/main.js

@@ -0,0 +1,83 @@
+// create a variable to hold the current question from the API
+let currentQ = null;
+
+// create a variable to hold the category the user selects
+let selectedCategory = "";
+
+// saw questions show up as "'s 1940's" and went to Google to see how to fix by decoding the html
+function decode(html) {
+    const t = document.createElement('textarea');
+    t.innerHTML = html;
+    return t.value;
+}
+
+// get all the category buttons from the HTML
+document.querySelectorAll("#categories button").forEach(btn => {
+    // when a button is clicked
+    btn.addEventListener("click", () => {
+        // remove "selected" from all buttons
+        document.querySelectorAll("#categories button").forEach(b => b.classList.remove("selected"));
+        // add "selected" to the category chosen
+        btn.classList.add("selected");
+        // save the data-cat value in to a variable
+        selectedCategory = btn.dataset.cat;
+    });
+});
+
+// create a function to call the trivia API
+function getQuestion() {
+    let url = "https://opentdb.com/api.php?amount=1&type=boolean&difficulty=medium";
+    if (selectedCategory) url += `&category=${selectedCategory}`;
+
+    // fetch data from API 
+    fetch(url)
+        .then(res => res.json())
+        .then(data => {
+            currentQ = data.results[0];
+            document.querySelector("#question").textContent = decode(currentQ.question);
+
+            // reset radio inputs
+            document.querySelectorAll('input[name="choice"]').forEach(r => r.checked = false);
+            document.querySelector("#feedback").textContent = "";
+            document.querySelector("#submitAnswer").disabled = true;
+
+            // hide the Next button until answer is submitted
+            document.querySelector("#next").classList.add("hidden");
+        })
+        .catch(err => {
+            console.error("Error:", err);
+            document.querySelector("#question").textContent = "Error fetching question.";
+        });
+}
+
+// enable submit once a choice is picked
+function enableSubmitIfPicked() {
+    const picked = document.querySelector('input[name="choice"]:checked');
+    document.querySelector("#submitAnswer").disabled = !picked;
+}
+
+document.querySelector("#choices").addEventListener("change", enableSubmitIfPicked);
+
+// handle Submit button click
+document.querySelector("#submitAnswer").addEventListener("click", (e) => {
+    e.preventDefault();
+    const picked = document.querySelector('input[name="choice"]:checked');
+    if (!picked || !currentQ) return;
+
+    // check correctness
+    if (picked.value === currentQ.correct_answer) {
+        document.querySelector("#feedback").textContent = "Correct!";
+    } else {
+        document.querySelector("#feedback").textContent = `Incorrect! Correct answer: ${currentQ.correct_answer}`;
+    }
+
+    // disable submit button and show next
+    document.querySelector("#submitAnswer").disabled = true;
+    document.querySelector("#next").classList.remove("hidden");
+});
+
+// handle Next button click
+document.querySelector("#next").addEventListener("click", getQuestion);
+
+// handle Start Game click
+document.querySelector("#startGame").addEventListener("click", getQuestion);