Amad3eu/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Colors</title>
    <style>
        body {

  color: rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 600;
  font-family: consolas;
}
        button{
    margin: 2rem;
    background: rgb(2,0,36);
    color: white;
    border: none;
    padding: 1.5rem 5.3rem;
    font-size: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 5px;
    cursor: pointer;

}
    </style>
</head>

<body>
    <h1>Welcome!</h1>
    <button>Click Me</button>

    <script src="app.js"></script>
</body>

</html>

## index.js
const button = document.querySelector('button');
const h1 = document.querySelector('h1');

button.addEventListener('click', function () {
    const newColor = makeRandColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;
})

const makeRandColor = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    return `rgb(${r}, ${g}, ${b})`;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Random Colors</title>
	<style>
	body {

	color: rgb(0, 0, 0);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	font-size: 1.6rem;
	text-align: center;
	font-weight: 600;
	font-family: consolas;
	}
	button{
	margin: 2rem;
	background: rgb(2,0,36);
	color: white;
	border: none;
	padding: 1.5rem 5.3rem;
	font-size: 1.5rem;
	font-family: 'Courier New', Courier, monospace;
	border-radius: 5px;
	cursor: pointer;

	}
	</style>
	</head>

	<body>
	<h1>Welcome!</h1>
	<button>Click Me</button>

	<script src="app.js"></script>
	</body>

	</html>
	const button = document.querySelector('button');
	const h1 = document.querySelector('h1');

	button.addEventListener('click', function () {
	const newColor = makeRandColor();
	document.body.style.backgroundColor = newColor;
	h1.innerText = newColor;
	})

	const makeRandColor = () => {
	const r = Math.floor(Math.random() * 255);
	const g = Math.floor(Math.random() * 255);
	const b = Math.floor(Math.random() * 255);
	return `rgb(${r}, ${g}, ${b})`;
	}