HTML,CSS,Js - 최대공약수와 최소공배수 계산기 화면 만들기.

- 사용템플릿

(1) Visual Studio Code

(2) Github

(3) Netlify

 

- 완성된 사이트 주소

https://tranquil-squirrel-ee89de.netlify.app/

최대공약수와 최소공배수 계산기

 

-  완성화면

 

(1) 시작화면

 

(2) 오류화면 (최대 입력 값 1000으로 제한)

 

(3) 결과화면

 

- 핵심코드 설명

/* 스타일링: 전체 페이지 배경 색상 및 중앙 정렬 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #FDEFEF;
        }

// 최대공약수와 최소공배수를 계산하는 함수
        function calculate() {
            const A = parseInt(document.getElementById('A').value);
            const B = parseInt(document.getElementById('B').value);

            // 입력값이 유효한지 검사
            if (isNaN(A) || isNaN(B) || A <= 0 || B <= 0 || A > 1000 || B > 1000) {
                showAlert("A와 B 모두 1에서 1000 사이의 양의 정수를 입력하세요.");
                return;
            }

            // 최대공약수를 구하는 함수
            function gcd(a, b) {
                return b === 0 ? a : gcd(b, a % b);
            }

            // 최소공배수를 구하는 함수
            function lcm(a, b) {
                return (a * b) / gcd(a, b);
            }

            const gcdResult = gcd(A, B);
            const lcmResult = lcm(A, B);

            // 결과를 화면에 표시
            document.getElementById('result').innerHTML = `최대공약수: ${gcdResult}, 최소공배수: ${lcmResult}`;
        }