From badd1480248e653f2f0b5a878394da1d9766dbd9 Mon Sep 17 00:00:00 2001 From: Simpleshaikh1 Date: Thu, 20 Apr 2023 22:50:39 +0100 Subject: [PATCH 1/2] pop-window-added --- assets/Icon.png | Bin 0 -> 424 bytes index.css | 35 +++++++++ index.html | 16 +++- index.js | 196 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 243 insertions(+), 4 deletions(-) create mode 100644 assets/Icon.png diff --git a/assets/Icon.png b/assets/Icon.png new file mode 100644 index 0000000000000000000000000000000000000000..fb380bb4c8dfb6cd0e5fdf11922125477328e823 GIT binary patch literal 424 zcmV;Z0ayNsP)=%1#cGrpK(b?)AEToEf930Z=%l-*3vHvnb1?Jk<1FQj5j*e^x S0Rk5Q0000
+
@@ -77,7 +78,8 @@

I'm Toyyib. Glad to see you!

-
+ +
+ +
+ +
+
diff --git a/index.js b/index.js index c576d9b..365302f 100644 --- a/index.js +++ b/index.js @@ -13,3 +13,199 @@ xMen.addEventListener('click', () => { menuList.addEventListener('click', () => { menuList.classList.toggle('nav-active'); }); + + +//cards + +const projectDetails = [ + { + id: 1, + name: 'Tonic', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends', + mobileImg: './assets/Snapshoot Portfolio.png', + desktopImg: './assets/first-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript' + }, + }, + + { + id: 2, + name: 'Multi-Post Stories', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', + mobileImg: './assets/Snapshoot Portfolio 2.png', + desktopImg: './assets/second-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript' + }, + }, + + { + id: 3, + name: 'Tonic', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.', + mobileImg: './assets/Snapshoot Portfolio 3.png', + desktopImg: './assets/second-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript' + }, + }, + + { + id: 4, + name: 'Multi-Post Stories', + title: 'Canopy', + stack: 'Back End Dev', + year: '2015', + description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends.', + mobileImg: './assets/Snapshoot Portfolio 4.png', + desktopImg: './assets/fourth-desktop-card.png', + live: '#', + source: '#', + skills: { + skill1: 'html', + skill2: 'css', + skill3: 'javaScript' + }, + }, + +] + +projectDetails.forEach((projects, index) => { + const section = document.createElement('div'); + + const isSecond = index === 1; + const isLast = index === 3; + const reverseClass = isSecond ? 'inner-second-containerr' : ''; + const marginB = isLast ? 'inner-second-containerl' : ''; + + + + section.innerHTML = ` +
+
+
+ + +
+ +
+

${projects.name}

+
+

${projects.title}

+
    +
  • ${projects.stack}
    • +
  • ${projects.year}
    • +
+
+ +
+

${projects.description}

+
+ +
    +
  • ${projects.skills.skill1}
    • +
  • ${projects.skills.skill2}
    • +
  • ${projects.skills.skill3}
    • +
+ +
+ +
+ +
+ +
+ +
+ + `; + + const sections = document.querySelector('.second-container'); + sections.append(section); + + const allButton = document.querySelectorAll('.all-button'); + const pop = document.querySelector('.pop'); + + allButton.forEach(btn => { + btn.addEventListener('click', e => { + let {id} = e.target; + id = Number(id); + + if(id === projects.id){ + pop.innerHTML = ` +
+
+
+

${projects.title}

+
+

${projects.title}

+
  • ${projects.stack}
+
  • ${projects.year}
+
+
+ +
+ +
+ +
+ + + +
+

${projects.description}

+ +
+
  • ${projects.skills.skill1}
+
  • ${projects.skills.skill2}
+
  • ${projects.skills.skill3}
+
+ +
+ + +
+
+
+ `; + + document.querySelector('.top-container').classList.add('overlay'); + sections.classList.add('overlay'); + + const closeBtn = document.querySelector('.close-btn'); + + closeBtn.addEventListener('click', e => { + e.preventDefault(); + + pop.innerHTML = ''; + + document.querySelector('.top-container').classList.remove('overlay'); + + sections.classList.remove('overlay'); + }); + } + }); + }); +}); \ No newline at end of file From 4c10a4920f902fad757550e007b129708a4d8b44 Mon Sep 17 00:00:00 2001 From: Simpleshaikh1 Date: Thu, 20 Apr 2023 23:46:35 +0100 Subject: [PATCH 2/2] completed form validation --- index.css | 10 ++++++++++ index.html | 9 +++++---- index.js | 16 ++++++++++++++++ 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 1796e13..f95a8c0 100644 --- a/index.css +++ b/index.css @@ -798,4 +798,14 @@ form #type-msg { } /* pop up */ + + /* form validation error */ + + .error { + background-color: #fff; + color: red; + margin-top: 20px; + text-align: center; + border-radius: 5px; + } } diff --git a/index.html b/index.html index 07d8379..14c280a 100644 --- a/index.html +++ b/index.html @@ -454,8 +454,8 @@

About Myself

- - + + @@ -464,10 +464,11 @@

About Myself

- + - +
+
diff --git a/index.js b/index.js index 365302f..126f659 100644 --- a/index.js +++ b/index.js @@ -208,4 +208,20 @@ projectDetails.forEach((projects, index) => { } }); }); +}); + +//Form Validation + + +const form = document.forms[0]; +form.addEventListener('submit', (e) => { + const email = form.elements.email.value; + const errorMsg = document.querySelector('.error'); + if (email === email.toLowerCase()) { + form.onsubmit(); + } else { + errorMsg.innerHTML = 'Email should be lowercase'; + errorMsg.classList.remove('hidden'); + } + e.preventDefault(); }); \ No newline at end of file