Resilient-Labs · xsarahyu · Oct 23, 2023 · Nov 16, 2023 · Nov 17, 2023
diff --git a/README.md b/README.md
@@ -1,22 +1,18 @@
-# 📊 Project: Simple API 2
+# Harry Potter Spells App 🧙🏻‍♂️🪄
 
-### Goal: Display data returned from an api
+### Description
+Welcome to Charms Class! This web application allows you to experience the magic of the Harry Potter universe through learning random spells.
+- <strong>Sorting Ceremony</strong>: Enter your name and click on the sorting hat to discover your wizard identity.
+- <strong>Wand Magic</strong>: After finding out you're a wizard, click on the wand to conjure a random spell.
 
-### How to submit your code for review:
+Check out the app <a href="https://xsarahyu.github.io/simple-api2-bootcamp/">here</a>!
 
-- 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!
+<img src="harry-potter-spells-app.png">
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+### Tech Used
+- HTML
+- CSS
+- JavaScript
+
+### Lessons Learned
+- Animating an icon via Font Awesome - the sorting hat and wand pulsate!
diff --git a/css/harry-p.ttf b/css/harry-p.ttf
diff --git a/css/harry-potter-7.ttf b/css/harry-potter-7.ttf
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,73 @@
+@font-face {
+    font-family: 'Harry P';
+    src: url(harry-p.ttf);
+}
+
+@font-face {
+    font-family: 'HarryPotter7';
+    src: url(harry-potter-7.ttf);
+}
+
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+body {
+    background: url(../images/background.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: white;
+    font-family: HarryPotter7;
+    padding: 3%;
+}
+
+h1 {
+    font-family: 'Harry P';
+    font-size: 6rem;
+    color: #c39a1c;
+    margin-bottom: 2%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#hat, #wand {
+    color: #c39a1c;
+    cursor: pointer;
+}
+
+#yerAWizard, #spellName {
+    padding-bottom: 1rem;
+}
+
+.hidden {
+    display: none;
+}
+    #spellPt1, #spellPt2 {
+        text-align: center;
+        padding-bottom: 4rem;
+    }
+
+    #spellPt2 {
+        background: rgba(0, 0, 0, 0.5);
+        font-size: 1.3vw;
+        margin: 0 20rem;
+        padding: 1.5rem;
+        border-radius: 5px;
+    }
+
+footer {
+    position: fixed;
+    bottom: 1rem;
+    margin: 0 20rem;
+}
+
+    footer p {
+        text-align: center;
+    }
diff --git a/harry-potter-spells-app.png b/harry-potter-spells-app.png
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Harry Potter Spells</title>
+    <script src="https://kit.fontawesome.com/615f7edbdf.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <h1>Welcome to Charms Class</h1>
+
+    <div id="askName">
+        <label for="name">Before we proceed, wha' do they call yeh?</label>
+        <input type="text" id="name" name="name">
+        <i class="fa-solid fa-hat-wizard fa-beat-fade fa-lg" id="hat"></i>
+    </div>
+
+    <h2 id="yerAWizard"></h2>
+
+    <div id="spell">
+        <div id="spellPt1" class="hidden">
+            <span>Click the wand to conjure a random spell:</span>
+            <i class="fa-solid fa-wand-sparkles fa-beat-fade fa-xl" id="wand"></i>
+        </div>
+
+        <div id="spellPt2" class="hidden">
+            <h2 id="spellName"></h2>
+            <p id="spellInfo"></p>
+        </div>
+    </div>
+
+    <footer>
+        <p>In memory of Robbie Coltrane, who will forevermore exist in our hearts as Rubeus Hagrid, a poignant reminder of the magic he brought into our lives.</p>
+    </footer>
+
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,27 @@
+document.querySelector('#hat').addEventListener('click', yerAWizard)
+
+function yerAWizard() {
+    document.querySelector('#askName').classList.add('hidden')
+
+    let name = document.querySelector('input').value
+    document.querySelector('#yerAWizard').innerText = `Yer a wizard, ${name}`
+
+    document.querySelector('#spellPt1').classList.remove('hidden')
+}
+
+document.querySelector('#wand').addEventListener('click', getSpell)
+
+function getSpell() {
+    document.querySelector('#spellPt2').classList.remove('hidden')
+    fetch (`https://hp-api.onrender.com/api/spells`)
+    .then(res => res.json())
+    .then(data => {
+        let spellIndex = Math.floor(Math.random() * 77)
+        document.querySelector('#spellName').innerText = `${data[spellIndex].name}!`
+        document.querySelector('#spellInfo').innerText = data[spellIndex].description
+    })
+
+    .catch(err => {
+        console.log(`error ${err}`)
+    })
+}