hw4_dom_object.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom_object</title>
    <meta name = 'viewpoint' content'width=device-width, initial-scale=1'>
    <link href = 'css/bootstrap.min.css' rel = 'stylesheet'>
    <script src = 'js/bootstrap.bundle.min.js'></script>
    <script>
        function transform(){
            var bi = document.getElementById('digit').value ;
            var hex = parseInt(bi, 2)
            document.getElementById('hexanum').value = hex.toString(16) ;
        }


        function pascals() {

            var prev = document.getElementById('size').value
            let row = [];
            row.push(1);
            document.write(row+'<br>')
            for(let i = 1; i <= prev-1; i++){
                for (let j = row.length-1; j>0; j--) {
                    row[j] = row[j-1] + row[j];

                }
            row.push(1);
            document.write(row + '<br>');
                }

        }
    </script>
</head>
<body>
<div class = 'container-sm mt-5'>
    <div class = 'h3'>2진수 변환기</div>
    <div class = 'mb-3'>
        <label class = 'form-label text-primary'> 2진수 :
            <input type = 'text' id = 'digit' size = '20'>
        </label>
        <button type = 'button' class = 'btn btn-dark' onclick="transform()"> ===> </button>
        <label class = 'form-label text-primary'> 16진수:
            <input type = 'text'  id="hexanum" size = '20' readonly value = "">
        </label>
    </div>
    <hr>
    <div class = 'h3'>파스칼 삼각형</div>
    <div class = 'mb-3'>
        <label class = 'form-label text-primary'>삼각형 높이
            <input type = 'number' id = 'size' min = '1' max = '20' step = '1' value = '1'>
            <button type = 'button' class = 'btn btn-success' onclick = 'pascals()'>그리기</button>
        </label>
    </div>
    <div class = 'text-bg-secondary' id = 'draw_area'>

    </div>
</div>
</body>
</html>