Merge pull request #909 from Vasunayak262/Random-Color-Generator-Vasu…

…nayak262 Added Random-Color-Generator
thinkswell · Oct 14, 2023 · 30d4060 · 30d4060
2 parents 0290b2f + 8f70fcb
commit 30d4060
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 0 deletions.
diff --git a/RandomColorGenerator/Vasunayak262/README.md b/RandomColorGenerator/Vasunayak262/README.md
@@ -0,0 +1,12 @@
+# Color Generator App
+
+A simple web application that generates random colors and provides their HEX, RGB, and HSL values.
+
+![Screenshot](images/Screenshot1.png)
+
+
+## Features
+
+- Generates random colors with HEX, RGB, and HSL values.
+- Allows copying color values to the clipboard.
+- Displays a history of generated colors.
diff --git a/RandomColorGenerator/Vasunayak262/images/Screenshot1.png b/RandomColorGenerator/Vasunayak262/images/Screenshot1.png
diff --git a/RandomColorGenerator/Vasunayak262/index.html b/RandomColorGenerator/Vasunayak262/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Color Generator</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+    <div class="container">
+        <div class="color-box">
+            <h1 class="color-heading">Color Picker</h1>
+            <button id="generate-color">Generate Color</button>
+            <div class="color-info">
+                <p class="color-value" id="hex-value">#FFFFFF</p>
+                <p class="color-value" id="rgb-value">rgb(255, 255, 255)</p>
+                <p class="color-value" id="hsl-value">hsl(0%, 0%, 100%)</p>
+            </div>
+            <button id="copy-button" type="button" class="btn btn-light" >Copy to Clipboard</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/RandomColorGenerator/Vasunayak262/script.js b/RandomColorGenerator/Vasunayak262/script.js
@@ -0,0 +1,89 @@
+const generateColorButton = document.getElementById("generate-color");
+const hexValue = document.getElementById("hex-value");
+const rgbValue = document.getElementById("rgb-value");
+const hslValue = document.getElementById("hsl-value");
+const copyButton = document.getElementById("copy-button");
+const colorBox = document.querySelector(".color-box");
+const colorHistory = document.querySelector(".color-history");
+
+generateColorButton.addEventListener("click", generateRandomColor);
+copyButton.addEventListener("click", copyToClipboard);
+
+function generateRandomColor() {
+    // Generate a random color
+    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
+
+    // Update color values
+    hexValue.textContent = randomColor;
+    const rgbColor = hexToRgb(randomColor);
+    rgbValue.textContent = `rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b})`;
+    const hslColor = rgbToHsl(rgbColor.r, rgbColor.g, rgbColor.b);
+    hslValue.textContent = `hsl(${hslColor.h}, ${hslColor.s}%, ${hslColor.l}%)`;
+
+    // Update color preview
+    colorBox.style.backgroundColor = randomColor;
+
+    // Add the generated color to the history panel
+    const colorHistoryItem = document.createElement("div");
+    colorHistoryItem.classList.add("color-history-item");
+    colorHistoryItem.style.backgroundColor = randomColor;
+    colorHistory.appendChild(colorHistoryItem);
+}
+
+function copyToClipboard() {
+    const textToCopy = hexValue.textContent;
+
+    // Create a text area element, set its value, and select it for copying
+    const textArea = document.createElement("textarea");
+    textArea.value = textToCopy;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+
+    // Provide user feedback (e.g., change the button text temporarily)
+    copyButton.textContent = "Copied!";
+    setTimeout(() => {
+        copyButton.textContent = "Copy to Clipboard";
+    }, 2000);
+}
+
+// Helper functions for color conversion
+function hexToRgb(hex) {
+    const bigint = parseInt(hex.slice(1), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return { r, g, b };
+}
+
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max === min) {
+        h = s = 0; // grayscale
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+
+    return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
diff --git a/RandomColorGenerator/Vasunayak262/style.css b/RandomColorGenerator/Vasunayak262/style.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url('https://e0.pxfuel.com/wallpapers/20/892/desktop-wallpaper-firewatch-green-forest-mountains-minimal.jpg'); 
+    display: flex;
+    background-size: cover; 
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+.container {
+    text-align: center;
+}
+
+
+.color-box {
+    background-color: #FFFFFF;
+    width: 300px;
+    height: 300px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    position: relative; /* Add this for animation */
+    overflow: hidden; /* Add this for animation */
+    transition: transform 0.3s ease-in-out; /* Add this for animation */
+}
+
+.color-box:hover {
+    transform: scale(1.05); /* Add this for a smooth hover effect */
+}
+
+.color-heading {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 0 0 20px;
+}
+
+#generate-color {
+    background-color: #3498db;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+    font-weight: bold;
+}
+
+#color-value {
+    font-size: 20px;
+    margin: 0;
+}
+
+.color-box h1 {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 0 0 20px;
+}