index.html

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>Example Page</title>


</head>

<body>
    <style>
        .btn{
            font-family: 'fira sans' , sans-serif;
            font-size: 24px;
            padding: 2 2;
        }   
        #outputText {
            font-size: 24px;
            text-align: left;
            color: #2788ea;
            padding-top: 50px;
            font-family: 'arial' , sans-serif;
            animation-name: ayat;
            animation-timing-function: ease-in-out;
            animation-duration: 2sec;
        }
        @keyframes ayat {
            0% {
                width: 20px;
            }
            50% {
                width: 30px;
            }
            100% {
                width: 40px;
            }
        }
    </style>
    <div id="wrapper">
        <div id="btn1" class="btn"> Click Me</div>
        <div id="btn2" class="btn"> Click Me</div>

        <div id="output">nothing</div>

        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </div>
    
    <div id="content">
        <input type="text" name="numA" id="myVal" value="">
        <button id="btn" class="btn">Update</button>
        <div id="outputText"></div>
    </div>

    <div id="example"></div>
    <script type="text/javascript" src="index.js"></script>

</body>


</html>