diff --git a/random-color-generator/index.html b/random-color-generator/index.html new file mode 100644 index 0000000..e586fd5 --- /dev/null +++ b/random-color-generator/index.html @@ -0,0 +1,16 @@ + + + + + Random Color Generator + + + +
+
#FFFFFF
+ +
+ + + + diff --git a/random-color-generator/script.js b/random-color-generator/script.js new file mode 100644 index 0000000..f960c5e --- /dev/null +++ b/random-color-generator/script.js @@ -0,0 +1,18 @@ +const colorCode = document.getElementById('colorCode'); +const btn = document.getElementById('btn'); + +function getRandomColor() { + const hex = Math.floor(Math.random() * 0xffffff) + .toString(16) + .padStart(6, '0'); + return `#${hex}`; +} + +function setColor() { + const color = getRandomColor(); + document.body.style.backgroundColor = color; + colorCode.textContent = color; +} + +btn.addEventListener('click', setColor); +window.addEventListener('load', setColor); diff --git a/random-color-generator/styles.css b/random-color-generator/styles.css new file mode 100644 index 0000000..6da0aea --- /dev/null +++ b/random-color-generator/styles.css @@ -0,0 +1,36 @@ +* { + box-sizing: border-box; +} +body, html { + margin: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-family: sans-serif; + background-color: #ffffff; +} +.container { + text-align: center; + padding: 2rem; + border: 2px solid #ccc; + border-radius: 12px; + background-color: white; +} +#colorCode { + font-size: 2rem; + margin-bottom: 1rem; + font-weight: bold; +} +#btn { + padding: 10px 20px; + font-size: 1rem; + border: none; + background-color: #0077ff; + color: white; + border-radius: 6px; + cursor: pointer; +} +#btn:hover { + background-color: #005fcc; +} \ No newline at end of file