Details Popup Window

.github/workflows/linters.yml

@@ -18,20 +18,6 @@ jobs:
         run: npm install -g @lhci/cli@0.11.x
       - name: Lighthouse Report
         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
-  webhint:
-    name: Webhint
-    runs-on: ubuntu-22.04
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "18.x"
-      - name: Setup Webhint
-        run: |
-          npm install --save-dev hint@7.x
-          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
-      - name: Webhint Report
-        run: npx hint .
   stylelint:
     name: Stylelint
     runs-on: ubuntu-22.04

assets/css/style.css

@@ -137,6 +137,10 @@ a {
   display: flex !important;
 }
 
+.scrolling {
+  overflow: hidden;
+}
+
 .wrapper {
   overflow: hidden;
   padding: 0 24px;
@@ -190,7 +194,8 @@ a {
   display: none;
 }
 
-.header-menu-links button {
+.header-menu-links button,
+.works-popup-container button {
   width: 40px;
   height: 40px;
   margin: 4px 0;
@@ -267,7 +272,8 @@ a {
 }
 
 .works-grid-banner img,
-.works-grid-card img {
+.works-grid-card img,
+.works-popup-container img {
   width: 100%;
   display: block;
 }
@@ -288,13 +294,15 @@ a {
   font: 1rem/1.5rem var(--primary-font-regular);
 }
 
-.works-grid-flex ul {
+.works-grid-flex ul,
+.works-popup-container ul {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
 }
 
-.works-grid-flex li {
+.works-grid-flex li,
+.works-popup-container li {
   padding: 10px 12px;
   font: 0.9375rem/1.25rem var(--primary-font-medium);
   border: 1px solid #8993a4;
@@ -332,6 +340,86 @@ a {
   margin-top: 10px;
 }
 
+.works-popup {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  inset-inline: 0;
+  z-index: 999;
+  display: none;
+  padding: 16px;
+  overflow-y: scroll;
+  flex-direction: column;
+  background-color: rgba(151, 148, 147, 0.5);
+  backdrop-filter: blur(5px);
+}
+
+.works-popup-container {
+  position: relative;
+  padding: 16px;
+  background-color: var(--bright-color);
+}
+
+.works-popup-container h3 {
+  color: #172b4d;
+  padding-inline-end: 40px;
+  font: 2rem/2.75rem var(--tertiary-font-bold);
+  margin-bottom: 50px;
+}
+
+.works-popup-container button {
+  cursor: pointer;
+  position: absolute;
+  top: 16px;
+  inset-inline-end: 16px;
+}
+
+.works-popup-container ul {
+  gap: 8px;
+}
+
+.works-popup-container li {
+  color: #3c3a39;
+  border-color: #979493;
+  font: 0.8125rem/1rem var(--quaternary-font-regular);
+}
+
+.works-popup-container img {
+  margin: 24px 0;
+}
+
+.works-popup-container-flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: space-between;
+}
+
+.works-popup-container-flex p {
+  color: #344563;
+  font: 1rem/1.5rem var(--primary-font-regular);
+}
+
+.works-popup-container-flex .button {
+  display: flex;
+  gap: 10px;
+  overflow: hidden;
+  align-content: center;
+  justify-content: space-between;
+}
+
+.works-popup-container-flex span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.works-popup-container-flex img {
+  width: 18px;
+  filter: invert(100%) sepia(0%) saturate(7385%) hue-rotate(133deg) brightness(123%) contrast(119%);
+  margin: 0;
+}
+
 .about {
   background-color: var(--backgrounds-color);
 }
@@ -455,7 +543,8 @@ a {
     background-color: #3e3c3c;
   }
 
-  .wrapper {
+  .wrapper,
+  .works-popup-container {
     max-width: 1200px;
     padding: 0 60px;
     margin: auto;
@@ -611,6 +700,51 @@ a {
     align-self: stretch;
   }
 
+  .works-popup-container {
+    padding: 24px;
+  }
+
+  .works-popup-container h3 {
+    font-family: var(--secondary-font-regular);
+    margin: 0;
+  }
+
+  .works-popup-container button {
+    top: 24px;
+    inset-inline-end: 24px;
+  }
+
+  .works-popup-container ul {
+    margin: 12px 0 40px;
+  }
+
+  .works-grid-flex li {
+    font: 0.9375rem/1.25rem var(--quaternary-font-regular);
+  }
+
+  .works-popup-container div {
+    display: flex;
+    gap: 25px;
+  }
+
+  .works-popup-container img {
+    width: 60%;
+    margin: 0;
+  }
+
+  .works-popup-container-flex {
+    justify-content: flex-start;
+    align-content: space-between;
+  }
+
+  .works-popup-container-flex p {
+    line-height: 1.875rem;
+  }
+
+  .works-popup-container-flex img {
+    width: auto;
+  }
+
   .about-banner {
     gap: 24px;
     padding: 139px 0 130px;
@@ -665,7 +799,8 @@ a {
   }
 
   .socials img:hover,
-  .header-menu-links img:hover {
+  .header-menu-links img:hover,
+  .works-popup-container-flex .button:hover img {
     filter: invert(47%) sepia(12%) saturate(7477%) hue-rotate(355deg) brightness(89%) contrast(118%);
   }
 

assets/js/script.js

@@ -1,8 +1,125 @@
+const worksGrid = document.querySelector('.works-grid');
+const worksPopup = document.querySelector('.works-popup');
 const headerMenu = document.querySelector('.header-menu-links');
 const headerButton = document.querySelector('.header-menu-button');
 const headerlinks = Array.from(document.querySelectorAll('.header-menu-links li'));
 const pageSections = Array.from(document.querySelectorAll('#works, #about, #contact'));
+const popupTitle = document.querySelector('.works-popup-container h3');
+const popupImage = document.querySelector('.works-popup-container img');
+const popupClose = document.querySelector('.works-popup-container button');
+const popupDescription = document.querySelector('.works-popup-container p');
+const popupTechnologies = document.querySelector('.works-popup-container ul');
+const popupButtons = document.querySelectorAll('.works-popup-container .button');
+const projects = [
+  {
+    id: '1',
+    image: 'assets/img/works.png',
+    title: 'Multi-Post Stories',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard dummy text ever since the 1500s.',
+    technologies: ['CSS', 'HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+  {
+    id: '2',
+    image: 'assets/img/project.png',
+    title: 'Profesional Art Printing Data',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard.',
+    technologies: ['HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+  {
+    id: '3',
+    image: 'assets/img/project.png',
+    title: 'Data Dashboard Healthcare',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard.',
+    technologies: ['HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+  {
+    id: '4',
+    image: 'assets/img/project.png',
+    title: 'Website Portfolio',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard.',
+    technologies: ['HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+  {
+    id: '5',
+    image: 'assets/img/project.png',
+    title: 'Profesional Art Printing Data',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard.',
+    technologies: ['HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+  {
+    id: '6',
+    image: 'assets/img/project.png',
+    title: 'Data Dashboard Healthcare',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard.',
+    technologies: ['HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+  {
+    id: '7',
+    image: 'assets/img/project.png',
+    title: 'Website Portfolio',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required. Has been the industry\'s standard.',
+    technologies: ['HTML', 'BootStrap', 'Ruby'],
+    source: '#',
+    live: '#',
+  },
+];
+function fillGrid() {
+  const fragment = new DocumentFragment();
+  projects.forEach((project, index) => {
+    const article = document.createElement('article');
+    if (index === 0) {
+      article.className = 'works-grid-banner';
+    } else {
+      article.className = 'works-grid-card';
+    }
+    let articelHtml = `<img src="${project.image}" alt="${project.title}" />`;
+    articelHtml += '<div class="works-grid-flex">';
+    articelHtml += `<h3>${project.title}</h3>`;
+    articelHtml += `<p>${project.description}</p>`;
+    articelHtml += `<ul>${project.technologies.map((technology) => `<li>${technology}</li>`).join('')}</ul>`;
+    articelHtml += `<button id="${project.id}" class="button" type="button">See Project</button>`;
+    articelHtml += '</div>';
+    article.innerHTML = articelHtml;
+    fragment.appendChild(article);
+  });
+  worksGrid.appendChild(fragment);
+}
+function fillPopup(project) {
+  popupImage.src = project.image;
+  popupTitle.textContent = project.title;
+  popupDescription.textContent = project.description;
+  popupTechnologies.innerHTML = project.technologies.map((technology) => `<li>${technology}</li>`).join('');
+  popupButtons[0].setAttribute('href', project.live);
+  popupButtons[1].setAttribute('href', project.source);
+}
+function openPopup(event) {
+  if (event.target.id !== '') {
+    const project = projects.find((project) => project.id === event.target.id);
+    if (project !== undefined) {
+      fillPopup(project);
+      worksPopup.classList.add('visibility');
+      document.body.classList.add('scrolling');
+    }
+  }
+}
+function closePopup() {
+  worksPopup.classList.remove('visibility');
+  document.body.classList.remove('scrolling');
+}
 function toggleMenu() {
+  document.body.classList.toggle('scrolling');
   headerMenu.classList.toggle('visibility');
 }
 function pageScroll() {
@@ -14,8 +131,11 @@ function pageScroll() {
     }
   });
 }
+worksGrid.addEventListener('click', openPopup);
+popupClose.addEventListener('click', closePopup);
 headerMenu.addEventListener('click', toggleMenu);
 headerButton.addEventListener('click', toggleMenu);
 window.addEventListener('scroll', pageScroll);
 headerlinks.shift();
-headerlinks.pop();
+headerlinks.pop();
+fillGrid();