diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/.DS_Store differ diff --git a/Dumbledore.png b/Dumbledore.png new file mode 100644 index 00000000..fa9d4cb8 Binary files /dev/null and b/Dumbledore.png differ diff --git a/background__front.mp4 b/background__front.mp4 new file mode 100644 index 00000000..b2c11d40 Binary files /dev/null and b/background__front.mp4 differ diff --git a/index.html b/index.html index e69de29b..ddb01e2f 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + + Wizarding Cards + + + + + + + +
+
+ + +
+

+ Explore
+ Wizarding
+ World! +

+
+ +
+
+
+ +
+
+
Check Character
+
+ + +
+ +
+
+
+ +
+
Book Of Spells
+ +
+ + + + + +
+ + + +
+ +
+
+ + + + + + + diff --git a/main.js b/main.js index e69de29b..8ec551c0 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,181 @@ +const firstSpellsInformationContainer = document.querySelector( + ".spells__container--1" +); +const secondSpellsInformationContainer = document.querySelector( + ".spells__container--2" +); +const characterInformationContainer = + document.querySelector(".character__data"); +const nickNameInformationContainer = document.querySelector(".nick__name"); +const searchContainer = document.querySelector(".search__container"); +const showMoreBtn = document.querySelector(".show__more"); +const showLessBtn = document.querySelector(".show__less"); +const modal = document.querySelector(".modal"); +const overlay = document.querySelector(".overlay"); +const btnCloseModal = document.querySelector(".btn--close-modal"); + +// Page navigation + +document.querySelector(".nav__links").addEventListener("click", function (e) { + e.preventDefault(); + + // Matching strategy + + if (e.target.classList.contains("nav__link")) { + const id = e.target.getAttribute("href"); + document.querySelector(id).scrollIntoView({ behavior: "smooth" }); + } +}); + +// Get information about spells + +window.addEventListener("DOMContentLoaded", (event) => { + // fetch(`https://fedeperin-harry-potter-api-en.herokuapp.com/spells`) + fetch(`https://harry-potter-api-english-production.up.railway.app/spells`) + .then((response) => response.json()) + .then((data) => { + for (let i = 0; i < 72; i++) { + const spellDataResult = data[i]; + + if (i < 12) { + const firstHtmlSpells = ` +
+

${spellDataResult.spell}

+

${spellDataResult.use}

+ +
`; + + firstSpellsInformationContainer.insertAdjacentHTML( + "beforeend", + firstHtmlSpells + ); + } else if (i >= 12) { + const secondHtmlSpells = ` +
+

${spellDataResult.spell}

+

${spellDataResult.use}

+ +
`; + + secondSpellsInformationContainer.insertAdjacentHTML( + "beforeend", + secondHtmlSpells + ); + } + } + }); +}); + +// Show more spells button + +const showMore = function () { + secondSpellsInformationContainer.classList.remove("hidden"); + showMoreBtn.classList.add("hidden"); + showLessBtn.classList.remove("hidden"); +}; + +const showLess = function () { + secondSpellsInformationContainer.classList.add("hidden"); + showMoreBtn.classList.remove("hidden"); + showLessBtn.classList.add("hidden"); +}; + +showMoreBtn.addEventListener("click", showMore); +showLessBtn.addEventListener("click", showLess); + +// Modal Window + +const closeModal = function () { + modal.classList.add("hidden"); + overlay.classList.add("hidden"); + nickNameInformationContainer.textContent = ""; +}; + +btnCloseModal.addEventListener("click", closeModal); +overlay.addEventListener("click", closeModal); + +document.addEventListener("keydown", function (e) { + if (e.key && !modal.classList.contains("hidden")) { + closeModal(); + } +}); + +// Modal Window - nick character help +const nickCharacterHelp = function () { + modal.classList.remove("hidden"); + overlay.classList.remove("hidden"); + + // fetch(`https://fedeperin-harry-potter-api-en.herokuapp.com/characters`) + fetch(`https://harry-potter-api-english-production.up.railway.app/characters`) + .then((response) => response.json()) + .then((data) => { + for (let i = 0; i < 23; i++) { + const nickCharacterHelpData = data[i]; + const nickHtml = ` +

${nickCharacterHelpData.nickname},

+ `; + + nickNameInformationContainer.insertAdjacentHTML("beforeend", nickHtml); + } + }); +}; + +// Get information about Character + +const getInformationNick = function (characterNick) { + // fetch(`https://fedeperin-harry-potter-api-en.herokuapp.com/characters`) + fetch(`https://harry-potter-api-english-production.up.railway.app/characters`) + .then((response) => response.json()) + .then((data) => { + const nickDataResult = data.find( + ({ nickname }) => nickname === `${characterNick}` + ); + + if (nickDataResult === undefined) { + // alert("blad"); + nickCharacterHelp(); + } else { + if (nickDataResult.child.length === 0) { + nickDataResult.child = "NO DATA"; + } + + const html = ` + No_data +
+

Character information:

+

Name: ${nickDataResult.character}

+

House: ${nickDataResult.hogwartsHouse}

+

Child: ${nickDataResult.child}

+

Actor: ${nickDataResult.interpretedBy}

+ +
+ `; + + characterInformationContainer.insertAdjacentHTML("beforeend", html); + } + }); +}; + +getInformationNick("Harry"); + +// Capitalize The First Letter Of Each Word in input__form + +function capitalizeTheFirstLetterOfEachWord(word) { + const separateWord = word.toLowerCase().split(" "); + for (let i = 0; i < separateWord.length; i++) { + separateWord[i] = + separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1); + } + return separateWord.join(" "); +} + +// Action on click + +searchContainer.addEventListener("submit", function (e) { + characterInformationContainer.innerHTML = ""; + e.preventDefault(); + const characterNameFromUser = capitalizeTheFirstLetterOfEachWord( + document.querySelector(".input__form").value + ); + getInformationNick(characterNameFromUser); +}); diff --git a/stars_gold.png b/stars_gold.png new file mode 100644 index 00000000..8f5bd0e8 Binary files /dev/null and b/stars_gold.png differ diff --git a/style.css b/style.css index e69de29b..a874cdff 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,438 @@ +@import url("https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&family=Schoolbell&display=swap"); + +:root { + --color-primary: #f0f0f0; + --color-secondary: #727cd8; + --color-tertiary: #0f0902; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 62.5%; +} + +body { + background-color: var(--color-primary); + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +.nav { + position: absolute; + overflow: hidden; + width: 80%; + z-index: 1; +} + +.links ul li { + display: flex; + float: right; + list-style-type: none; + text-align: center; + font-size: 2.5rem; + text-decoration: none; + color: var(--color-tertiary); + padding: 2rem 2.5rem; + color: var(--color-primary); + font-family: "Schoolbell", cursive; +} + +.links ul li:nth-child(1) { + float: left; +} + +.background__front { + width: 100%; + height: 100vh; + object-fit: cover; + filter: brightness(0.5); + text-align: center; +} + +.header__description { + display: inline-block; + margin-left: auto; + margin-right: auto; + max-width: 90%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--color-tertiary); + filter: brightness(100); +} + +.header__description h1 { + text-align: center; + font-size: 8rem; + color: var(--color-primary); + font-family: "Fontdiner Swanky", cursive; +} + +.header__description a { + margin: 6rem 0 0 0; + font-size: 2.5rem; + cursor: pointer; + transition: all 0.3s; + font-weight: 500; + padding: 1.5rem 3rem; + border: 2px solid var(--color-primary); + border-radius: 30rem; + color: var(--color-primary); + text-decoration: none; + text-align: center; + width: 30rem; +} + +/* Sections */ + +.section { + border-top: 1px solid #ddd; + border-radius: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 0.5rem; + transition: transform 1s, opacity 1s; +} + +.section__title { + margin: 6rem 2rem 12rem 2rem; + font-size: 5rem; + text-align: center; +} + +/* Section --2 */ + +.spells__information { + font-size: 4rem; + border: 1px solid black; + border-radius: 20px; + padding: 2rem; + margin: 2rem; + display: inline-block; + width: 30%; + height: 12rem; + text-align: center; + overflow: hidden; +} + +.spells__information p { + position: relative; + padding: 0.5rem; + top: 20%; + left: 50%; + transform: translate(-50%, -50%); +} + +.use { + font-size: 1.5rem; +} + +.spells__container--1 { + text-align: center; +} + +.spells__container--2 { + text-align: center; +} + +/* Section--1 */ + +.section__container { + z-index: 100; + width: 100%; + text-align: center; +} + +.search__container { + margin-top: 5rem; + padding: 0 2rem 0 2rem; + font-size: 3.5rem; +} + +.search__container button { + display: inline-block; + padding: 0.5rem 1rem; + border: none; + background-color: var(--color-primary); + color: var(--color-secondary); + cursor: pointer; +} + +.search__container button:hover { + color: var(--color-tertiary); +} + +.search__container input { + text-transform: capitalize; + min-width: 50%; + max-width: 70%; + border: none; + border-bottom: 2px solid var(--color-tertiary); + background: transparent; + color: var(--color-secondary); +} + +.search__container input:focus { + outline: none; +} + +.character__data { + display: inline-block; + margin: 0 auto; + font-size: 6rem; + width: 70%; + margin: 5rem 15rem 15rem 15rem; + border-radius: 20px; + box-shadow: 0px 0px 30px -7px rgba(66, 68, 90, 1); +} + +.character__information { + display: inline-block; + text-align: left; + padding: 1.5rem; + color: var(--color-tertiary); + max-width: 50%; +} + +.character__information h1 { + padding: 0.3rem; + text-transform: uppercase; +} + +.character__information p { + padding: 1rem; +} + +.character__image { + float: left; + width: 20rem; + height: 20rem; + background-color: #7561bd; + border-radius: 50%; + margin: 4rem; +} + +.show__btn { + font-size: 3rem; + padding: 1rem; + margin: 4rem; + border: 1px solid black; + border-radius: 20px; +} + +.show__btn:hover { + background-color: var(--color-tertiary); + color: var(--color-primary); + cursor: pointer; +} + +/* Footer */ + +.footer { + padding: 5rem 5rem; + border-top: 1px solid #ddd; + border-radius: 0.5rem; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + background-size: cover; + border-radius: 0.5rem; + transition: transform 1s, opacity 1s; + position: relative; +} + +.footer__img { + max-width: 80%; + max-height: 100%; + z-index: -1; +} + +.footer__img img { + display: inline-block; + display: flex; + max-height: 50%; + position: absolute; + top: 70%; + left: 50%; + transform: translate(-50%, -50%); +} + +.footer__copyright { + text-align: center; + position: absolute; + margin: 5rem 0 0 0; + font-size: 3rem; +} + +.footer__copyright a { + font-size: 3rem; + text-decoration: none; + color: var(--color-secondary); +} + +.links__icons { + font-size: 25rem; + position: absolute; +} + +.fa-twitter { + color: rgb(61, 178, 255); +} + +.fa-github { + color: rgb(41, 41, 41); +} + +.fa-linkedin { + color: rgb(0, 69, 133); +} + +/* Others */ + +.hidden { + display: none; +} + +.return__button { + position: fixed; + top: 90%; + left: 90%; + transform: translate(-50%, -50%); + cursor: pointer; + z-index: 100; + opacity: 0.7; +} + +.fa-chevron-up { + font-size: 5rem; + text-align: center; + width: 5rem; + height: 5rem; + background-color: var(--color-tertiary); + color: var(--color-primary); + border-radius: 1rem; + z-index: 100; +} + +.modal { + position: fixed; + height: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 80%; + background-color: #f3f3f3; + padding: 5rem 6rem; + box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3); + border-radius: 20px; + z-index: 1000; + transition: all 0.5s; + text-align: justify; +} + +.modal h2 { + font-size: 3rem; + padding: 2rem; +} + +.modal p { + font-size: 2rem; + padding: 0.5rem; + display: inline-block; + overflow: hidden; +} + +.btn--close-modal { + font-family: inherit; + color: inherit; + position: absolute; + top: 0.5rem; + right: 2rem; + font-size: 4rem; + cursor: pointer; + border: none; + background: none; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + z-index: 100; + transition: all 0.5s; +} + +/* Responsive - settings */ + +/* -----max-width: 767px-------*/ + +@media all and (max-width: 767px) { + .spells__information { + font-size: 5rem; + width: 80%; + height: 15rem; + } +} + +/* -----max-width: 992px-------*/ +@media all and (max-width: 992px) { + .links ul li { + max-width: 100%; + justify-content: center; + } + + .links ul li:nth-child(1) { + float: none; + } + + .links ul li:nth-child(2) { + float: none; + } + + .header__description { + max-width: 100%; + } + + .header__description h1 { + font-size: 5rem; + } + + .search__container input { + width: 40rem; + } + + .search__container { + margin: 0 0 5rem 0; + padding: 0; + } + + .character__data { + margin: 0; + width: 90%; + } + + .character__information { + max-width: 100%; + margin-bottom: 4rem; + } + + .character__information h1 { + text-align: center; + margin: 2rem; + } + + .character__image { + float: none; + text-align: center; + } +}