Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sprawdzian</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>
        *,body{
            margin:0;
            padding:0;
            border:0;
            text-align:center;
            box-sizing:border-box;
            transition:all 0.3s;
        }
        body {
            background-color:#afafaf;
            color:#FFF;
        }
        #wrapper{
            width:1000px;
            margin:10vh auto;
            height:80vh;
        }

        button{
            background-color:yellow;
            padding:5px;
        }
    </style>
</head>
<body onload="awakeStyles(); return false;">
<div id="wrapper">
    <div id="form_wrapper">
        <form>
            Fromularz 1: <input type="number" id="form1">
            <br>
            Formularz 2: <input type="number" id="form2">
            <br> <br>
            <input type="checkbox" id="in_checkbox">
            <input type="checkbox" id="in_checkbox_2">
            <br> <br>
            <button id="formButton1" onclick="funkcja(1); return false;">przycisk 1</button>
            <button id="formButton2" onclick="funkcja(2); return false;">przycisk 2</button>
            <button id="formButton3" onclick="funkcja(3); return false;">przycisk 3</button>
            <br>
        </form>
    </div>
</div>
<script>
    var INPUT1=document.getElementById("form1");
    var INPUT2=document.getElementById("form2");
    var IN_CHECKBOX=document.getElementById('in_checkbox');
    var IN_CHECKBOX_2=document.getElementById('in_checkbox_2');


    INPUT1.addEventListener("mouseover",function(){
        INPUT1.style.width="15vw";
    });
    INPUT1.addEventListener("mouseout",function(){
        INPUT1.style.width="10vw";
    });
    INPUT2.addEventListener("mouseover",function(){
        INPUT2.style.backgroundColor="green";
    });
    INPUT2.addEventListener("mouseout",function(){
        INPUT2.style.backgroundColor="#FFF";;
    });
    IN_CHECKBOX.addEventListener("mouseover",function(){
        IN_CHECKBOX.style.transform = 'translate(-200px) scale(2)';
    });
    IN_CHECKBOX_2.addEventListener("mouseover",function(){
        IN_CHECKBOX_2.style.transform = 'translate(200px) scale(2)';
    });

    document.getElementById("formButton1").addEventListener("click", function(){
        document.getElementById("formButton1").style.borderRadius="30% / 60%";
    });
    document.getElementById("formButton2").addEventListener("click", function(){
        document.getElementById("formButton2").style.borderRadius="70% / 60%";
    });
    document.getElementById("formButton3").addEventListener("click", function(){
        document.getElementById("formButton3").style.borderRadius="40% / 40%";
    });

    function awakeStyles(){
        INPUT1.style.width="10vw";
        INPUT2.style.width=INPUT1.style.width;
    }
    function funkcja(x){
        var form1=parseInt(INPUT1.value);
        var form2=parseInt(INPUT2.value);

        switch(x){
            case 1:
                break;

            case 2:
                break;

            case 3:
                break;
        }
    }
</script>
</body>
</html>