Javascript Kalkulator Zodiak

Membuat program kalkulator zodiak dengan javascript

Halo gan, kali ini ane mau ngasih tau cara bikin program dengan javascript untuk membuat kalkulator zodiak hehe. Okelah, tanpa basa basi lagi, langsung saja liat scriptnya

Script :

<html>
<head>
<title> Muhamad Ahmadin </title>
<style>
fieldset {width:400px;
background-color:#333;
border-top:11px solid maroon;
border-radius:20px 10px;
margin:auto;
transition:2s;}

fieldset:hover {box-shadow:5px 8px 11px maroon;
padding:10px;
margin:auto;}

button {background-color:maroon;
color:black;
font-family:courier;
border:1px solid maroon;
border-radius:5px 5px;
transition:2s;
cursor:pointer;}

button:hover {padding:13 30;
background-color:firebrick;
color:white;
font-weight:bold;
font-size:16px;
border-radius:10px 5px;}

</style></head>
<script>

function cek() {
var zod = {1:"Aquarius", 2:"Pisces", 3:"Aries", 4:"Taurus", 5:"Gemini",
6:"Cancer", 7:"Leo", 8:"Virgo", 9:"Libra", 10:"Scorpio", 11:"Sagittarius",
12:"Capricorn"}

var tanggal = document.getElementById("tgl").value;
var bulan = document.getElementById("bln").value;
var culbi = document.getElementById("hasil");

if (bulan == "1" && tanggal >= "20" || bulan == "2" && tanggal <= "18")
{culbi.value= zod["1"];}

if (bulan == "2" && tanggal >= "19" || bulan == "3" && tanggal <= "20")
{culbi.value= zod["2"];}

if (bulan == "3" && tanggal >= "21" || bulan == "4" && tanggal <= "19")
{culbi.value= zod["3"];}

if (bulan == "4" && tanggal >= "20" || bulan == "5" && tanggal <= "20")
{culbi.value= zod["4"];}

if (bulan == "5" && tanggal >= "21" || bulan == "6" && tanggal <= "21")
{culbi.value= zod["5"];}

if (bulan == "6" && tanggal >= "22" || bulan == "7" && tanggal <= "22")
{culbi.value= zod["6"];}

if (bulan == "7" && tanggal >= "23" || bulan == "8" && tanggal <= "22")
{culbi.value= zod["7"];}

if (bulan == "8" && tanggal >= "23" || bulan == "9" && tanggal <= "22")
{culbi.value= zod["8"];}

if (bulan == "9" && tanggal >= "23" || bulan == "10" && tanggal <= "22")
{culbi.value= zod["9"];}

if (bulan == "10" && tanggal >= "23" || bulan == "11" && tanggal <= "21")
{culbi.value= zod["10"];}

if (bulan == "11" && tanggal >= "22" || bulan == "12" && tanggal <= "21")
{culbi.value= zod["11"];}

if (bulan == "12" && tanggal >= "22" || bulan == "1" && tanggal <= "19")
{culbi.value= zod["12"];}
}


</script>
<body>
<br><br>
<fieldset>
<label style="font-family:courier;
color:white;
font-size:18px;
color:whitesmoke;"> Tanggal : </label>

<select id="tgl" style="padding:3px;color:maroon;background-color:#eeeedd;">
<option value="99"> Tanggal </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10"> 10 </option>
<option value="11"> 11 </option>
<option value="12"> 12 </option>
<option value="13"> 13 </option>
<option value="14"> 14 </option>
<option value="15"> 15 </option>
<option value="16"> 16 </option>
<option value="17"> 17 </option>
<option value="18"> 18 </option>
<option value="19"> 19 </option>
<option value="20"> 20 </option>
<option value="21"> 21 </option>
<option value="22"> 22 </option>
<option value="23"> 23 </option>
<option value="24"> 24 </option>
<option value="25"> 25 </option>
<option value="26"> 26 </option>
<option value="27"> 27 </option>
<option value="28"> 28 </option>
<option value="29"> 29 </option>
<option value="30"> 30 </option>
<option value="31"> 31 </option>
</select> <br><br>
<label style="font-family:courier;
color:white;
font-size:18px;
color:smoke;
margin-right:22;"> Bulan : </label>

<select id="bln" style="padding:3px;color:maroon;background-color:#eeeedd;">
<option value="88"> Bulan </option>
<option value="1"> Januari </option>
<option value="2"> Februari </option>
<option value="3"> Maret </option>
<option value="4"> April </option>
<option value="5"> Mei </option>
<option value="6"> Juni </option>
<option value="7"> Juli </option>
<option value="8"> Agustus </option>
<option value="9"> September </option>
<option value="10"> Oktober </option>
<option value="11"> November </option>
<option value="12"> Desember </option>
</select>
<br><br>

<button type="submit" onClick="cek()"> Lihat </button> <br><br>
<label style="font-family:courier;
color:floralwhite;"> Zodiak anda adalah : <input style="padding:2px;text-shadow:0px 0px 1px red;box-shadow:1px 1px 2px maroon;" type="text" id="hasil" disabled> </label>

</fieldset>
<br>
<div style="border-top:6px solid #800000;
width:60%;
margin:auto;
border-radius:111px;"> </div> <br><br>
</body>
</html>