-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
27 lines (26 loc) · 1.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<script src="index.js"></script>
<title>3X + 1</title>
</head>
<body class="flex items-center justify-center" style="background: white;">
<div class="mt-20 bg-white flex flex-col space-y-10 justify-center items-center">
<div class="bg-white w-96 shadow-xl rounded p-5">
<h1 class="text-3xl font-medium">3X + 1</h1>
<p class="text-sm mt-2">This is also known as the collatz conjecture whereby any even a number passed if even will be divided by 2 and if odd it will be multiplied by three plus one. 😅</p>
<p class="text-sm mt-2"><span class="bg-green-300">Even</span> expressions are green while <span class="bg-red-300">odd</span> are pink.</p>
<p class="text-sm mt-2">Please refresh the page to input another value. 😁</p>
<div class="space-y-5 mt-5" id="root">
<input class="text-center w-full bg-gray-500 rounded-md text-white py-3 font-medium outline-none" type="number" placeholder="Input any number" id="inputValue">
<button class="text-center w-full bg-blue-900 rounded-md text-white py-3 font-medium outline-none" onclick="colatz(document.getElementById('inputValue').value)">Run</button>
<div class="cla"></div>
</div>
</div>
</div>
</body>
</html>