From 6526648d3cf76279e0b5467993614f00f6e11c48 Mon Sep 17 00:00:00 2001 From: leo-cas Date: Sat, 1 Nov 2025 13:30:57 +0100 Subject: [PATCH 1/3] fixed spelling --- style/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style/style.css b/style/style.css index 23f5bf0..c0441d3 100644 --- a/style/style.css +++ b/style/style.css @@ -46,7 +46,7 @@ section { z-index: 6; } -.navbar-innner-parent { +.navbar-inner-parent { position: relative; width: 100%; height: 5rem; @@ -365,7 +365,7 @@ section { margin-bottom: 0; } /*This is a form style for desktop*/ -.discription-title { +.description-title { display: grid; grid-template-columns: 70% 30%; } @@ -642,7 +642,7 @@ footer .lag { } @media screen and (max-width: 1100px) { /* This is a form style for desktop */ - .discription-title { + .description-title { display: flex; flex-direction: column; justify-content: center; From 0e75ed1fad054509d9c0787ce6b90ae059cc62c7 Mon Sep 17 00:00:00 2001 From: leo-cas Date: Sat, 1 Nov 2025 13:58:58 +0100 Subject: [PATCH 2/3] added a copy to clipboard function --- app.js | 79 +++++++++++++++++++++++++++++++++++++++++++----- cardDetails.json | 16 +++++----- index.html | 2 +- 3 files changed, 81 insertions(+), 16 deletions(-) diff --git a/app.js b/app.js index c27cee9..0d47807 100644 --- a/app.js +++ b/app.js @@ -36,13 +36,40 @@ function createCard(details) { const socialIcons = cardClone.querySelector(".social-icon"); + // Normalize contact links (email / github / linkedin) + const normalized = { ...details }; + if (normalized.email) { + // extract just the email address even if someone provided "mailto:" or typos like "mailto://" + const emailMatch = String(normalized.email).match(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/i); + if (emailMatch) { + normalized._cleanEmail = emailMatch[0]; + normalized.email = `mailto:${emailMatch[0]}`; + } else { + // keep original as fallback + normalized._cleanEmail = String(normalized.email); + if (!String(normalized.email).startsWith("mailto:")) { + normalized.email = `mailto:${normalized._cleanEmail}`; + } + } + } + if (normalized.github && !/^https?:\/\//i.test(normalized.github)) { + normalized.github = normalized.github.startsWith("github.com") + ? `https://${normalized.github}` + : `https://${normalized.github}`; + } + if (normalized.linkedin && !/^https?:\/\//i.test(normalized.linkedin)) { + normalized.linkedin = normalized.linkedin.startsWith("linkedin.com") + ? `https://${normalized.linkedin}` + : `https://${normalized.linkedin}`; + } + // Define the social media platforms and their corresponding icons //if you have any other in mind add it here and test it out for icons const socialMedia = [ { key: "twitter", icon: "uil uil-twitter" }, { key: "github", icon: "uil uil-github" }, { key: "linkedin", icon: "uil uil-linkedin" }, - { key: "dribbble", icon: "uil uil-dribbble" }, + { key: "dribble", icon: "uil uil-dribble" }, { key: "behance", icon: "uil uil-behance" }, { key: "email", icon: "uil uil-envelope" }, { key: "instagram", icon: "uil uil-instagram" }, @@ -50,13 +77,51 @@ function createCard(details) { // Iterate through the social media platforms and add icons if links are provided for (const platform of socialMedia) { - if (details[platform.key]) { + if (normalized[platform.key]) { socialIcons.innerHTML += ``; + normalized[platform.key] + }" target="_blank" rel="noopener noreferrer">`; } } + // Add "copy email" button if an email exists (uses normalized._cleanEmail) + if (normalized._cleanEmail) { + const copyBtn = document.createElement("button"); + copyBtn.type = "button"; + copyBtn.className = "copy-email-btn"; + copyBtn.title = "Copy email"; + copyBtn.style = "margin-left:8px; background:transparent; border:none; cursor:pointer;"; + copyBtn.innerHTML = ``; + + copyBtn.addEventListener("click", (e) => { + e.preventDefault(); + const textToCopy = normalized._cleanEmail; + if (!navigator.clipboard) { + // fallback + const ta = document.createElement("textarea"); + ta.value = textToCopy; + document.body.appendChild(ta); + ta.select(); + try { document.execCommand("copy"); } catch {} + document.body.removeChild(ta); + } else { + navigator.clipboard.writeText(textToCopy).catch(() => {}); + } + + // transient feedback + const feedback = document.createElement("span"); + feedback.textContent = "Copied!"; + feedback.style = "margin-left:8px; color: #2b7a0b; font-weight:600;"; + copyBtn.parentNode && copyBtn.parentNode.insertBefore(feedback, copyBtn.nextSibling); + setTimeout(() => { + feedback.remove(); + }, 1500); + }); + + // attach copy button after social icons + socialIcons.appendChild(copyBtn); + } + return cardClone; } @@ -138,7 +203,7 @@ fetch("./cardDetails.json") paginationContainer.appendChild(pageClone); } }) - .catch((error) => { +.catch((error) => { console.error("Error fetching JSON:", error); // Show error message to user cardsContainer.innerHTML = '

Error loading cards. The contributor made a mistake in cardDetails.json

'; @@ -174,7 +239,7 @@ function setPageStyle(selectedPage) { // // // Toggle mobile navbar menu -const attatchMobileMenuToggleFunction = () => { +const attachMobileMenuToggleFunction = () => { try { const menuIcon = document.getElementById("navbar-menu-icon-1"); const linkListContainer = document.getElementById( @@ -232,5 +297,5 @@ const attatchMobileMenuToggleFunction = () => { }; document.addEventListener("DOMContentLoaded", function () { - attatchMobileMenuToggleFunction(); + attachMobileMenuToggleFunction(); }); diff --git a/cardDetails.json b/cardDetails.json index d227ec2..9388f1d 100644 --- a/cardDetails.json +++ b/cardDetails.json @@ -2,10 +2,10 @@ "cardDetails": [ { "name": "Your Name", - "profession": "Your Profession", - "quote": "\"Your favourite quote\"
- Said By Me", + "profession": "Student and Future Software Engineer", + "quote": "\"Your fave quote\"
- Said By Me", "twitter": "https://twitter.com", - "dribbble": "https://dribbble.com", + "dribble": "https://dribbble.com", "behance": "https://behance.com", "github": "https://github.com", "linkedin": "https://linkedin.com", @@ -31,7 +31,7 @@ "profession": "Software Engineer || Beginner Open Source Contributor", "quote": "\"Rule no. 1 Do not touch it. If it works\"
- Said By Me", "twitter": "https://twitter.com", - "dribbble": "https://dribbble.com", + "dribble": "https://dribbble.com", "behance": "https://behance.com", "github": "https://github.com/namansinghrana", "linkedin": "https://www.linkedin.com/in/naman-singh-rana-a54842319/", @@ -42,7 +42,7 @@ "profession": "Frontend Developer || Beginner Open Source Contributor", "quote": "\"Code is like humor. When you have to explain it, it's bad.\"
- Said By Cory House", "twitter": "https://twitter.com/mayur_b_tekale", - "dribbble": "https://github.com/mayurr7", + "dribble": "https://github.com/mayurr7", "behance": "https://github.com/mayurr7", "github": "https://github.com/mayurr7", "linkedin": "https://www.linkedin.com/in/mayur-tekale-1540a023b", @@ -70,7 +70,7 @@ "profession": "Software Developer", "quote": "\"Early to bed, early to rise, makes a man young, wealthy and wise.\"
- Said by Benjamin Franklin", "twitter": "https://twitter.com/mo_chatr", - "dribbble": "https://dribbble.com/cbag", + "dribble": "https://dribbble.com/cbag", "behance": "https://behance.com", "github": "https://github.com/Mochatr", "linkedin": "https://www.linkedin.com/in/mochatr/", @@ -108,7 +108,7 @@ "profession": "Web Developer (Frontend & Backend)", "quote": "\"Gaming is Where reality meets limitless imagination\"
- Said By Me", "twitter": "https://twitter.com", - "dribbble": "https://dribbble.com", + "dribble": "https://dribbble.com", "behance": "https://behance.com", "github": "https://github.com/Farzan-Ullah", "linkedin": "https://linkedin.com/in/farzanofme", @@ -119,7 +119,7 @@ "profession": "Frontend Developer", "quote": "\"Give me six hours to chop down a tree and I will spend the first four sharpening the axe.\"
- Said By Abraham Lincoln", "twitter": "https://x.com/StellaNwae", - "dribbble": "https://dribbble.com/stellanic", + "dribble": "https://dribbble.com/stellanic", "behance": "https://www.behance.net/stellanwae", "github": "https://github.com/Stellanwae", "linkedin": "https://www.linkedin.com/in/stella-nicole-3b624814b/", diff --git a/index.html b/index.html index e3501f8..3201a65 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
Simple Contribution Logo - MENU Icone + MENU Icon