Merge pull request #31 from carloshs1994/home-page-styling

Home page styling

src/scripts/index.js

@@ -1,11 +1,35 @@
 // Include your code here
 import './styles/main.scss';
-import { displayPokemons, displayLikes, displayCounters } from './modules/generators.js';
+import {
+  displayPokemons,
+  displayLikes,
+  displayCounters,
+  addMenu,
+} from './modules/generators.js';
 import displayPopup from './modules/popup.js';
 
 window.onload = async () => {
   await displayPokemons();
   await displayLikes();
   displayPopup();
   displayCounters();
+  addMenu();
 };
+
+const nav = document.querySelector('.nav');
+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 = '';
+    if (pageId === '#pokemons') {
+      await displayPokemons();
+      await displayLikes();
+      displayCounters();
+    }
+    const navChild = document.querySelector('.nav-child');
+    navChild.setAttribute('data-active', 'false');
+  });
+});

src/scripts/modules/generators.js

@@ -1,6 +1,7 @@
 import { getPokemons, getLikes, addLike } from './APIhandling.js';
-import Heart from '../../assets/icons/heart.svg';
 import itemsCounter from './util.js';
+import Menu from '../../assets/icons/hamburger.svg';
+import Close from '../../assets/icons/close.svg';
 
 const numRegex = /\d+/;
 // Display Home page
@@ -22,6 +23,7 @@ const displayPokemons = async () => {
 
     const image = new Image();
     image.src = pokemon.sprites.other.dream_world.front_default;
+    image.alt = name;
     image.classList.add('pokemon');
     card.appendChild(image);
 
@@ -33,8 +35,8 @@ const displayPokemons = async () => {
 
     const buttonHeart = document.createElement('button');
     buttonHeart.classList.add('heart');
-    const heart = new Image();
-    heart.src = Heart;
+    const heart = document.createElement('div');
+    heart.classList.add('heart-shape');
     buttonHeart.appendChild(heart);
     info.appendChild(buttonHeart);
 
@@ -45,9 +47,10 @@ const displayPokemons = async () => {
     likes.textContent = '0 Likes';
 
     buttonHeart.addEventListener('click', async () => {
-      await addLike(`pokemon-${id}`);
+      heart.classList.add('heart-shape-active');
       const numberOflikes = likes.textContent.match(numRegex)[0];
       likes.textContent = `${+numberOflikes + 1} Likes`;
+      await addLike(`pokemon-${id}`);
     }, { once: true });
 
     card.appendChild(likes);
@@ -78,4 +81,33 @@ const displayCounters = () => {
   });
 };
 
-export { displayPokemons, displayLikes, displayCounters };
+const addMenu = () => {
+  const menu = document.querySelector('.menu');
+  const menuImage = new Image();
+  menuImage.src = Menu;
+  menuImage.alt = 'Menu Button';
+
+  menu.appendChild(menuImage);
+
+  const close = document.querySelector('.close');
+  const closeImage = new Image();
+  closeImage.src = Close;
+  closeImage.alt = 'Close Button';
+
+  close.appendChild(closeImage);
+
+  const navChild = document.querySelector('.nav-child');
+  menu.addEventListener('click', () => {
+    navChild.setAttribute('data-active', 'true');
+  });
+  close.addEventListener('click', () => {
+    navChild.setAttribute('data-active', 'false');
+  });
+};
+
+export {
+  displayPokemons,
+  displayLikes,
+  displayCounters,
+  addMenu,
+};

src/scripts/styles/abstracts/_mixins.scss

@@ -1 +1,3 @@
-// mixins
+@mixin for-small-devices {
+  @media screen and (max-width: 750px) { @content; }
+}

src/scripts/styles/abstracts/_variables.scss

@@ -1,4 +1,8 @@
-// variables
+$gray-dark: rgb(59, 59, 59);
+$red-dark: rgb(105, 29, 29);
+$red-medium: rgb(119, 11, 11);
+$red-light: rgb(255, 88, 88);
+$gray-light: rgb(116, 116, 116);
 $green-light: rgb(127, 255, 0);
 $blue-light-transparent: rgba(36, 220, 253, 0.95);
 $black-custom: rgb(51, 51, 51);

src/scripts/styles/components/_buttons.scss

@@ -1,3 +1,25 @@
+.menu {
+  img {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.menuParent {
+  display: none;
+
+  @include for-small-devices {
+    display: block;
+  }
+}
+
+.close {
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 button {
   font-size: 2rem;
   border: 2px solid black;
@@ -18,7 +40,15 @@ button {
   }
 }
 
-.heart {
+.heart,
+.menu,
+.close {
   padding: 0;
   border: none;
+  background-color: transparent;
+  box-shadow: none;
+
+  &:hover {
+    background-color: transparent;
+  }
 }

src/scripts/styles/layout/_footer.scss

@@ -2,10 +2,17 @@
 footer {
   border: 1px solid black;
   padding: 3rem;
+  background-color: $orange-light;
 
   p,
   a {
     font-family: 'Roboto Mono', monospace;
     font-size: 2rem;
+    transition: padding 0.2s ease-in-out;
+  }
+
+  a:hover {
+    color: $red-medium;
+    padding: 3px;
   }
 }

src/scripts/styles/layout/_grid.scss

@@ -23,3 +23,15 @@ main {
 footer {
   grid-area: Footer;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: $gray-dark;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $gray-light;
+}

src/scripts/styles/layout/_navigation.scss

@@ -5,6 +5,7 @@
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
+  background-color: $orange-light;
 
   &-parent {
     border: 1px solid black;
@@ -13,5 +14,47 @@
 
   &-child {
     gap: 3rem;
+
+    .closeButton {
+      display: none;
+    }
+
+    @include for-small-devices {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 50px;
+      gap: 5rem;
+      z-index: 2;
+      background-color: $orange-light;
+      transform: translateX(-100%);
+      transition: transform 0.4s ease-in-out;
+
+      .closeButton {
+        display: block;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+      }
+
+      &[data-active="true"] {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  a {
+    transition: padding 0.2s ease-in-out;
+  }
+
+  a:hover {
+    display: block;
+    color: $red-medium;
+    padding: 3px;
   }
 }

src/scripts/styles/pages/_home.scss

@@ -17,23 +17,32 @@ main {
   flex-direction: column;
   align-items: center;
   gap: 30px;
-  border: 1px solid black;
+  border: 5px solid $gray-dark;
   padding: 20px;
+  box-shadow: 10px 10px 5px 5px $red-dark;
+  transition: transform 0.2s ease-in;
 
   h2 {
     text-transform: capitalize;
+    font-weight: 600;
   }
 
   p {
     align-self: flex-end;
+    font-weight: 600;
   }
 }
 
+.card:hover {
+  transform: scale(1.1);
+}
+
 .pokemon {
-  border: 2px solid black;
+  border: 3px solid $gray-dark;
   border-radius: 5%;
   width: 100%;
   height: 300px;
+  padding: 10px;
 }
 
 .popup {
@@ -219,9 +228,45 @@ main {
 .info {
   display: flex;
   gap: 30px;
+}
 
-  img {
-    width: 32px;
-    height: 32px;
+.heart-shape {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  background-color: $gray-dark;
+  transform: rotate(45deg);
+
+  &-active {
+    background-color: $red-light;
   }
 }
+
+.heart-shape::before,
+.heart-shape::after,
+.heart-shape-active::before,
+.heart-shape-active::after {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  content: '';
+  border-radius: 50%;
+  background-color: $gray-dark;
+}
+
+.heart-shape::before,
+.heart-shape-active::before {
+  bottom: 0;
+  left: -12px;
+}
+
+.heart-shape::after,
+.heart-shape-active::after {
+  top: -12px;
+  right: 0;
+}
+
+.heart-shape-active::before,
+.heart-shape-active::after {
+  background-color: $red-light;
+}