Sebrang Alam: kode untuk membuat kalkulator zodiak

kode html untuk membuat kalkulator zodiak
silahkan copy kode html ini dan pastekan dalam postingan anda
<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="text"], input[type="email"], input[type="submit"],input[type="password"], input[type="date"],input[type="date"], textarea {
        padding: 10px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(to right, yellow, green);
        color: white;
        text-align: center;
      }
       input[type="submit"], button {
        padding: 10px;
        border: none;
        border-radius: 10px;
        background-color: linear-gradient(to left, yellow, green);
         background: linear-gradient(to left, yellow, green);
        color: white;
        text-align: center;
      }
		.container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: green;
		}
	<title>Kalkulator Zodiak</title>
		.form {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	}

	.form input,
	.form select {
		margin: 10px 0;
		padding: 5px;
		border-radius: 5px;
		border: none;
		width: 100%;
		max-width: 300px;
		font-size: 16px;
		text-align: center;
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	}

	.form button {
		background-color: darkgreen;
		color: white;
		padding: 10px;
		border-radius: 5px;
		border: none;
		width: 100%;
		max-width: 300px;
		font-size: 16px;
		cursor: pointer;
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	}

	.result {
		display: none;
		background-color: darkgreen;
		color: white;
		padding: 20px;
		margin-top: 20px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
		text-align: center;
	}

	.result p {
		margin: 10px 0;
		font-size: 20px;
	}

	.result a {
		color: white;
		text-decoration: underline;
	}
    
    
     .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
      h1 {
        text-align: center;
        color: #333;
      }
      p {
        font-size: 18px;
        line-height: 1.5;
        color: #666;
      }
    
    
</style>

</head>
<body>
	<div>
      <div class="container">
		 <!-- ini adalah input nama -->
      jika anda ingin mengetahui zodiak,karakter anda silahkan masukan infromasi lengkap di bawah ini
      
  <label for="nama">Nama:</label>
		<input type="text" id="name" name="name"><br><br>
<!-- style nama -->
        <div style="display: flex; flex-direction: column; align-items: center;">
		<label for="birthdate">Tanggal bulan tahun lahir:</label>
		<input type="number" id="birthdate" name="birthdate" min="1" max="31">
		<select id="birthmonth" name="birthmonth">
			<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>
		<input type="number" id="birthyear" name="birthyear" min="1900" max="2023"><br><br>

		<button onclick="calculateZodiac()">Mulai Mencari</button>
	</div>

	<div class="green-box" id="zodiac-result"></div>

	<div id="article"></div>

	<script>
		function calculateZodiac() {
			// Ambil nilai dari inputan tanggal lahir, bulan lahir, dan tahun lahir
			var birthdate = document.getElementById("birthdate").value;
			var birthmonth = document.getElementById("birthmonth").value;
			var birthyear = document.getElementById("birthyear").value;

			// Validasi inputan tanggal lahir
			if (birthdate < 1 || birthdate > 31) {
				alert("sepertinya anda belum mengisi tanggal lahir. silahkan di isi dulu.");
				return;
			}

			// Validasi inputan tahun lahir
			if (birthyear < 1900 || birthyear > 2023) {
				alert("Tahun lahir harus diisi antara 1900-2023.");
				return;
			}

			// Hitung zodiak berdasarkan tanggal, bulan, dan tahun lahir
			var zodiac = calculateZodiacSign(birthdate, birthmonth);

			// Tampilkan hasil zodiak di halaman web
			document.getElementById("zodiac-result").innerHTML = "Halo " + document.getElementById("name").value + ", taukah anda zodiak anda adalah " + zodiac + ". Lihat detail tentang zodiak " + zodiac + " di bawah ini.";

			// Tampilkan artikel tentang zodiak di halaman web menggunakan AJAX
			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this
.status == 200) {
document.getElementById("article").innerHTML = this.responseText;
}
};
xhttp.open("GET", getArticleLink(zodiac), true);
xhttp.send();	// Tampilkan kotak hijau yang berisi hasil zodiak
		document.getElementById("zodiac-result").style.display = "block";
	}

	function calculateZodiacSign(birthdate, birthmonth) {
		// Array zodiak berdasarkan rentang tanggal lahir
		var zodiacSigns = ["Capricorn", "Aquarius", "Pisces", "Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius"];
		var cutoffs = [20, 19, 20, 20, 21, 21, 22, 23, 23, 23, 22, 21];

		// Ambil indeks zodiak berdasarkan bulan dan tanggal lahir
		var index = birthmonth - 1;
		if (birthdate > cutoffs[index]) {
			index = (index + 1) % 12;
		}

		// Ambil zodiak berdasarkan indeks
		return zodiacSigns[index];
	}

	function getArticleLink(zodiac) {
		// Objek yang berisi link artikel untuk setiap zodiak
		var articleLinks = {
			"Capricorn": "https://sebrangalam.blogspot.com/2023/03/Zodiak-Capricorn.html",
			"Aquarius": "https://sebrangalam.blogspot.com/2023/03/zodiak-aquarius.html",
			"Pisces": "https://sebrangalam.blogspot.com/2023/03/zodiak-pisces.html",
			"Aries": "https://sebrangalam.blogspot.com/2023/03/Aries.html",
			"Taurus": "https://sebrangalam.blogspot.com/2023/03/taurus-latar-belakang.html",
			"Gemini":
          "https://sebrangalam.blogspot.com/2023/03/latar-belakang-gemini.html",
			"Cancer": "https://sebrangalam.blogspot.com/2023/03/zodiak-cancer.html",
			"Leo": "https://sebrangalam.blogspot.com/2023/03/zodiak-leo.html",
			"Virgo": "https://sebrangalam.blogspot.com/2023/03/zodiak-virgo.html",
			"Libra": "https://sebrangalam.blogspot.com/2023/03/zodiak-libra.html",
			"Scorpio": "https://sebrangalam.blogspot.com/2023/03/zodiak.html",
			"Sagittarius": "https://en.wikipedia.org/wiki/Sagittarius_(astrology)"
		};

		// Ambil link artikel berdasarkan zodiak
		return articleLinks[zodiac];
	}
      
      
      
</script>
</body>
</html>
Sitemap

Jumat, 31 Maret 2023

kode untuk membuat kalkulator zodiak

kode html untuk membuat kalkulator zodiak
