Created
May 19, 2023 02:53
-
-
Save seanboe/4f1bc251b20406bc63af80e37e1384d2 to your computer and use it in GitHub Desktop.
Stats project counter!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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