palakgupta2712/app.js

## app.js
const colorCard = document.getElementById("colorCard");
const randomColorGenerator = document.getElementById("randomColorGenerator");
const colorCode = document.getElementById("colorCode");

document.addEventListener("DOMContentLoaded", () => {
  let randomColor = Math.floor(Math.random() * 16777215).toString(16);
  colorCard.style.backgroundColor = `#${randomColor}`;
  colorCode.value = `#${randomColor}`;
});

randomColorGenerator.addEventListener("click", () => {
  let randomColor = Math.floor(Math.random() * 16777215).toString(16);
  colorCard.style.backgroundColor = `#${randomColor}`;
  colorCode.value = `#${randomColor}`;
});

const CopyToClipboard = (id) => navigator.clipboard.writeText(id);

//to copy hex code
colorCode.addEventListener("click", () => {
  CopyToClipboard(colorCode.value);
  alert(`Copied : ${colorCode.value}`);
});

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
    <!-- Bootstrap JS-->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
      integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
      crossorigin="anonymous"
    ></script>

    <title>Random Color Generator</title>
  </head>
  <body>
    <div class="container text-center">
      <h1>Random Color Generator</h1>
      <!-- Color Card -->
      <div>
        <div class="color-card" id="colorCard"></div>
      </div>
      <!-- Random Color Generator Button-->
      <button
        type="button"
        id="randomColorGenerator"
        class="btn btn-dark"
        style="margin: 10px"
      >
        Generate Random Color
      </button>
      <!-- Color Codes -->
      <div class="row">
        <div class="col-sm">HEX Color Code</div>
        <div class="col-sm">
          <input id="colorCode" readonly="readonly" />
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

## styles.css
#colorCard {
  display: flex;
  height: 200px;
  width: 200px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  margin: auto;
}
#colorCode {
  border: 1px solid #979090;
  padding: 10px;
  border-radius: 5px;
  width: 50%;
  cursor: pointer;
}
	const colorCard = document.getElementById("colorCard");
	const randomColorGenerator = document.getElementById("randomColorGenerator");
	const colorCode = document.getElementById("colorCode");

	document.addEventListener("DOMContentLoaded", () => {
	let randomColor = Math.floor(Math.random() * 16777215).toString(16);
	colorCard.style.backgroundColor = `#${randomColor}`;
	colorCode.value = `#${randomColor}`;
	});

	randomColorGenerator.addEventListener("click", () => {
	let randomColor = Math.floor(Math.random() * 16777215).toString(16);
	colorCard.style.backgroundColor = `#${randomColor}`;
	colorCode.value = `#${randomColor}`;
	});

	const CopyToClipboard = (id) => navigator.clipboard.writeText(id);

	//to copy hex code
	colorCode.addEventListener("click", () => {
	CopyToClipboard(colorCode.value);
	alert(`Copied : ${colorCode.value}`);
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="styles.css" />
	<!-- Bootstrap CSS -->
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
	integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
	crossorigin="anonymous"
	/>
	<!-- Bootstrap JS-->
	<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
	integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
	crossorigin="anonymous"
	></script>

	<title>Random Color Generator</title>
	</head>
	<body>
	<div class="container text-center">
	<h1>Random Color Generator</h1>
	<!-- Color Card -->
	<div>
	<div class="color-card" id="colorCard"></div>
	</div>
	<!-- Random Color Generator Button-->
	<button
	type="button"
	id="randomColorGenerator"
	class="btn btn-dark"
	style="margin: 10px"
	>
	Generate Random Color
	</button>
	<!-- Color Codes -->
	<div class="row">
	<div class="col-sm">HEX Color Code</div>
	<div class="col-sm">
	<input id="colorCode" readonly="readonly" />
	</div>
	</div>
	</div>
	<script src="app.js"></script>
	</body>
	</html>
	#colorCard {
	display: flex;
	height: 200px;
	width: 200px;
	border-radius: 20px;
	align-items: center;
	justify-content: center;
	margin: auto;
	}
	#colorCode {
	border: 1px solid #979090;
	padding: 10px;
	border-radius: 5px;
	width: 50%;
	cursor: pointer;
	}