Merge pull request #797 from HarshitVashisht11/codespace-miniature-computing-machine-w657jvxgqxwhv94

PBJI · web-flow · commit e02189a4c3ce · 2023-10-09T20:36:06.000+05:30
Created Random Collor Palette Generator
diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/README.md b/RandomColorPaletteGenerator/HarshitVashisht11/README.md
@@ -0,0 +1,5 @@
+## Random Color Palette Generator
+
+screenshot:
+
+![Alt text](<Screenshot (113).png>)
diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/Screenshot (113).png b/RandomColorPaletteGenerator/HarshitVashisht11/Screenshot (113).png
diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/index.html b/RandomColorPaletteGenerator/HarshitVashisht11/index.html
@@ -0,0 +1,16 @@
+<!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>Random Color Palette Generator</title>
+</head>
+<body>
+    <div class="palette">
+        <!-- Color cards will be added dynamically here -->
+    </div>
+    <button id="generateButton">Generate Colors</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/script.js b/RandomColorPaletteGenerator/HarshitVashisht11/script.js
@@ -0,0 +1,46 @@
+const palette = document.querySelector('.palette');
+const generateButton = document.getElementById('generateButton');
+
+function getRandomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+function createColorCard() {
+    const colorCard = document.createElement('div');
+    colorCard.classList.add('color-card');
+    const hexCode = getRandomColor();
+    colorCard.style.backgroundColor = hexCode;
+    colorCard.innerHTML = `
+        <div class="hex-code">${hexCode}</div>
+    `;
+    palette.appendChild(colorCard);
+    
+    colorCard.addEventListener('click', () => {
+        const tempInput = document.createElement('input');
+        tempInput.value = hexCode;
+        document.body.appendChild(tempInput);
+        tempInput.select();
+        document.execCommand('copy');
+        document.body.removeChild(tempInput);
+        alert(`Hex code ${hexCode} copied to clipboard!`);
+    });
+}
+
+function generatePalette(numColors) {
+    palette.innerHTML = '';
+    for (let i = 0; i < numColors; i++) {
+        createColorCard();
+    }
+}
+
+generateButton.addEventListener('click', () => {
+    const numColors = Math.floor(Math.random() * 4 + 1) * 2 * 2; // 10, 12, 14, or 16 colors
+    generatePalette(numColors);
+});
+
+generatePalette(10); 
diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/style.css b/RandomColorPaletteGenerator/HarshitVashisht11/style.css
@@ -0,0 +1,37 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.palette {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+}
+
+.color-card {
+    width: 100px;
+    height: 100px;
+    border: 2px solid #000;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.hex-code {
+    font-size: 16px;
+}
+
+#generateButton {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+}
