Constructor

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Конструктор</title>
</head>

<body>
    <style>
        .wrapp{
            width: 700px;
            margin: 100px auto;
        }
        .section{
            padding: 20px 40px;
            margin-bottom: 30px;
        }
        .figure{
            border: 1px solid;
            height: 100px;
            width: 100px;
            margin: auto;
        }
        .field{
            width: 33%;
            float: left;
            padding: 10px;
            box-sizing: border-box;
        }
        .field h3{
            text-align: center;
        }
        .field .field-content{
            text-align: center;
        }
    </style>

    <div class="wrapp">
        <div class="section">
            <div id="figure" class="figure"></div>
        </div>
        <div class="section">
            <div class="field">
                <h3>Type</h3>
                <div class="field-content">
                    <input type="button" id="btnSqr" value="Square">
                    <input type="button" id="btnCir" value="Circle">
                </div>
            </div>
            <div class="field">
                <h3>Size</h3>
                <div class="field-content">
                    <input id="rngSize" type="range" value="100" min="100" max="200" step="1">
                </div>
            </div>
            <div class="field">
                <h3>Color</h3>
                <div class="field-content">
                    <input type="button" id="btnClrRed" value="Red">
                    <input type="button" id="btnClrBlue" value="Blue">
                </div>
            </div>
        </div>
    </div>

    <script>
        var figure = document.getElementById('figure');

        var buttonSqr = document.getElementById('btnSqr');
        buttonSqr.addEventListener('click', function(){
            figure.style.borderRadius = "0px";
        });

        var buttonCir = document.getElementById('btnCir');
        buttonCir.addEventListener('click', function(){
            figure.style.borderRadius = "50%";
        });

        var buttonRed = document.getElementById('btnClrRed');
        buttonRed.addEventListener('click', function(){
            figure.style.backgroundColor = "red";
        });

        var buttonBlue = document.getElementById('btnClrBlue');
        buttonBlue.addEventListener('click', function(){
            figure.style.backgroundColor = "blue";
        });

        var rangeSize = document.getElementById('rngSize');
        rangeSize.addEventListener('change', function(){
            figure.style.width = this.value + "px";
            figure.style.height = this.value + "px";
        });
    </script>

</body></html>