gradient code section added in color cards

constants/gradientCard.js

@@ -393,21 +393,21 @@ let gradientCards = [{
     },
     {
         id: ++autoId,
-        colors: ['#5433ff', '#20bdff','#a5fecb'],
+        colors: ['#5433ff', '#20bdff', '#a5fecb'],
         gradientColor: 'linear-gradient(90deg,#5433ff, #20bdff,#a5fecb)',
         gradientName: 'lunada',
         gradientMaker: 'ui.ux.gradient'
     },
     {
         id: ++autoId,
-        colors: ['#acb6e5','#86fde8'],
+        colors: ['#acb6e5', '#86fde8'],
         gradientColor: 'linear-gradient(90deg,#acb6e5, #86fde8)',
         gradientName: 'windy',
         gradientMaker: 'ui.ux.gradient'
     },
     {
         id: ++autoId,
-        colors: ['#ec008c','#fc6767'],
+        colors: ['#ec008c', '#fc6767'],
         gradientColor: 'linear-gradient(90deg,#ec008c, #fc6767)',
         gradientName: 'dimigo',
         gradientMaker: 'ui.ux.gradient'
@@ -438,6 +438,75 @@ gradientCards.forEach((element) => {
         colors.append(colorInput)
     })
 
+    function generateColorCode(colors) {
+        console.log(colors);
+        let gradientCode = document.createElement("div");
+        gradientCode.classList.add('gradient_code');
+
+        let dummyTxtGradient = document.createElement("span");
+        dummyTxtGradient.classList.add("dummy_txt_gradient");
+        dummyTxtGradient.textContent = "linear-gradient";
+
+        let dummyTxtBracketOpen = document.createElement("span");
+        dummyTxtBracketOpen.classList.add("dummy_txt_bracket_open");
+        dummyTxtBracketOpen.textContent = "(";
+
+        let dummyTxtBracketClose = document.createElement("span");
+        dummyTxtBracketClose.classList.add("dummy_txt_bracket_close");
+        dummyTxtBracketClose.textContent = ")";
+
+        let dummyTxtGradientPos = document.createElement("span");
+        dummyTxtGradientPos.classList.add("dummy_txt_gradient_pos");
+        dummyTxtGradientPos.textContent = "to right, ";
+
+        let dummyTxtComma = document.createElement("span");
+        dummyTxtComma.classList.add("dummy_txt_comma");
+        dummyTxtComma.textContent = ",";
+
+        let dummyTxtComma2 = document.createElement("span");
+        dummyTxtComma2.classList.add("dummy_txt_comma");
+        dummyTxtComma2.textContent = ",";
+
+        function printHex(colorCode) {
+            let dummyTxtColor = document.createElement("span");
+            dummyTxtColor.classList.add("dummy_txt_color_code");
+            dummyTxtColor.textContent = colorCode;
+
+            gradientCode.append(dummyTxtColor)
+        }
+
+        gradientCode.append(dummyTxtGradient)
+        gradientCode.append(dummyTxtBracketOpen)
+        gradientCode.append(dummyTxtGradientPos)
+        colors.forEach((color, index) => {
+            if (colors.length == 2) {
+                if (index == colors.length - 1) {
+                    printHex(color)
+                } else {
+                    printHex(color)
+                    gradientCode.append(dummyTxtComma)
+                }
+            } else {
+                if (index == colors.length - 1) {
+                    printHex(color)
+                } else {
+                    if (index == 1) {
+                        printHex(color)
+                        gradientCode.append(dummyTxtComma2)
+                    } else {
+                        printHex(color)
+                        gradientCode.append(dummyTxtComma)
+                    }
+                }
+            }
+        })
+        gradientCode.append(dummyTxtBracketClose);
+
+        return gradientCode;
+
+
+    }
+
     let titleWithCopyBtn = document.createElement('div');
     titleWithCopyBtn.classList.add("title_with_copy_btn");
 
@@ -457,11 +526,17 @@ gradientCards.forEach((element) => {
     gradientAuther.textContent = `by ${element.gradientMaker}`;
 
 
+    let gradientCode = generateColorCode(element.colors)
+
     // append elements
+
+
+
     titleWithCopyBtn.append(gradientTitle);
     titleWithCopyBtn.append(coptToClipBoard);
 
-    gradientInfo.append(colors)
+    gradientInfo.append(colors);
+    gradientInfo.append(gradientCode);
     gradientInfo.append(titleWithCopyBtn);
     gradientInfo.append(gradientAuther);
 

css/dark.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,700;1,700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
 
 * {
   margin: 0;
@@ -345,7 +345,7 @@ main.hero_section {
   position: relative;
   background: transparent;
   min-width: 260px;
-  min-height: 300px;
+  min-height: 355px;
   border:1px solid rgba(0, 0, 0, 0.4)  ;
   box-shadow: 0px 10px 40px #2d2b2b;
   border-radius: 5px;
@@ -394,6 +394,37 @@ main.hero_section {
   background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
 }
 
+.gradient_code
+{
+  width: 100%;
+  font-family: 'Fira Code', monospace;
+  font-size: 14px;
+  line-height: 24px;
+  color: #7dd3fc;
+  background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
+  padding:10px 20px;
+}
+
+.dummy_txt_gradient
+{
+  color:#f472b6;
+}
+
+.dummy_txt_comma,.dummy_txt_bracket_open,.dummy_txt_bracket_close
+{
+  color:#64748b;
+}
+
+.dummy_txt_gradient_pos
+{
+  color: #7dd3fc;
+}
+
+.dummy_txt_color_code
+{
+  color: #f8fafc;
+}
+
 .colors {
   background: linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.4));
   -webkit-backdrop-filter: blur(25px);

css/white.css

@@ -325,7 +325,7 @@ main.hero_section {
 .gradient_card {
     position: relative;
     min-width: 260px;
-    min-height: 300px;
+    min-height: 355px;
     box-shadow: 0px 10px 40px #cec7c7;
     border-radius: 5px;
     /* overflow: hidden; */
@@ -386,6 +386,38 @@ input[type="color"]::-moz-color-swatch {
     border: none;
 }
 
+.gradient_code
+{
+  width: 100%;
+  font-family: 'Fira Code', monospace;
+  font-size: 14px;
+  line-height: 24px;
+  color: #7dd3fc;
+  background: linear-gradient(to top,rgba(255,255,255,.8),rgba(255,255,255,.8));
+  padding:10px 20px;
+}
+
+.dummy_txt_gradient
+{
+  color:#0069c2;
+}
+
+.dummy_txt_comma,.dummy_txt_bracket_open,.dummy_txt_bracket_close
+{
+  color:#858585;
+}
+
+.dummy_txt_gradient_pos
+{
+  color: #d35538;
+}
+
+.dummy_txt_color_code
+{
+  color: #1b1b1b;
+}
+
+
 .title_with_copy_btn {
     background: #fff;
     padding-inline: 15px;

index.html

@@ -55,7 +55,9 @@
   <div class="container">
     <nav>
       <h1 class="logo_text">🌈Monogradients🎉</h1>
-      <button id="theme_toggler"><ion-icon name="sunny"></ion-icon></button>
+      <button id="theme_toggler">
+        <ion-icon name="sunny"></ion-icon>
+      </button>
     </nav>
 
     <main class="hero_section">