About page

jest.config.js

@@ -6,5 +6,6 @@ module.exports = {
   // ...
   moduleNameMapper: {
     '^.+\\.svg$': '<rootDir>/src/scripts/modules/__mocks__/svgMock.js',
+    '^.+\\.jpg$': '<rootDir>/src/scripts/modules/__mocks__/svgMock.js',
   },
 };

src/scripts/index.js

@@ -6,33 +6,41 @@ 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');
 
 linkTags.forEach((tag) => {
   const reGex = /#[\w-]+/g;
   tag.addEventListener('click', async (event) => {
     const pageId = event.target.href.match(reGex)[0];
-    main.innerHTML = '<h1> Pick your Favorite Pokemon! </h1>';
+    main.innerHTML = '';
     if (pageId === '#pokemons') {
+      main.innerHTML = '<h1> Pick your Favorite Pokemon! </h1>';
+      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');

src/scripts/modules/generators.js

@@ -4,21 +4,38 @@ 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')) {
     cardsContainer = document.querySelector('.cardsContainer');
   } 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 <a href="https://pokeapi.co/" target="_blank"> PokéAPI </a> 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 = `
+  <div style="width:100%;height:0;padding-bottom:75%;position:relative;">
+  <iframe src="https://giphy.com/embed/xuXzcHMkuwvf2" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+  </div>
+  `;
+  descriptionContainer.appendChild(pikachu);
+};
+
 export {
   displayPokemons,
   displayLikes,
   displayCounters,
   addMenu,
   displaySeeMoreButton,
+  addAboutSection,
+  displaySpinner,
 };

src/scripts/styles/layout/_grid.scss

@@ -18,6 +18,7 @@ header {
 main {
   grid-area: Main;
   overflow: auto;
+  scroll-behavior: smooth;
 }
 
 footer {

src/scripts/styles/main.scss

@@ -16,3 +16,4 @@
 
 // Pages
 @import 'pages/home';
+@import 'pages/about';

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;
+}

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;

src/template.html

@@ -30,7 +30,8 @@
     <h1> Pick your Favorite Pokemon! </h1>
   </main>
   <footer>
-    <p>Created by <a href="https://github.com/JohnFTitor">Andrés F. Arroyave Naranjo</a> and <a href="https://github.com/carloshs1994">Carlos Herver Solano</a></p>
+    <p>Created by <a href="https://github.com/JohnFTitor" target="_blank" rel="noopener noreferrer">Andrés F. Arroyave Naranjo</a> 
+      and <a href="https://github.com/carloshs1994" target="_blank" rel="noopener noreferrer">Carlos Herver Solano</a></p>
   </footer>
   <section class="popup">
     <span class="popup-close"></span>