diff --git a/jest.config.js b/jest.config.js index c9dee3f..31af694 100644 --- a/jest.config.js +++ b/jest.config.js @@ -6,5 +6,6 @@ module.exports = { // ... moduleNameMapper: { '^.+\\.svg$': '/src/scripts/modules/__mocks__/svgMock.js', + '^.+\\.jpg$': '/src/scripts/modules/__mocks__/svgMock.js', }, }; \ No newline at end of file diff --git a/src/assets/images/sadPokemon.jpg b/src/assets/images/sadPokemon.jpg new file mode 100644 index 0000000..a6b893b Binary files /dev/null and b/src/assets/images/sadPokemon.jpg differ diff --git a/src/scripts/index.js b/src/scripts/index.js index 563fda6..14e346a 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -6,19 +6,23 @@ import { displayCounters, addMenu, displaySeeMoreButton, + addAboutSection, + displaySpinner, } from './modules/generators.js'; import displayPopup from './modules/popup.js'; +displaySpinner(); +addMenu(); + window.onload = async () => { await displayPokemons(20); await displayLikes(); displaySeeMoreButton(); displayPopup(); displayCounters(); - addMenu(); }; -const nav = document.querySelector('.nav'); +const nav = document.querySelector('.nav-child'); const main = document.querySelector('main'); const linkTags = nav.querySelectorAll('a'); @@ -26,13 +30,17 @@ linkTags.forEach((tag) => { const reGex = /#[\w-]+/g; tag.addEventListener('click', async (event) => { const pageId = event.target.href.match(reGex)[0]; - main.innerHTML = '

Pick your Favorite Pokemon!

'; + main.innerHTML = ''; if (pageId === '#pokemons') { + main.innerHTML = '

Pick your Favorite Pokemon!

'; + displaySpinner(); await displayPokemons(20); await displayLikes(); displaySeeMoreButton(); displayPopup(); displayCounters(); + } else if (pageId === '#about') { + addAboutSection(); } const navChild = document.querySelector('.nav-child'); navChild.setAttribute('data-active', 'false'); diff --git a/src/scripts/modules/generators.js b/src/scripts/modules/generators.js index 5cd2e00..83464f8 100644 --- a/src/scripts/modules/generators.js +++ b/src/scripts/modules/generators.js @@ -4,14 +4,30 @@ import Menu from '../../assets/icons/hamburger.svg'; import Close from '../../assets/icons/close.svg'; import displayPopup from './popup.js'; import PokeLogo from '../../assets/icons/pokeLogo.svg'; +import SadPokemon from '../../assets/images/sadPokemon.jpg'; const numRegex = /\d+/; // Display Home page +const displaySpinner = () => { + const main = document.querySelector('main'); + const pokeLogo = new Image(); + pokeLogo.src = PokeLogo; + pokeLogo.classList.add('spinner'); + main.appendChild(pokeLogo); +}; + const displayPokemons = async (numberOfPokemons) => { // Array of pokemons const startingIndex = itemsCounter(); const pokemons = await getPokemons(startingIndex, numberOfPokemons); const main = document.querySelector('main'); + + // Delete Spinner + const spinner = main.querySelector('.spinner'); + if (spinner) { + main.removeChild(spinner); + } + let cardsContainer; if (document.querySelector('.cardsContainer')) { @@ -19,6 +35,7 @@ const displayPokemons = async (numberOfPokemons) => { } else { cardsContainer = document.createElement('ul'); cardsContainer.classList.add('cardsContainer'); + cardsContainer.id = 'pokemons'; main.appendChild(cardsContainer); } @@ -134,10 +151,86 @@ const displaySeeMoreButton = () => { }); }; +const generateDescription = (text, parent) => { + const description = document.createElement('p'); + description.classList.add('description'); + description.textContent = text; + parent.appendChild(description); + return description; +}; + +// Display About Page +const addAboutSection = () => { + const main = document.querySelector('main'); + const aboutSection = document.createElement('section'); + aboutSection.classList.add('about'); + main.appendChild(aboutSection); + + const h1 = document.createElement('h1'); + h1.textContent = '"Choose your Pokemon" initiative'; + aboutSection.appendChild(h1); + + const imgContainer = document.createElement('div'); + imgContainer.classList.add('sadPokemon'); + const sadPokemon = new Image(); + sadPokemon.src = SadPokemon; + sadPokemon.alt = 'Three pokemon crying'; + imgContainer.appendChild(sadPokemon); + aboutSection.appendChild(imgContainer); + + const h2 = document.createElement('h2'); + h2.textContent = 'What are we?'; + aboutSection.appendChild(h2); + + const descriptionContainer = document.createElement('div'); + descriptionContainer.classList.add('description-container'); + aboutSection.appendChild(descriptionContainer); + + generateDescription( + `Nowadays internet has become the most useful tool around the world. + It has allowed people to connect in extensive manners. Following the trends + Pokemon species started to be interested in the web world and have tried, + without success, to get attention from the outside world. Why? Because not being human + forbids them to create an Instagram account to publish photos. This is a crime. + You can see how sad they are above. + `, descriptionContainer, + ); + + generateDescription( + `"Choose your Pokemon" is a movement that aims to give Pokemon the love they + deserve. It holds a list of up to 500 Pokemons waiting to receive likes and lovely comments. + Go. Don't hesitate. Go and change their faces to smiley Pokemons.`, descriptionContainer, + ); + + generateDescription( + `If you want to support this movement, it's not like you should donate 100 BTC or anything. + They would love it though.`, descriptionContainer, + ); + + const note = generateDescription('', descriptionContainer); + note.innerHTML = ` + Note: This is just an exercise meant to learn API fetching, Testing, and JavaScript in general. + No donations or something like that (We include this just in case). Recognition is important so + definitely go and check PokéAPI if you're interested in fetching this and + even more data about Pokemon. They've done an incredible job. + `; + note.classList.add('note'); + + const pikachu = document.createElement('div'); + pikachu.innerHTML = ` +
+ +
+ `; + descriptionContainer.appendChild(pikachu); +}; + export { displayPokemons, displayLikes, displayCounters, addMenu, displaySeeMoreButton, + addAboutSection, + displaySpinner, }; \ No newline at end of file diff --git a/src/scripts/styles/layout/_grid.scss b/src/scripts/styles/layout/_grid.scss index 1ba3296..7083bb9 100644 --- a/src/scripts/styles/layout/_grid.scss +++ b/src/scripts/styles/layout/_grid.scss @@ -18,6 +18,7 @@ header { main { grid-area: Main; overflow: auto; + scroll-behavior: smooth; } footer { diff --git a/src/scripts/styles/main.scss b/src/scripts/styles/main.scss index 08385c0..64ffca5 100644 --- a/src/scripts/styles/main.scss +++ b/src/scripts/styles/main.scss @@ -16,3 +16,4 @@ // Pages @import 'pages/home'; +@import 'pages/about'; diff --git a/src/scripts/styles/pages/_about.scss b/src/scripts/styles/pages/_about.scss new file mode 100644 index 0000000..9bb52a4 --- /dev/null +++ b/src/scripts/styles/pages/_about.scss @@ -0,0 +1,56 @@ +.about { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Roboto', sans-serif; + + h1 { + padding: 50px; + font-weight: bold; + } + + h2 { + font-size: 3rem; + font-weight: bold; + padding: 30px; + } +} + +.sadPokemon { + position: relative; + width: 100%; + height: 50vh; + border-top: 3px solid black; + border-bottom: 3px solid black; + + img { + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + object-position: left; + } +} + +.description-container { + width: 70%; + margin-bottom: 50px; + + @include for-small-devices { + width: 100%; + } +} + +.description { + padding: 20px; + font-size: 2.5rem; + + a { + font-size: 2.5rem; + color: $red-light; + } +} + +.note { + font-style: italic; +} diff --git a/src/scripts/styles/pages/_home.scss b/src/scripts/styles/pages/_home.scss index 726d027..8d493cd 100644 --- a/src/scripts/styles/pages/_home.scss +++ b/src/scripts/styles/pages/_home.scss @@ -1,3 +1,34 @@ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 25% { + transform: rotate(90deg); + } + + 50% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.spinner { + position: absolute; + max-width: 350px; + width: 50%; + left: 38%; + top: 250px; + animation: 0.8s linear 0s infinite spin; + + @include for-small-devices { + left: 25vw; + } +} + main { h1 { text-align: center; diff --git a/src/template.html b/src/template.html index 54d4d0a..53e38c3 100644 --- a/src/template.html +++ b/src/template.html @@ -30,7 +30,8 @@

Pick your Favorite Pokemon!