diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/README.md b/RandomColorPaletteGenerator/HarshitVashisht11/README.md new file mode 100644 index 000000000..ffe647e25 --- /dev/null +++ b/RandomColorPaletteGenerator/HarshitVashisht11/README.md @@ -0,0 +1,5 @@ +## Random Color Palette Generator + +screenshot: + +![Alt text]() \ No newline at end of file diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/Screenshot (113).png b/RandomColorPaletteGenerator/HarshitVashisht11/Screenshot (113).png new file mode 100644 index 000000000..2a602ef75 Binary files /dev/null and b/RandomColorPaletteGenerator/HarshitVashisht11/Screenshot (113).png differ diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/index.html b/RandomColorPaletteGenerator/HarshitVashisht11/index.html new file mode 100644 index 000000000..9f149e646 --- /dev/null +++ b/RandomColorPaletteGenerator/HarshitVashisht11/index.html @@ -0,0 +1,16 @@ + + + + + + + Random Color Palette Generator + + +
+ +
+ + + + diff --git a/RandomColorPaletteGenerator/HarshitVashisht11/script.js b/RandomColorPaletteGenerator/HarshitVashisht11/script.js new file mode 100644 index 000000000..30586524f --- /dev/null +++ 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 = ` +
${hexCode}
+ `; + 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 new file mode 100644 index 000000000..e715871f7 --- /dev/null +++ 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; +}