index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Caesar Cipher</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="outer">
        <div id="inner">
            <h2>Caesar Cipher</h2>
            <input type="text" id="ipText" pattern="/^[0-9]{4}$/g">
            <button onclick="cipher()">Convert</button>
            <button onclick="clearFields()">Clear</button>
            <strong><p id="opText"></p></strong>
        </div>        
    </div>
    <script src="js/app.js"></script>
</body>
</html>