Javascript Rectangle Area and Circumference Calculation

Codepen:

Rectangle Area and Circumference Calculation

---

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/Rectangle%20Area%20and%20Circumference%20Calculation

---

HTML CODE:

    <div id="container">
        <h2>Calculating Rectangle Area and Circumference</h2>
        <div class="box1">
            <p id="short">
                Short Edge
                <input type="number" id="shortEdge" />
            </p>
        </div>
        <div class="box2">
            <p id="long">
                Long Edge
                <input type="number" id="longEdge" />
            </p>
        </div>
        <button id="res" onclick="res()">RESET</button>
        <button id="calc" onclick="calc()" >CALCULATE</button>
    </div>

---

CSS CODE:

body{
    padding: 0;
    margin: 0;
    background: #333;
    font-family: Verdana;
    font-weight: bold;
}
#container{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #b83c3c;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 50px #000;
}
button{
    background: #000000;
    border: none;
    border-radius: 20px;
    color: #fff;
    padding: 8px;
    transition: .5s;
    outline: none;
    cursor: pointer;
}
#res{
    margin-left: 170px;
}
button:hover {
    background: #fff;
    color: #000;
}
#shortEdge{
    margin-left: 20px;
    width: 200px;
    border: none;
    padding: 5px;
    font-weight: bold;
}
#longEdge {
    margin-left: 25px;
    width: 200px;
    border: none;
    padding: 5px;
    font-weight: bold;
}
h2{
    text-align: center;
}

---

JS CODE:

        function res() {
            let shortEdge = document.getElementById("shortEdge"),
                 longEdge = document.getElementById("longEdge");
            shortEdge.value = "";
            longEdge.value = "";
        }

        function calc() {
            let shortEdge = document.getElementById("shortEdge").value,
                 longEdge = document.getElementById("longEdge").value;
            let area = shortEdge * longEdge;
            let circumference = (2 * shortEdge) + (2 * longEdge);
            alert("area: " + area + "  /  " + "circumference: " + circumference);
        }