Kotak dengan Fitur Copy Code

kode Kotak dengan Fitur Copy Code

untuk membuat kotak script atau kode di dalam kotak terdapat fitur copy

 <!DOCTYPE html>
<html>
  <head>
    <title>Kalkulator Arti Nama</title>
    
    <style>
		.container {
			max-width: 500px;
			margin: auto;
			padding: 20px;
			border: 1px solid #ddd;
			text-align: center;
			background-color: #f5f5f5;
		}
		h1 {
			margin-top: 0;
			text-align: center;
		}
		input[type="text"] {
			padding: 10px;
			font-size: 18px;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
			text-align: center;
		}
		button[type="submit"] {
			padding: 10px;
			background-color: #4CAF50;
			color: #fff;
			font-size: 18px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		button[type="submit"]:hover {
			background-color: #3e8e41;
		}
	</style>
    
    
  </head>
  <body>
    
    <div class="container">
		<h1>Hitung Arti Nama</h1>
		<input type="text" id="inputField" placeholder="Masukkan nama Anda...">
		<button type="submit" onclick="calculateMeaning()">Hitung</button>
		<p>Arti Nama anda akan muncul :</p>
      <p id="result"></p>
	</div>
    
   

    <script>
      function calculateMeaning() {
  let input = document.getElementById("inputField").value.toUpperCase();
  let meaning = "";
  let usedLetters = []; // array untuk menyimpan huruf-huruf yang sudah muncul pada input
  
  for (let i = 0; i < input.length; i++) {
    let charCode = input.charCodeAt(i);
    if (charCode >= 65 && charCode <= 90) {
      let letter = input.charAt(i);
      if (!usedLetters.includes(letter)) { // periksa apakah huruf sudah muncul sebelumnya
        meaning += getMeaning(charCode - 64) + ", ";
        usedLetters.push(letter); // tambahkan huruf ke array usedLetters
      }
    }
  }
  
  if (meaning.length > 0) {
    meaning = meaning.substring(0, meaning.length - 2); // hapus koma dan spasi terakhir
    document.getElementById("result").innerHTML = meaning;
  } else {
    document.getElementById("result").innerHTML = "!!!oops sepertinya anda belum memasukan nama Masukkan nama Anda terlebih dahulu.";
  }
}

function getMeaning(letterValue) {
  let meanings = ["", 
                   "=A=: keberanian, kekuatan",
                  "=B=: Kebaikan, kebijaksanaan, keindahan",
                  "=C=: Kreativitas, kecerdikan, koneksi",
                  "D: Kekuatan, ketegasan, determinasi",
                  "E: Energi, evolusi, empati",
                  "F: Fokus, kesetiaan, keberanian",
                  "G: Generositas, kesabaran, pertumbuhan",
                  "H: Kesehatan, kebahagiaan, keharmonisan",
                  "I: Intuisi, inspirasi, imajinasi",
                  "J: Keadilan, kebijaksanaan, keterampilan",
                  "K: Kebanggaan, keteraturan, ketulusan",
                  "L: Cinta, keindahan, kebahagiaan",
                  "M: Misteri, kekuatan, kemampuan",
                  "N: Kreativitas, kebijaksanaan, kebebasan",
                  "O: Optimisme, kesempurnaan, keberanian",
                  "P: Persahabatan, kebijaksanaan, kesuksesan",
                  "Q: Kualitas, kuantitas, keseimbangan",
                  "R: Romantisisme, keberanian, kebebasan",
                  "S: Spiritualitas, kesabaran, kecerdasan",
                  "T: Ketenangan, kebahagiaan, keberhasilan",
                  "U: Unik, universal, kebijaksanaan",
                  "V: Kreativitas, keindahan, keberanian",
                  "W: Kehangatan, kegembiraan, keberanian",
                  "X: Eksentrik, eksplorasi, keberanian",
                  "Y: Kepemimpinan, keberanian, kebijaksanaan",
                  "Z: Zaman, keterikatan, kreativitas",];
  return meanings[letterValue];
}
    </script>
  </body>
</html>

Header Menu

kode html Arti nama anda berdasarkan abjadologi

kode Kotak dengan Fitur Copy Code