Cy Translator

<!DOCTYPE html>
<html>
<head>
  <title>Translator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Letter Translator</h1>
  <input type="text" id="input" placeholder="Enter a letter...">
  <button onclick="Translate()">Translate</button>
  <p id="output"></p>
  <script src="script.js"></script>
</body>
</html>
<style>
h1 {
  text-align: center;
}

input[type="text"] {
  width: 80%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

button {
  background-color: gray;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#output {
  text-transform: lowercase;
  font-size: 24px;
  text-align: center;
}
</style>
<script>
function Translate() {
  // Get input value
  var word = document.getElementById("input").value.toUpperCase();

  // Define dictionary of letters and their translations
  var letterTranslations = {
  "B": "A",
  "C": "B",
  "D": "C",
  "E": "D",
  "F": "E",
  "G": "F",
  "H": "G",
  "I": "H",
  "J": "I",
  "K": "J",
  "L": "K",
  "M": "L",
  "N": "M",
  "O": "N",
  "P": "O",
  "Q": "P",
  "R": "Q",
  "S": "R",
  "T": "S",
  "U": "T",
  "V": "U",
  "W": "V",
  "X": "W",
  "Y": "X",
  "Z": "Y",
  "A": "Z",
  "b": "a",
  "c": "b",
  "d": "c",
  "e": "d",
  "f": "e",
  "g": "f",
  "h": "g",
  "i": "h",
  "j": "i",
  "k": "j",
  "l": "k",
  "m": "l",
  "n": "m",
  "o": "n",
  "p": "o",
  "q": "p",
  "r": "q",
  "s": "r",
  "t": "s",
  "u": "t",
  "v": "u",
  "w": "v",
  "x": "w",
  "y": "x",
  "z": "y",
  "a": "z",
  };

  // Translate each letter in the word while keeping the original capitalization
  var translatedWord = "";
  for (var i = 0; i < word.length; i++) {
    var letter = word.charAt(i);
    if (letter in letterTranslations) {
      var translatedLetter = letterTranslations[letter];
      if (letter === letter.toUpperCase()) {
        translatedLetter = translatedLetter.toUpperCase();
      }
      translatedWord += translatedLetter;
    } else {
      translatedWord += letter;
    }
  }

  // Display translated word
  document.getElementById("output").innerHTML = translatedWord;
}
</script>