From 74fc975057f8022fae2603bb6b6a8b13d898f410 Mon Sep 17 00:00:00 2001 From: Ghulam Subbhani Date: Fri, 23 Dec 2022 15:01:03 +0200 Subject: [PATCH 1/5] Saved form data --- script.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/script.js b/script.js index 4c72969..58ba02d 100644 --- a/script.js +++ b/script.js @@ -444,3 +444,23 @@ formSubmit.addEventListener('click', (event) => { } formSubmit.submit(); }); + +/* Local Storage */ + +const fullName = document.getElementById('full-name'); +const message = document.getElementById('message'); + +function addFormData() { + const formDetails = document.getElementById('contact'); + const contactFormData = new FormData(formDetails); + const contactFormObject = Object.fromEntries(contactFormData.entries()); + localStorage.setItem('form', JSON.stringify(contactFormObject)); +} + +email.addEventListener('keydown', addFormData); +fullName.addEventListener('keydown', addFormData); +message.addEventListener('keydown', addFormData); + +const savedData = JSON.parse( + localStorage.getItem('form') ?? '{}', +); \ No newline at end of file From 835f69ffdb6ed801703476b3cf1d739d9f3911c8 Mon Sep 17 00:00:00 2001 From: Rachel Isaac Date: Fri, 23 Dec 2022 17:13:35 +0400 Subject: [PATCH 2/5] Edit form id name --- index.html | 6 +- script.js | 353 +++++++++++++++++++++++++++-------------------------- 2 files changed, 183 insertions(+), 176 deletions(-) diff --git a/index.html b/index.html index f91132e..1f81734 100644 --- a/index.html +++ b/index.html @@ -190,7 +190,11 @@

I'm always interested in hearing about new projects, so if you'd like to chat please get in touch.

-
+
{ - hamburger.classList.toggle('active'); - mobileMenuBar.classList.toggle('show-menu'); + hamburger.classList.toggle("active"); + mobileMenuBar.classList.toggle("show-menu"); }; -hamburger.addEventListener('click', mobileMenu); +hamburger.addEventListener("click", mobileMenu); const removeMenu = () => { - mobileMenuBar.classList.remove('show-menu'); - hamburger.classList.remove('active'); + mobileMenuBar.classList.remove("show-menu"); + hamburger.classList.remove("active"); }; const navLinksArray = Array.from(navLinks); for (let i = 0; i < navLinksArray.length; i += 1) { - navLinksArray[i].addEventListener('click', removeMenu); + navLinksArray[i].addEventListener("click", removeMenu); } // -----------REFACTOR PROJECT SECTION---------------- @@ -25,8 +25,8 @@ for (let i = 0; i < navLinksArray.length; i += 1) { // Store project information in array const projectArray = [ { - projectHeading: 'Multi-Post Stories Gain+Glory', - projectName: 'Keeping track of hundreds of components', + projectHeading: "Multi-Post Stories Gain+Glory", + projectName: "Keeping track of hundreds of components", projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -35,25 +35,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: './images/popup-mobile-img.svg', - projectImageDesktop: './images/popup-desktop-img.svg', - technologies1: 'Ruby on rails', - technologies2: 'css', - technologies3: 'JavaScript', - technologies4: 'Codekit', - technologies5: 'GitHub', - technologies6: 'Bootstrap', - technologies7: 'Terminal', - technologies8: 'Codepen', - technologies9: 'html', - liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', - sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', - projectButton: 'See Project', + projectImageMobile: "./images/popup-mobile-img.svg", + projectImageDesktop: "./images/popup-desktop-img.svg", + technologies1: "Ruby on rails", + technologies2: "css", + technologies3: "JavaScript", + technologies4: "Codekit", + technologies5: "GitHub", + technologies6: "Bootstrap", + technologies7: "Terminal", + technologies8: "Codepen", + technologies9: "html", + liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", + sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", + projectButton: "See Project", btnValue: 0, }, { - projectHeading: 'Multi-Post Stories Gain+Glory', - projectName: 'Keeping track of hundreds of components', + projectHeading: "Multi-Post Stories Gain+Glory", + projectName: "Keeping track of hundreds of components", projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -62,25 +62,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: './images/popup-mobile-img.svg', - projectImageDesktop: './images/popup-desktop-img.svg', - technologies1: 'Ruby on rails1', - technologies2: 'css', - technologies3: 'JavaScript', - technologies4: 'Codekit', - technologies5: 'GitHub', - technologies6: 'Bootstrap', - technologies7: 'Terminal', - technologies8: 'Codepen', - technologies9: 'html', - liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', - sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', - projectButton: 'See Project', + projectImageMobile: "./images/popup-mobile-img.svg", + projectImageDesktop: "./images/popup-desktop-img.svg", + technologies1: "Ruby on rails1", + technologies2: "css", + technologies3: "JavaScript", + technologies4: "Codekit", + technologies5: "GitHub", + technologies6: "Bootstrap", + technologies7: "Terminal", + technologies8: "Codepen", + technologies9: "html", + liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", + sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", + projectButton: "See Project", btnValue: 1, }, { - projectHeading: 'Multi-Post Stories Gain+Glory', - projectName: 'Keeping track of hundreds of components', + projectHeading: "Multi-Post Stories Gain+Glory", + projectName: "Keeping track of hundreds of components", projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -89,25 +89,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: './images/popup-mobile-img.svg', - projectImageDesktop: './images/popup-desktop-img.svg', - technologies1: 'Ruby on rails', - technologies2: 'css', - technologies3: 'JavaScript', - technologies4: 'Codekit', - technologies5: 'GitHub', - technologies6: 'Bootstrap', - technologies7: 'Terminal', - technologies8: 'Codepen', - technologies9: 'html', - liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', - sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', - projectButton: 'See Project', + projectImageMobile: "./images/popup-mobile-img.svg", + projectImageDesktop: "./images/popup-desktop-img.svg", + technologies1: "Ruby on rails", + technologies2: "css", + technologies3: "JavaScript", + technologies4: "Codekit", + technologies5: "GitHub", + technologies6: "Bootstrap", + technologies7: "Terminal", + technologies8: "Codepen", + technologies9: "html", + liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", + sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", + projectButton: "See Project", btnValue: 2, }, { - projectHeading: 'Multi-Post Stories Gain+Glory', - projectName: 'Keeping track of hundreds of components', + projectHeading: "Multi-Post Stories Gain+Glory", + projectName: "Keeping track of hundreds of components", projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -116,25 +116,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: './images/popup-mobile-img.svg', - projectImageDesktop: './images/popup-desktop-img.svg', - technologies1: 'Ruby on rails', - technologies2: 'css', - technologies3: 'JavaScript', - technologies4: 'Codekit', - technologies5: 'GitHub', - technologies6: 'Bootstrap', - technologies7: 'Terminal', - technologies8: 'Codepen', - technologies9: 'html', - liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', - sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', - projectButton: 'See Project', + projectImageMobile: "./images/popup-mobile-img.svg", + projectImageDesktop: "./images/popup-desktop-img.svg", + technologies1: "Ruby on rails", + technologies2: "css", + technologies3: "JavaScript", + technologies4: "Codekit", + technologies5: "GitHub", + technologies6: "Bootstrap", + technologies7: "Terminal", + technologies8: "Codepen", + technologies9: "html", + liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", + sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", + projectButton: "See Project", btnValue: 3, }, { - projectHeading: 'Multi-Post Stories Gain+Glory', - projectName: 'Keeping track of hundreds of components', + projectHeading: "Multi-Post Stories Gain+Glory", + projectName: "Keeping track of hundreds of components", projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -143,25 +143,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: './images/popup-mobile-img.svg', - projectImageDesktop: './images/popup-desktop-img.svg', - technologies1: 'Ruby on rails', - technologies2: 'css', - technologies3: 'JavaScript', - technologies4: 'Codekit', - technologies5: 'GitHub', - technologies6: 'Bootstrap', - technologies7: 'Terminal', - technologies8: 'Codepen', - technologies9: 'html', - liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', - sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', - projectButton: 'See Project', + projectImageMobile: "./images/popup-mobile-img.svg", + projectImageDesktop: "./images/popup-desktop-img.svg", + technologies1: "Ruby on rails", + technologies2: "css", + technologies3: "JavaScript", + technologies4: "Codekit", + technologies5: "GitHub", + technologies6: "Bootstrap", + technologies7: "Terminal", + technologies8: "Codepen", + technologies9: "html", + liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", + sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", + projectButton: "See Project", btnValue: 4, }, { - projectHeading: 'Multi-Post Stories Gain+Glory', - projectName: 'Keeping track of hundreds of components', + projectHeading: "Multi-Post Stories Gain+Glory", + projectName: "Keeping track of hundreds of components", projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -170,30 +170,30 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: './images/popup-mobile-img.svg', - projectImageDesktop: './images/popup-desktop-img.svg', - technologies1: 'Ruby on rails', - technologies2: 'css', - technologies3: 'JavaScript', - technologies4: 'Codekit', - technologies5: 'GitHub', - technologies6: 'Bootstrap', - technologies7: 'Terminal', - technologies8: 'Codepen', - technologies9: 'html', - liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', - sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', - projectButton: 'See Project', + projectImageMobile: "./images/popup-mobile-img.svg", + projectImageDesktop: "./images/popup-desktop-img.svg", + technologies1: "Ruby on rails", + technologies2: "css", + technologies3: "JavaScript", + technologies4: "Codekit", + technologies5: "GitHub", + technologies6: "Bootstrap", + technologies7: "Terminal", + technologies8: "Codepen", + technologies9: "html", + liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", + sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", + projectButton: "See Project", btnValue: 5, }, ]; -const startingPoint = document.querySelector('.body'); +const startingPoint = document.querySelector(".body"); // -------------MOBILE POPUP--------------------------------- const creatMobilePopup = () => { startingPoint.insertAdjacentHTML( - 'afterbegin', + "afterbegin", ``, +` ); }; -const projectStart = document.querySelector('.project_section'); +const projectStart = document.querySelector(".project_section"); const creatProject = () => { projectStart.insertAdjacentHTML( - 'afterbegin', + "afterbegin", `
@@ -261,42 +261,42 @@ const creatProject = () => { >
-
`, + ` ); }; // eslint-disable-next-line no-plusplus for (let i = 5; i >= 0; i--) { creatProject(); - const projectHeading = document.querySelector('.project-heading'); - const ProjectTechnologies1 = document.querySelector('.Project-technologies1'); - const ProjectTechnologies2 = document.querySelector('.Project-technologies2'); - const ProjectTechnologies3 = document.querySelector('.Project-technologies3'); - const ProjectTechnologies4 = document.querySelector('.Project-technologies4'); - const btnProject = document.querySelector('.project-btn'); + const projectHeading = document.querySelector(".project-heading"); + const ProjectTechnologies1 = document.querySelector(".Project-technologies1"); + const ProjectTechnologies2 = document.querySelector(".Project-technologies2"); + const ProjectTechnologies3 = document.querySelector(".Project-technologies3"); + const ProjectTechnologies4 = document.querySelector(".Project-technologies4"); + const btnProject = document.querySelector(".project-btn"); projectHeading.textContent = projectArray[i].projectHeading; ProjectTechnologies1.textContent = projectArray[i].technologies1; ProjectTechnologies2.textContent = projectArray[i].technologies2; ProjectTechnologies3.textContent = projectArray[i].technologies3; ProjectTechnologies4.textContent = projectArray[i].technologies9; - btnProject.setAttribute('id', projectArray[i].btnValue); + btnProject.setAttribute("id", projectArray[i].btnValue); } creatMobilePopup(); -const projectNameM = document.querySelector('.popup-project-title'); -const projectImageM = document.querySelector('.project-image'); -const descriptionM = document.querySelector('.project-description'); -const technologies1M = document.querySelector('.ruby-technology'); -const technologies2M = document.querySelector('.css-technology'); -const technologies3M = document.querySelector('.javascript-technology'); -const liveLinkM = document.querySelector('.live-link'); -const sourceLinkM = document.querySelector('.source-link'); +const projectNameM = document.querySelector(".popup-project-title"); +const projectImageM = document.querySelector(".project-image"); +const descriptionM = document.querySelector(".project-description"); +const technologies1M = document.querySelector(".ruby-technology"); +const technologies2M = document.querySelector(".css-technology"); +const technologies3M = document.querySelector(".javascript-technology"); +const liveLinkM = document.querySelector(".live-link"); +const sourceLinkM = document.querySelector(".source-link"); // -------------DESKTOP POPUP------------------------------------ const createDesktopPopup = () => { startingPoint.insertAdjacentHTML( - 'afterbegin', + "afterbegin", ``, + ` ); }; createDesktopPopup(); -const projectNameD = document.querySelector('.desktop-popup-project-title'); -const projectImageD = document.querySelector('.popup-desktop-img'); -const descriptionD = document.querySelector('.desktop-project-description'); -const technologies3D = document.querySelector('.js-technology'); -const technologies4 = document.querySelector('.Codekit-technology'); -const technologies5 = document.querySelector('.GitHub-technology'); -const technologies6 = document.querySelector('.Bootstrap-technology'); -const technologies7 = document.querySelector('.Terminal-technology'); -const technologies8 = document.querySelector('.Codepen-technology'); -const liveLinkD = document.querySelector('.live-link-desktop'); -const sourceLinkD = document.querySelector('.source-link-desktop'); +const projectNameD = document.querySelector(".desktop-popup-project-title"); +const projectImageD = document.querySelector(".popup-desktop-img"); +const descriptionD = document.querySelector(".desktop-project-description"); +const technologies3D = document.querySelector(".js-technology"); +const technologies4 = document.querySelector(".Codekit-technology"); +const technologies5 = document.querySelector(".GitHub-technology"); +const technologies6 = document.querySelector(".Bootstrap-technology"); +const technologies7 = document.querySelector(".Terminal-technology"); +const technologies8 = document.querySelector(".Codepen-technology"); +const liveLinkD = document.querySelector(".live-link-desktop"); +const sourceLinkD = document.querySelector(".source-link-desktop"); -const projectButton = document.querySelectorAll('.project-btn'); -const modal = document.querySelector('.modal-desktop-overlay'); -const modalMobile = document.querySelector('.modal-mobile-overlay'); -const closeModal = document.querySelector('.cancel-icon-desktop'); -const closeModalMobile = document.querySelector('.cancel-icon-mobile'); +const projectButton = document.querySelectorAll(".project-btn"); +const modal = document.querySelector(".modal-desktop-overlay"); +const modalMobile = document.querySelector(".modal-mobile-overlay"); +const closeModal = document.querySelector(".cancel-icon-desktop"); +const closeModalMobile = document.querySelector(".cancel-icon-mobile"); // DESKTOP OVERLAY // mobile const openModalMobile = () => { - modalMobile.style.display = 'flex'; - modal.style.display = 'none'; + modalMobile.style.display = "flex"; + modal.style.display = "none"; }; const collapseMobileModal = () => { - modalMobile.style.display = 'none'; + modalMobile.style.display = "none"; }; // desktop const openModalDesktop = () => { - modal.style.display = 'flex'; - modalMobile.style.display = 'none'; + modal.style.display = "flex"; + modalMobile.style.display = "none"; }; const collapseDesktopModal = () => { - modal.style.display = 'none'; + modal.style.display = "none"; }; collapseDesktopModal(); collapseMobileModal(); projectButton.forEach((button) => { - button.addEventListener('click', () => { + button.addEventListener("click", () => { if (window.innerWidth < 768) { collapseDesktopModal(); openModalMobile(); @@ -402,7 +402,7 @@ projectButton.forEach((button) => { } const count = button.id; projectNameD.textContent = projectArray[count].projectName; - projectImageD.setAttribute('src', projectArray[count].projectImageDesktop); + projectImageD.setAttribute("src", projectArray[count].projectImageDesktop); descriptionD.textContent = projectArray[count].projectDescription; technologies3D.textContent = projectArray[count].technologies3; technologies4.textContent = projectArray[count].technologies4; @@ -410,35 +410,35 @@ projectButton.forEach((button) => { technologies6.textContent = projectArray[count].technologies6; technologies7.textContent = projectArray[count].technologies7; technologies8.textContent = projectArray[count].technologies8; - liveLinkD.setAttribute('src', projectArray[count].liveLink); - sourceLinkD.setAttribute('src', projectArray[count].sourceLink); + liveLinkD.setAttribute("src", projectArray[count].liveLink); + sourceLinkD.setAttribute("src", projectArray[count].sourceLink); projectNameM.textContent = projectArray[count].projectName; - projectImageM.setAttribute('src', projectArray[count].projectImageMobile); + projectImageM.setAttribute("src", projectArray[count].projectImageMobile); descriptionM.textContent = projectArray[count].projectDescription; technologies1M.textContent = projectArray[count].technologies1; technologies2M.textContent = projectArray[count].technologies2; technologies3M.textContent = projectArray[count].technologies3; - liveLinkM.setAttribute('src', projectArray[count].liveLink); - sourceLinkM.setAttribute('src', projectArray[count].sourceLink); + liveLinkM.setAttribute("src", projectArray[count].liveLink); + sourceLinkM.setAttribute("src", projectArray[count].sourceLink); }); }); -closeModalMobile.addEventListener('click', collapseMobileModal); -closeModal.addEventListener('click', collapseDesktopModal); +closeModalMobile.addEventListener("click", collapseMobileModal); +closeModal.addEventListener("click", collapseDesktopModal); // FORM VALIDATION -const email = document.getElementById('email'); -const error = document.getElementById('error'); -const formSubmit = document.getElementById('form-button'); +const email = document.getElementById("email"); +const error = document.getElementById("error"); +const formSubmit = document.getElementById("form-button"); -formSubmit.addEventListener('click', (event) => { +formSubmit.addEventListener("click", (event) => { if (email.validity.typeMismatch) { - error.textContent = 'Invalid Email!'; + error.textContent = "Invalid Email!"; event.preventDefault(); return; } if (email.validity.patternMismatch) { - error.textContent = 'Kindly ensure your email is in lowercase letters'; + error.textContent = "Kindly ensure your email is in lowercase letters"; event.preventDefault(); return; } @@ -447,20 +447,23 @@ formSubmit.addEventListener('click', (event) => { /* Local Storage */ -const fullName = document.getElementById('full-name'); -const message = document.getElementById('message'); +const fullName = document.getElementById("full-name"); +const message = document.getElementById("message"); function addFormData() { - const formDetails = document.getElementById('contact'); + const formDetails = document.getElementById("contact-Form"); + console.log(formDetails); const contactFormData = new FormData(formDetails); const contactFormObject = Object.fromEntries(contactFormData.entries()); - localStorage.setItem('form', JSON.stringify(contactFormObject)); + localStorage.setItem("form", JSON.stringify(contactFormObject)); } -email.addEventListener('keydown', addFormData); -fullName.addEventListener('keydown', addFormData); -message.addEventListener('keydown', addFormData); +email.addEventListener("keydown", addFormData); +fullName.addEventListener("keydown", addFormData); +message.addEventListener("keydown", addFormData); -const savedData = JSON.parse( - localStorage.getItem('form') ?? '{}', -); \ No newline at end of file +const storedData = JSON.parse(localStorage.getItem("form") ?? "{}"); + +fullName.value = storedData.name ?? ""; +email.value = storedData.email ?? ""; +message.value = storedData.message ?? ""; From 9271962271a9c5fdf3c73befdeef08873fbdd222 Mon Sep 17 00:00:00 2001 From: Rachel Isaac Date: Fri, 23 Dec 2022 17:14:59 +0400 Subject: [PATCH 3/5] Fix eslint errors --- script.js | 353 +++++++++++++++++++++++++++--------------------------- 1 file changed, 176 insertions(+), 177 deletions(-) diff --git a/script.js b/script.js index dbb0e54..a131347 100644 --- a/script.js +++ b/script.js @@ -1,23 +1,23 @@ // -----------ADD FUNCTION TO MOBILE MENU BAR------------ -const hamburger = document.querySelector(".hamburger"); -const mobileMenuBar = document.querySelector(".hamburger-menu-container"); -const navLinks = document.querySelectorAll(".nav-link"); +const hamburger = document.querySelector('.hamburger'); +const mobileMenuBar = document.querySelector('.hamburger-menu-container'); +const navLinks = document.querySelectorAll('.nav-link'); const mobileMenu = () => { - hamburger.classList.toggle("active"); - mobileMenuBar.classList.toggle("show-menu"); + hamburger.classList.toggle('active'); + mobileMenuBar.classList.toggle('show-menu'); }; -hamburger.addEventListener("click", mobileMenu); +hamburger.addEventListener('click', mobileMenu); const removeMenu = () => { - mobileMenuBar.classList.remove("show-menu"); - hamburger.classList.remove("active"); + mobileMenuBar.classList.remove('show-menu'); + hamburger.classList.remove('active'); }; const navLinksArray = Array.from(navLinks); for (let i = 0; i < navLinksArray.length; i += 1) { - navLinksArray[i].addEventListener("click", removeMenu); + navLinksArray[i].addEventListener('click', removeMenu); } // -----------REFACTOR PROJECT SECTION---------------- @@ -25,8 +25,8 @@ for (let i = 0; i < navLinksArray.length; i += 1) { // Store project information in array const projectArray = [ { - projectHeading: "Multi-Post Stories Gain+Glory", - projectName: "Keeping track of hundreds of components", + projectHeading: 'Multi-Post Stories Gain+Glory', + projectName: 'Keeping track of hundreds of components', projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -35,25 +35,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: "./images/popup-mobile-img.svg", - projectImageDesktop: "./images/popup-desktop-img.svg", - technologies1: "Ruby on rails", - technologies2: "css", - technologies3: "JavaScript", - technologies4: "Codekit", - technologies5: "GitHub", - technologies6: "Bootstrap", - technologies7: "Terminal", - technologies8: "Codepen", - technologies9: "html", - liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", - sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", - projectButton: "See Project", + projectImageMobile: './images/popup-mobile-img.svg', + projectImageDesktop: './images/popup-desktop-img.svg', + technologies1: 'Ruby on rails', + technologies2: 'css', + technologies3: 'JavaScript', + technologies4: 'Codekit', + technologies5: 'GitHub', + technologies6: 'Bootstrap', + technologies7: 'Terminal', + technologies8: 'Codepen', + technologies9: 'html', + liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', + sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', + projectButton: 'See Project', btnValue: 0, }, { - projectHeading: "Multi-Post Stories Gain+Glory", - projectName: "Keeping track of hundreds of components", + projectHeading: 'Multi-Post Stories Gain+Glory', + projectName: 'Keeping track of hundreds of components', projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -62,25 +62,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: "./images/popup-mobile-img.svg", - projectImageDesktop: "./images/popup-desktop-img.svg", - technologies1: "Ruby on rails1", - technologies2: "css", - technologies3: "JavaScript", - technologies4: "Codekit", - technologies5: "GitHub", - technologies6: "Bootstrap", - technologies7: "Terminal", - technologies8: "Codepen", - technologies9: "html", - liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", - sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", - projectButton: "See Project", + projectImageMobile: './images/popup-mobile-img.svg', + projectImageDesktop: './images/popup-desktop-img.svg', + technologies1: 'Ruby on rails1', + technologies2: 'css', + technologies3: 'JavaScript', + technologies4: 'Codekit', + technologies5: 'GitHub', + technologies6: 'Bootstrap', + technologies7: 'Terminal', + technologies8: 'Codepen', + technologies9: 'html', + liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', + sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', + projectButton: 'See Project', btnValue: 1, }, { - projectHeading: "Multi-Post Stories Gain+Glory", - projectName: "Keeping track of hundreds of components", + projectHeading: 'Multi-Post Stories Gain+Glory', + projectName: 'Keeping track of hundreds of components', projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -89,25 +89,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: "./images/popup-mobile-img.svg", - projectImageDesktop: "./images/popup-desktop-img.svg", - technologies1: "Ruby on rails", - technologies2: "css", - technologies3: "JavaScript", - technologies4: "Codekit", - technologies5: "GitHub", - technologies6: "Bootstrap", - technologies7: "Terminal", - technologies8: "Codepen", - technologies9: "html", - liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", - sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", - projectButton: "See Project", + projectImageMobile: './images/popup-mobile-img.svg', + projectImageDesktop: './images/popup-desktop-img.svg', + technologies1: 'Ruby on rails', + technologies2: 'css', + technologies3: 'JavaScript', + technologies4: 'Codekit', + technologies5: 'GitHub', + technologies6: 'Bootstrap', + technologies7: 'Terminal', + technologies8: 'Codepen', + technologies9: 'html', + liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', + sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', + projectButton: 'See Project', btnValue: 2, }, { - projectHeading: "Multi-Post Stories Gain+Glory", - projectName: "Keeping track of hundreds of components", + projectHeading: 'Multi-Post Stories Gain+Glory', + projectName: 'Keeping track of hundreds of components', projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -116,25 +116,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: "./images/popup-mobile-img.svg", - projectImageDesktop: "./images/popup-desktop-img.svg", - technologies1: "Ruby on rails", - technologies2: "css", - technologies3: "JavaScript", - technologies4: "Codekit", - technologies5: "GitHub", - technologies6: "Bootstrap", - technologies7: "Terminal", - technologies8: "Codepen", - technologies9: "html", - liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", - sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", - projectButton: "See Project", + projectImageMobile: './images/popup-mobile-img.svg', + projectImageDesktop: './images/popup-desktop-img.svg', + technologies1: 'Ruby on rails', + technologies2: 'css', + technologies3: 'JavaScript', + technologies4: 'Codekit', + technologies5: 'GitHub', + technologies6: 'Bootstrap', + technologies7: 'Terminal', + technologies8: 'Codepen', + technologies9: 'html', + liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', + sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', + projectButton: 'See Project', btnValue: 3, }, { - projectHeading: "Multi-Post Stories Gain+Glory", - projectName: "Keeping track of hundreds of components", + projectHeading: 'Multi-Post Stories Gain+Glory', + projectName: 'Keeping track of hundreds of components', projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -143,25 +143,25 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: "./images/popup-mobile-img.svg", - projectImageDesktop: "./images/popup-desktop-img.svg", - technologies1: "Ruby on rails", - technologies2: "css", - technologies3: "JavaScript", - technologies4: "Codekit", - technologies5: "GitHub", - technologies6: "Bootstrap", - technologies7: "Terminal", - technologies8: "Codepen", - technologies9: "html", - liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", - sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", - projectButton: "See Project", + projectImageMobile: './images/popup-mobile-img.svg', + projectImageDesktop: './images/popup-desktop-img.svg', + technologies1: 'Ruby on rails', + technologies2: 'css', + technologies3: 'JavaScript', + technologies4: 'Codekit', + technologies5: 'GitHub', + technologies6: 'Bootstrap', + technologies7: 'Terminal', + technologies8: 'Codepen', + technologies9: 'html', + liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', + sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', + projectButton: 'See Project', btnValue: 4, }, { - projectHeading: "Multi-Post Stories Gain+Glory", - projectName: "Keeping track of hundreds of components", + projectHeading: 'Multi-Post Stories Gain+Glory', + projectName: 'Keeping track of hundreds of components', projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of @@ -170,30 +170,30 @@ const projectArray = [ has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the release`, - projectImageMobile: "./images/popup-mobile-img.svg", - projectImageDesktop: "./images/popup-desktop-img.svg", - technologies1: "Ruby on rails", - technologies2: "css", - technologies3: "JavaScript", - technologies4: "Codekit", - technologies5: "GitHub", - technologies6: "Bootstrap", - technologies7: "Terminal", - technologies8: "Codepen", - technologies9: "html", - liveLink: "https://rachelwebdev.github.io/Portfolio-Project/", - sourceLink: "https://github.com/Rachelwebdev/Portfolio-Project", - projectButton: "See Project", + projectImageMobile: './images/popup-mobile-img.svg', + projectImageDesktop: './images/popup-desktop-img.svg', + technologies1: 'Ruby on rails', + technologies2: 'css', + technologies3: 'JavaScript', + technologies4: 'Codekit', + technologies5: 'GitHub', + technologies6: 'Bootstrap', + technologies7: 'Terminal', + technologies8: 'Codepen', + technologies9: 'html', + liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', + sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', + projectButton: 'See Project', btnValue: 5, }, ]; -const startingPoint = document.querySelector(".body"); +const startingPoint = document.querySelector('.body'); // -------------MOBILE POPUP--------------------------------- const creatMobilePopup = () => { startingPoint.insertAdjacentHTML( - "afterbegin", + 'afterbegin', `` +`, ); }; -const projectStart = document.querySelector(".project_section"); +const projectStart = document.querySelector('.project_section'); const creatProject = () => { projectStart.insertAdjacentHTML( - "afterbegin", + 'afterbegin', `
@@ -261,42 +261,42 @@ const creatProject = () => { >
-
` + `, ); }; // eslint-disable-next-line no-plusplus for (let i = 5; i >= 0; i--) { creatProject(); - const projectHeading = document.querySelector(".project-heading"); - const ProjectTechnologies1 = document.querySelector(".Project-technologies1"); - const ProjectTechnologies2 = document.querySelector(".Project-technologies2"); - const ProjectTechnologies3 = document.querySelector(".Project-technologies3"); - const ProjectTechnologies4 = document.querySelector(".Project-technologies4"); - const btnProject = document.querySelector(".project-btn"); + const projectHeading = document.querySelector('.project-heading'); + const ProjectTechnologies1 = document.querySelector('.Project-technologies1'); + const ProjectTechnologies2 = document.querySelector('.Project-technologies2'); + const ProjectTechnologies3 = document.querySelector('.Project-technologies3'); + const ProjectTechnologies4 = document.querySelector('.Project-technologies4'); + const btnProject = document.querySelector('.project-btn'); projectHeading.textContent = projectArray[i].projectHeading; ProjectTechnologies1.textContent = projectArray[i].technologies1; ProjectTechnologies2.textContent = projectArray[i].technologies2; ProjectTechnologies3.textContent = projectArray[i].technologies3; ProjectTechnologies4.textContent = projectArray[i].technologies9; - btnProject.setAttribute("id", projectArray[i].btnValue); + btnProject.setAttribute('id', projectArray[i].btnValue); } creatMobilePopup(); -const projectNameM = document.querySelector(".popup-project-title"); -const projectImageM = document.querySelector(".project-image"); -const descriptionM = document.querySelector(".project-description"); -const technologies1M = document.querySelector(".ruby-technology"); -const technologies2M = document.querySelector(".css-technology"); -const technologies3M = document.querySelector(".javascript-technology"); -const liveLinkM = document.querySelector(".live-link"); -const sourceLinkM = document.querySelector(".source-link"); +const projectNameM = document.querySelector('.popup-project-title'); +const projectImageM = document.querySelector('.project-image'); +const descriptionM = document.querySelector('.project-description'); +const technologies1M = document.querySelector('.ruby-technology'); +const technologies2M = document.querySelector('.css-technology'); +const technologies3M = document.querySelector('.javascript-technology'); +const liveLinkM = document.querySelector('.live-link'); +const sourceLinkM = document.querySelector('.source-link'); // -------------DESKTOP POPUP------------------------------------ const createDesktopPopup = () => { startingPoint.insertAdjacentHTML( - "afterbegin", + 'afterbegin', `` + `, ); }; createDesktopPopup(); -const projectNameD = document.querySelector(".desktop-popup-project-title"); -const projectImageD = document.querySelector(".popup-desktop-img"); -const descriptionD = document.querySelector(".desktop-project-description"); -const technologies3D = document.querySelector(".js-technology"); -const technologies4 = document.querySelector(".Codekit-technology"); -const technologies5 = document.querySelector(".GitHub-technology"); -const technologies6 = document.querySelector(".Bootstrap-technology"); -const technologies7 = document.querySelector(".Terminal-technology"); -const technologies8 = document.querySelector(".Codepen-technology"); -const liveLinkD = document.querySelector(".live-link-desktop"); -const sourceLinkD = document.querySelector(".source-link-desktop"); +const projectNameD = document.querySelector('.desktop-popup-project-title'); +const projectImageD = document.querySelector('.popup-desktop-img'); +const descriptionD = document.querySelector('.desktop-project-description'); +const technologies3D = document.querySelector('.js-technology'); +const technologies4 = document.querySelector('.Codekit-technology'); +const technologies5 = document.querySelector('.GitHub-technology'); +const technologies6 = document.querySelector('.Bootstrap-technology'); +const technologies7 = document.querySelector('.Terminal-technology'); +const technologies8 = document.querySelector('.Codepen-technology'); +const liveLinkD = document.querySelector('.live-link-desktop'); +const sourceLinkD = document.querySelector('.source-link-desktop'); -const projectButton = document.querySelectorAll(".project-btn"); -const modal = document.querySelector(".modal-desktop-overlay"); -const modalMobile = document.querySelector(".modal-mobile-overlay"); -const closeModal = document.querySelector(".cancel-icon-desktop"); -const closeModalMobile = document.querySelector(".cancel-icon-mobile"); +const projectButton = document.querySelectorAll('.project-btn'); +const modal = document.querySelector('.modal-desktop-overlay'); +const modalMobile = document.querySelector('.modal-mobile-overlay'); +const closeModal = document.querySelector('.cancel-icon-desktop'); +const closeModalMobile = document.querySelector('.cancel-icon-mobile'); // DESKTOP OVERLAY // mobile const openModalMobile = () => { - modalMobile.style.display = "flex"; - modal.style.display = "none"; + modalMobile.style.display = 'flex'; + modal.style.display = 'none'; }; const collapseMobileModal = () => { - modalMobile.style.display = "none"; + modalMobile.style.display = 'none'; }; // desktop const openModalDesktop = () => { - modal.style.display = "flex"; - modalMobile.style.display = "none"; + modal.style.display = 'flex'; + modalMobile.style.display = 'none'; }; const collapseDesktopModal = () => { - modal.style.display = "none"; + modal.style.display = 'none'; }; collapseDesktopModal(); collapseMobileModal(); projectButton.forEach((button) => { - button.addEventListener("click", () => { + button.addEventListener('click', () => { if (window.innerWidth < 768) { collapseDesktopModal(); openModalMobile(); @@ -402,7 +402,7 @@ projectButton.forEach((button) => { } const count = button.id; projectNameD.textContent = projectArray[count].projectName; - projectImageD.setAttribute("src", projectArray[count].projectImageDesktop); + projectImageD.setAttribute('src', projectArray[count].projectImageDesktop); descriptionD.textContent = projectArray[count].projectDescription; technologies3D.textContent = projectArray[count].technologies3; technologies4.textContent = projectArray[count].technologies4; @@ -410,35 +410,35 @@ projectButton.forEach((button) => { technologies6.textContent = projectArray[count].technologies6; technologies7.textContent = projectArray[count].technologies7; technologies8.textContent = projectArray[count].technologies8; - liveLinkD.setAttribute("src", projectArray[count].liveLink); - sourceLinkD.setAttribute("src", projectArray[count].sourceLink); + liveLinkD.setAttribute('src', projectArray[count].liveLink); + sourceLinkD.setAttribute('src', projectArray[count].sourceLink); projectNameM.textContent = projectArray[count].projectName; - projectImageM.setAttribute("src", projectArray[count].projectImageMobile); + projectImageM.setAttribute('src', projectArray[count].projectImageMobile); descriptionM.textContent = projectArray[count].projectDescription; technologies1M.textContent = projectArray[count].technologies1; technologies2M.textContent = projectArray[count].technologies2; technologies3M.textContent = projectArray[count].technologies3; - liveLinkM.setAttribute("src", projectArray[count].liveLink); - sourceLinkM.setAttribute("src", projectArray[count].sourceLink); + liveLinkM.setAttribute('src', projectArray[count].liveLink); + sourceLinkM.setAttribute('src', projectArray[count].sourceLink); }); }); -closeModalMobile.addEventListener("click", collapseMobileModal); -closeModal.addEventListener("click", collapseDesktopModal); +closeModalMobile.addEventListener('click', collapseMobileModal); +closeModal.addEventListener('click', collapseDesktopModal); // FORM VALIDATION -const email = document.getElementById("email"); -const error = document.getElementById("error"); -const formSubmit = document.getElementById("form-button"); +const email = document.getElementById('email'); +const error = document.getElementById('error'); +const formSubmit = document.getElementById('form-button'); -formSubmit.addEventListener("click", (event) => { +formSubmit.addEventListener('click', (event) => { if (email.validity.typeMismatch) { - error.textContent = "Invalid Email!"; + error.textContent = 'Invalid Email!'; event.preventDefault(); return; } if (email.validity.patternMismatch) { - error.textContent = "Kindly ensure your email is in lowercase letters"; + error.textContent = 'Kindly ensure your email is in lowercase letters'; event.preventDefault(); return; } @@ -447,23 +447,22 @@ formSubmit.addEventListener("click", (event) => { /* Local Storage */ -const fullName = document.getElementById("full-name"); -const message = document.getElementById("message"); +const fullName = document.getElementById('full-name'); +const message = document.getElementById('message'); function addFormData() { - const formDetails = document.getElementById("contact-Form"); - console.log(formDetails); + const formDetails = document.getElementById('contact-Form'); const contactFormData = new FormData(formDetails); const contactFormObject = Object.fromEntries(contactFormData.entries()); - localStorage.setItem("form", JSON.stringify(contactFormObject)); + localStorage.setItem('form', JSON.stringify(contactFormObject)); } -email.addEventListener("keydown", addFormData); -fullName.addEventListener("keydown", addFormData); -message.addEventListener("keydown", addFormData); +email.addEventListener('keydown', addFormData); +fullName.addEventListener('keydown', addFormData); +message.addEventListener('keydown', addFormData); -const storedData = JSON.parse(localStorage.getItem("form") ?? "{}"); +const storedData = JSON.parse(localStorage.getItem('form') ?? '{}'); -fullName.value = storedData.name ?? ""; -email.value = storedData.email ?? ""; -message.value = storedData.message ?? ""; +fullName.value = storedData.name ?? ''; +email.value = storedData.email ?? ''; +message.value = storedData.message ?? ''; From adbd025108c8694bd29b71ee2c0e382f19d9217b Mon Sep 17 00:00:00 2001 From: Rachel Isaac Date: Fri, 23 Dec 2022 18:03:22 +0400 Subject: [PATCH 4/5] Fix eslint error --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index a131347..be70542 100644 --- a/script.js +++ b/script.js @@ -266,7 +266,7 @@ const creatProject = () => { }; // eslint-disable-next-line no-plusplus -for (let i = 5; i >= 0; i--) { +for (let i = 5; i >= 0; i -= 1) { creatProject(); const projectHeading = document.querySelector('.project-heading'); const ProjectTechnologies1 = document.querySelector('.Project-technologies1'); From a754375eb01a817ad47c6ed43ec9cb84e8fa30f4 Mon Sep 17 00:00:00 2001 From: Rachel Isaac Date: Mon, 2 Jan 2023 17:03:38 +0400 Subject: [PATCH 5/5] Add node modules to gitignore file --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 40b878d..3c3629e 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -node_modules/ \ No newline at end of file +node_modules