.youname{width: 100%; height: 37px; border: none; box-shadow: 1px 1px 3px #584d69; border-radius: 2px; margin-bottom: 20px; margin-top: 20px; outline: none; padding-left: 10px; box-sizing: border-box; line-height: 37px; font-size: 16px;} .apptitle{font-size: 24px; color: #ffffff; font-weight: bold; text-shadow: 2px 2px 2px #fd2a2a; font-style: italic;} .button1{padding: .75rem; background-image: linear-gradient(to bottom right,rgba(255,255,255,.2),rgba(255,255,255,.01)); box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.1); background-color: #dc3545!important; border: none; width: 100%; color: #ffffff; border-radius: 2px; outline: none;} .result{width: 100%; height: 80px; border: none; box-shadow: 1px 1px 3px #584d69; border-radius: 2px; outline: none; box-sizing: border-box; background-color: #ffffff; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 24px;} .apptitle { font-size: 24px; color: #ffffff; font-weight: bold; text-shadow: 2px 2px 2px #fd2a2a; font-style: italic; } const baseText = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’ const LowerCase = [‘?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’] const UpperCase = [‘?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’,’?’] function ok() { var input = document.getElementById(‘youname’) var result = ” for (var i of input.value) { if (/[A-Za-z]/.test(i)) { var index = baseText.indexOf(i.toLocaleUpperCase()) if (/[a-z]/.test(i)) { result += UpperCase [index] } else { result += LowerCase[index] } } else { result += i } } document.getElementById(‘result’).innerText = result }