<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Task Generator</title>
<style>
body{
background-color: rgb(25,25,25);
}
.container {
text-align: center;
margin-top: 50px;
}
button {
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: rgb(73,47,100);
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: rgb(93,67,120);
}
#task-output {
font-size: 24px;
margin-top: 20px;
color:white;
font-family:sans-serif;
}
</style>
</head>
<body>
<div class="container">
<button id="generate-btn">Generate Task</button>
<p id="task-output"></p>
</div>
<script>
const items = [
"Psychology Textbook",
"History of Philosophy",
"Google UX Course",
"Script Notes Episode",
"Add 10 Words to dictionary",
"Transfer 10 Passwords",
"Chess Tutorial",
"Sort Inspiration Folder",
"Reduce Tabs by 50"
];
const generateBtn = document.getElementById("generate-btn");
const taskOutput = document.getElementById("task-output");
generateBtn.addEventListener("click", () => {
const randomItem = items[Math.floor(Math.random() * items.length)];
taskOutput.textContent = randomItem;
});
</script>
</body>
</html>