Adding Day #37

MadushankaRajapaksha · Jun 17, 2023 · 8ef73b4 · 8ef73b4
1 parent a2b0324
commit 8ef73b4
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 1 deletion.
diff --git a/Day #37 - Shadow Generator/README.md b/Day #37 - Shadow Generator/README.md
@@ -0,0 +1,9 @@
+# Day #37
+
+### Box Shadow Generator
+In this tutorial ([Open in Youtube](https://youtu.be/m31q1Aorkkc)),  I am gonna showing to you how to code a css box shadow generator with javascript. we create a project that you can generate css box shadow styles and project show you the generated shadow style codes and you can copy and use it in your site designs❗️
+
+# Screenshot
+Here we have project screenshot :
+
+![screenshot](screenshot.jpg)
diff --git a/Day #37 - Shadow Generator/index.html b/Day #37 - Shadow Generator/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Day #37 - Box Shadow Generator | AsmrProg</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="result">
+            <div id="preview"></div>
+        </div>
+
+        <div class="settings">
+            <div class="range-wrapper">
+                <label for="x-shadow">Horizontal Shadow :</label>
+                <input type="range" id="x-shadow" min="-100" max="100" value="-6">
+            </div>
+            <div class="range-wrapper">
+                <label for="y-shadow">Vertical Shadow :</label>
+                <input type="range" id="y-shadow" min="-100" max="100" value="15">
+            </div>
+            <div class="range-wrapper">
+                <label for="blur-r">Blur Radius :</label>
+                <input type="range" id="blur-r" min="0" max="100" value="30">
+            </div>
+            <div class="range-wrapper">
+                <label for="spread-r">Spread Radius :</label>
+                <input type="range" id="spread-r" min="-50" max="50" value="6">
+            </div>
+            <div class="range-wrapper">
+                <label for="border-r">Border Radius :</label>
+                <input type="range" id="border-r" min="0" max="100" step="1" value="70">
+            </div>
+            <div class="range-wrapper">
+                <label for="shadow-opacity">Shadow Opacity :</label>
+                <input type="range" id="shadow-opacity" min="0" max="1" step="0.1" value="0.5">
+            </div>
+
+            <div class="input-wrapper">
+                <label for="inset-shadow">Inset Shadow :</label>
+                <input type="checkbox" id="inset-shadow">
+            </div>
+
+            <div id="color-wrapper">
+                <label for="shadow-color">Shadow Color :</label>
+                <input type="color" id="shadow-color">
+            </div>
+
+        </div>
+
+
+        <div class="code-container">
+            <textarea id="styles" rows="2"></textarea>
+            <button id="copy-styles" onclick="copyStyles()">Copy Styles</button>
+        </div>
+
+
+    </div>
+
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/Day #37 - Shadow Generator/index.js b/Day #37 - Shadow Generator/index.js
@@ -0,0 +1,53 @@
+const preview = document.getElementById("preview"),
+    styles = document.getElementById("styles"),
+    ranges = document.querySelectorAll(".settings input"),
+    copyButton = document.getElementById("copy-styles");
+
+// Add event listener to each range input
+ranges.forEach((slider) => {
+    slider.addEventListener("input", generateStyles);
+});
+
+// Function to generate and update styles
+function generateStyles() {
+    const xShadow = document.getElementById("x-shadow").value;
+    const yShadow = document.getElementById("y-shadow").value;
+    const blurRadius = document.getElementById("blur-r").value;
+    const spreadRadius = document.getElementById("spread-r").value;
+    const shadowColor = document.getElementById("shadow-color").value;
+    const shadowOpacity = document.getElementById("shadow-opacity").value;
+    const shadowInset = document.getElementById("inset-shadow").checked;
+    const borderRadius = document.getElementById("border-r").value;
+
+    // Create the box shadow CSS property value
+    const boxShadow = `${shadowInset ? "inset " : ""} ${xShadow}px ${yShadow}px ${blurRadius}px ${spreadRadius}px ${hexToRgba(shadowColor, shadowOpacity)}`;
+
+    // Update the preview element styles
+    preview.style.boxShadow = boxShadow;
+    preview.style.borderRadius = `${borderRadius}px`;
+
+    // Update textarea with generated styles
+    styles.textContent = `box-shadow: ${boxShadow};\nborder-radius: ${borderRadius}px;`;
+
+}
+
+// Function to convert hex color and opacity to rgba format
+function hexToRgba(shadowColor, shadowOpacity) {
+    const r = parseInt(shadowColor.substr(1, 2), 16);
+    const g = parseInt(shadowColor.substr(3, 2), 16);
+    const b = parseInt(shadowColor.substr(5, 2), 16);
+
+    return `rgba(${r}, ${g}, ${b}, ${shadowOpacity})`;
+}
+
+// Function to copy the generated styles
+function copyStyles() {
+    styles.select();
+    document.execCommand("copy");
+    copyButton.innerText = "Copied!";
+    setTimeout(() => {
+        copyButton.innerText = "Copy Styles";
+    }, 500);
+}
+
+generateStyles();
diff --git a/Day #37 - Shadow Generator/screenshot.jpg b/Day #37 - Shadow Generator/screenshot.jpg
diff --git a/Day #37 - Shadow Generator/style.css b/Day #37 - Shadow Generator/style.css
@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body{
+    background-color: #311b92;
+}
+
+label{
+    font-size: 14px;
+}
+
+.container{
+    background-color: #fff;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    padding: 30px;
+    width: 80vmin;
+    border-radius: 25px;
+    box-shadow: 0 20px 40px rgba(2, 42, 83, 0.2);
+}
+
+.result{
+    padding: 20px 0 120px;
+}
+
+#preview{
+    background-color: #311b92;
+    width: 200px;
+    height: 200px;
+    position: relative;
+    margin: auto;
+    border-radius: 70px;
+    box-shadow: -6px 15px 30px 6px rgba(0, 0, 0, 0.5);
+}
+
+.settings{
+    display: grid;
+    grid-template-columns: 6fr 6fr;
+    gap: 15px 25px;
+}
+
+.range-wrapper, #color-wrapper{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+input[type="range"]{
+    width: 100%;
+    cursor: pointer;
+}
+
+input[type="checkbox"]{
+    cursor: pointer;
+}
+
+.code-container{
+    display: grid;
+    grid-template-columns: 6fr 2fr;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.code-container button{
+    background-color: #311b92;
+    border-radius: 5px;
+    cursor: pointer;
+    border: none;
+    color: #fff;
+}
+
+textarea{
+    resize: none;
+    padding: 5px;
+    border: 1px solid #000;
+    border-radius: 5px;
+}
+
+.input-wrapper{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+#color-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 5px;
+}
+
+input[type="color"]{
+    width: 25px;
+    height: 25px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+}
diff --git a/README.md b/README.md
@@ -46,8 +46,9 @@ Here we have list of projects:
 34. Chrome Color Picker Extension
 35. ASCII Donut Animation
 36. Stock Tracker App
+37. Box Shadow Generator
 
-## Where is rest 64 Projects
+## Where is rest 63 Projects
 
 We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
 You can vote for upcoming projects on our channel **community** page :wink: