<div id="container">
        <input type="text" id="box1" onblur="repeat();" placeholder="repeat" />
        <input type="text" id="box2" onblur="charCodeAt();" placeholder="charCodeAt" />
    </div>

        body{
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
        #container{
            width: 200px;
        }
        input {
            display: block;
            color: #e53f3f;
            border: 2px solid #262626;
            border-radius: 20px;
            padding: 5px;
            padding-left: 10px;
            outline: none;
            font-family: Verdana;
            font-weight: bold;
            box-shadow: 0px 10px 20px #262626;
            margin: 10px;
        }

    function repeat() {
            let box1 = document.getElementById("box1");
            box1.value = box1.value.repeat();
        }

        function charCodeAt() {
            let box2 = document.getElementById("box2");
            box2.value = box2.value.charCodeAt();
        }