diff --git a/README.md b/README.md index 788ab5a..62276c1 100644 --- 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. +- Sorting Ceremony: Enter your name and click on the sorting hat to discover your wizard identity. +- Wand Magic: 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 here! -- 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... -``` +### Tech Used +- HTML +- CSS +- JavaScript + +### Lessons Learned +- Animating an icon via Font Awesome - the sorting hat and wand pulsate! \ No newline at end of file diff --git a/css/harry-p.ttf b/css/harry-p.ttf new file mode 100644 index 0000000..220e69a Binary files /dev/null and b/css/harry-p.ttf differ diff --git a/css/harry-potter-7.ttf b/css/harry-potter-7.ttf new file mode 100644 index 0000000..b1b93fd Binary files /dev/null and b/css/harry-potter-7.ttf differ diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..f6b44eb --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/harry-potter-spells-app.png b/harry-potter-spells-app.png new file mode 100644 index 0000000..232b91a Binary files /dev/null and b/harry-potter-spells-app.png differ diff --git a/images/background.jpg b/images/background.jpg new file mode 100644 index 0000000..36595b6 Binary files /dev/null and b/images/background.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b094674 --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + Harry Potter Spells + + + + +

Welcome to Charms Class

+ +
+ + + +
+ +

+ +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..eaa6ff0 --- /dev/null +++ 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}`) + }) +} \ No newline at end of file