feat: add Random Color Generator mini project

Aditya-githubbb · Aditya-githubbb · commit f288fd1f35b7 · 2025-07-04T20:45:11.000+05:30
diff --git a/random-color-generator/index.html b/random-color-generator/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Random Color Generator</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <div id="colorCode">#FFFFFF</div>
+    <button id="btn">Generate Color</button>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/random-color-generator/script.js 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
@@ -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;
+}
