Calculator Tools Calculator Tools
Create

Fun Lottery Number Picker

Sep 24, 2023

About this app

A fun and colorful lottery number picker

Fun Lottery Number Picker 🎉 Lottery Number Generator 🎉 Generate numbers

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Fun Lottery Number Picker</title>
<meta name="description" content="A fun and colorful lottery number picker">
<meta name="keywords" content="lottery, number picker, colorful, fun">

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

<script type="text/javascript">
try {
function generateNumbers() {
let numbers = [];
while(numbers.length < 6) {
let num = Math.floor(Math.random() * 49) + 1;
if(!numbers.includes(num)) {
numbers.push(num);
}
}
return numbers.sort((a, b) => a - b);
}

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("generate").addEventListener("click", function() {
let numbers = generateNumbers();
document.getElementById("numbers").innerHTML = numbers.join(", ");
});
});
} catch (error) {
throw error;
}
</script>

<style>
body {
font-family: 'Montserrat', sans-serif;
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
color: #442b48;
}
#main-container {
text-align: center;
padding-top: 15%;
}

#numbers {
font-size: 2em;
color: #442b48;
}

#generate {
margin-top: 20px;
padding: 10px 20px;
font-size: 1.2em;
border: none;
background-color: #442b48;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}

#generate:hover {
background-color: #5a3b5d;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>🎉 Lottery Number Generator 🎉</h1>
<p id="numbers"></p>
<button id="generate">Generate numbers</button>
</div>
</body>
</html>