Skip to content

Instantly share code, notes, and snippets.

@seanboe

seanboe/index.html

Created May 19, 2023 02:53
Show Gist options
  • Save seanboe/4f1bc251b20406bc63af80e37e1384d2 to your computer and use it in GitHub Desktop.
Save seanboe/4f1bc251b20406bc63af80e37e1384d2 to your computer and use it in GitHub Desktop.
Download ZIP
Stats project counter!
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/9f3da960b8.js" crossorigin="anonymous"></script>
<title>🧮Statz🧮</title>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'cyan': '#31C2CC',
'light-cyan': '#9CDEE2',
'tannish': '#FFFDFB',
'dark-blue': '#335566',
'dark': '#25171B',
}
}
}
}
</script>
</head>
<body class="bg-light-cyan items-center text-slate-900 font-mono">
<div class="grid grid-rows-3">
<h1 class="text-7xl text-center mt-24">Which one do you like most??</h1>
<div class="grid grid-cols-3 gap-48 mx-16">
<div class="bg-cyan rounded-lg p-8 text-center">
<h1 class="text-5xl font-extrabold">Drink 1</h1>
<br>
<button class="font-bold rounded-lg text-3xl p-4 border-slate-900 border-4 hover:border-dotted" onclick="updateScore(1)">Click!</button>
</div>
<div class="bg-cyan rounded-lg p-8 text-center">
<h1 class="text-5xl font-extrabold">Drink 2</h1>
<br>
<button class="font-bold rounded-lg text-3xl p-4 border-slate-900 border-4 hover:border-dotted" onclick="updateScore(2)">Click!</button>
</div>
<div class="bg-cyan rounded-lg p-8 text-center">
<h1 class="text-5xl font-extrabold">Drink 3</h1>
<br>
<button class="font-bold rounded-lg text-3xl p-4 border-slate-900 border-4 hover:border-dotted" onclick="updateScore(3)">Click!</button>
</div>
</div>
<div class="text-center">
<h1 id="numbers" class="text-3xl mt-24">Order: 1, 2, 3</h1>
<br>
<button class="font-bold rounded-lg text-3xl p-4 border-slate-900 border-4 hover:border-dotted" onclick="getNumbers()">Generate!</button>
</div>
</div>
<script>
let drink1Score = 0;
let drink2Score = 0;
let drink3Score = 0;
function updateScore(drink) {
if (drink == 1)
drink1Score++;
else if (drink == 2)
drink2Score++;
else if (drink == 3)
drink3Score++;
console.log("Drink 1: " + drink1Score + ", Drink 2: " + drink2Score + ", Drink 3: " + drink3Score);
}
function getNumbers() {
let numbers = [1, 2, 3]
let first = numbers.splice(numbers.length * Math.random(), 1)[0];
let second = numbers.splice(numbers.length * Math.random(), 1)[0];
let third = numbers[0];
document.getElementById("numbers").innerHTML = "Order: " + first + ", " + second + ", " + third;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment