V.1.1

constants/gradientCard.js

@@ -1,89 +1,104 @@
 let gradientCards = [{
         id: 1,
+        colors: ['#6d28d9', '#db2777'],
         gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
         gradientName: 'daring new color monster',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 2,
+        colors: ['#f12711', '#f5af19'],
         gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
         gradientName: 'flare',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 3,
+        colors: ['#12c2e9', '#c471ed', '#f64f59'],
         gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)',
         gradientName: 'jshine',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 4,
+        colors: ['#00b09b', '#96c93d'],
         gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
         gradientName: 'ohhappiness',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 5,
+        colors: ['#c0392b', '#8e44ad'],
         gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
         gradientName: 'mello',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 6,
+        colors: ['#ad8cea', '#50dfb2'],
         gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
         gradientName: 'emeald',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 7,
+        colors: ['#f9e7fe', '#dafcfc'],
         gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
         gradientName: 'almost',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 8,
+        colors: ['#6a11cb', '#fc6767'],
         gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
         gradientName: 'galaxy',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 9,
+        colors: ['#ff1f01', '#ffc700'],
         gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
         gradientName: 'sol',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 10,
+        colors: ['#d0dae0', '#8a2eff'],
         gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
         gradientName: 'mikyway',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 11,
+        colors: ['#e3d2c4', '#fcfcfb'],
         gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
         gradientName: 'gold dust',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 12,
+        colors: ['#1e130c', '#9a8478'],
         gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
         gradientName: 'coffee',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 13,
+        colors: ['#1a2980', '#26d0ce'],
         gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
         gradientName: 'aqua',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 14,
+        colors: ['#4158D0', '#C850C0', 'FFCC70'],
         gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
         gradientName: 'smesh',
         gradientMaker: 'ShyamTala'
     },
     {
         id: 15,
+        colors: ['#00DBDE', '#FC00FF'],
         gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
         gradientName: 'smoothy',
         gradientMaker: 'ShyamTala'
@@ -94,19 +109,55 @@ let gradientCards = [{
 let gradientContaier = document.querySelector('.gradient_container');
 
 gradientCards.forEach((element) => {
-    gradientContaier.innerHTML += `
+
-    <div class="gradient_card" style="background:${element.gradientColor}">
+    let gradientCard = document.createElement("div");
-        <div class="gradient_info">
+    gradientCard.classList.add('gradient_card');
-            <div class="title_with_copy_btn">
+    gradientCard.setAttribute("style", `background:${element.gradientColor}`);
-                <h1 class="gradient_title" style="background:${element.gradientColor};-webkit-background-clip: text;
+
-                -webkit-text-fill-color: transparent;">${element.gradientName}</h1>
+    let gradientInfo = document.createElement('div');
-                <button class="copy_to_clipboard" data-clipboard-text="background:${element.gradientColor};" ><ion-icon name="copy-outline"></ion-icon></button>
+    gradientInfo.classList.add('gradient_info');
-            </div>
+
-            <p class="gradient_maker">by ${element.gradientMaker}</p>
+    let colors = document.createElement("div");
-        </div>
+    colors.classList.add("colors");
-     </div>
+
-    `;
+
+    element.colors.forEach((color) => {
+        let colorInput = document.createElement('input');
+        colorInput.classList.add("color")
+        colorInput.setAttribute("type", "color");
+        colorInput.setAttribute("value", color)
+        colors.append(colorInput)
     })
 
+    let titleWithCopyBtn = document.createElement('div');
+    titleWithCopyBtn.classList.add("title_with_copy_btn");
+
+    let gradientTitle = document.createElement('h1');
+    gradientTitle.classList.add('gradient_title');
+    gradientTitle.textContent = element.gradientName;
+    gradientTitle.setAttribute("style", `background:${element.gradientColor};-webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;`);
+
+    let coptToClipBoard = document.createElement('button');
+    coptToClipBoard.classList.add('copy_to_clipboard');
+    coptToClipBoard.setAttribute("data-clipboard-text", `background:${element.gradientColor};`)
+    coptToClipBoard.innerHTML = `<ion-icon name="copy-outline"></ion-icon>`;
+
+    let gradientAuther = document.createElement('p');
+    gradientAuther.classList.add("gradient_maker");
+    gradientAuther.textContent = `by ${element.gradientMaker}`;
 
 
+    // append elements
+    titleWithCopyBtn.append(gradientTitle);
+    titleWithCopyBtn.append(coptToClipBoard);
+
+    gradientInfo.append(colors)
+    gradientInfo.append(titleWithCopyBtn);
+    gradientInfo.append(gradientAuther);
+
+    gradientCard.append(gradientInfo);
+
+    gradientContaier.append(gradientCard);
+
+})

index.html

@@ -10,9 +10,8 @@
     <link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
 
-    <title>Monogradients</title>
+    <title>🌈Monogradients🎉</title>
 
     <!-- general style sheet -->
     <link rel="stylesheet" href="./style.css">

style.css

@@ -202,10 +202,6 @@ main.hero_section {
     /* overflow: hidden; */
 }
 
-/* .gradient_card::before
-{
-  
-} */
 
 .gradient_card:hover::before {
     content: '';
@@ -223,13 +219,38 @@ main.hero_section {
     position: absolute;
     bottom: 0;
     width: 100%;
-    background: #fff;
-    padding: 15px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
 }
 
+.colors
+{
+    background: rgba(255, 255, 255, .8);
+    -webkit-backdrop-filter: blur(25px);
+    backdrop-filter: blur(25px);
+    padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap:1rem;
+}
+
+input[type="color"] {
+	-webkit-appearance: none;
+    width: 20px;
+	height: 20px;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
+
 .title_with_copy_btn {
+    background: #fff;
+    padding-inline: 15px;
+    padding-top: 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -254,11 +275,15 @@ main.hero_section {
 }
 
 .gradient_info p {
-    margin-top: 5px;
+    background: #fff;
+    padding-inline: 15px;
+    padding-bottom: 8px;
     color: #adb1b5;
     font-size: 1.1rem;
     line-height: 20px;
     font-weight: 600;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
 
 span.copy_text