나의 수업일지

인천 일보 아카데미 35일차 -숙제- 계산기 / 학점 관리 프로그램

GUPING 2023. 4. 12. 08:38
  • 계산기 만들어보기

<body>
    <h2>계산기</h2>
    number1: <input type="text" id="id1" name="id1"> <br>
    number2: <input type="text" id="id2" name="id2"> <br>
    계산결과: <input type="text" id="result1" name="result1"><br>
    <input type="button" value="계산" onclick="fun1()">
</body>
<script>
    const fun1 = () => {
        const num1 = document.getElementById('id1');
        console.log(num1.value);
        const num2 = document.getElementById('id2');
        console.log(num2.value);
        const num3 = document.getElementById('result1');
        num3.value = Number(num1.value) + Number(num2.value);
    }
</script>

02_dom_input_02.html
0.00MB

 

 

  • 학점관리 프로그램 만들기

<body>
    JAVA 성적: <input type="text" id="id1" name="id1"><br>
    html 성적: <input type="text" id="id2" name="id2"><br>
    학점: <input type="text" id="result1" name="result1"><br>
    <h1 id="id3"></h1>
    <input type="button" value="학점계산" onclick="fun1()">
</body>
<script>
    const fun1 = () => {
        const num1 = document.getElementById('id1');
        const num2 = document.getElementById('id2');
        const num3 = document.getElementById('result1');
        const num4 = document.getElementById('id3');
        const avg = (Number(num1.value) + Number(num2.value)) / 2;

        if (avg >= 90) {
            num3.value = "A";
            num4.innerHTML = "당신의 학점은 A입니다";
        } else if (avg >= 80) {
            num3.value = "B";
            num4.innerHTML = "당신의 학점은 B입니다";
        } else if (avg >= 70) {
            num3.value = "C";
            num4.innerHTML = "당신의 학점은 C입니다";
        } else if (avg >= 60) {
            num3.value = "D";
            num4.innerHTML = "당신의 학점은 D입니다";
        } else {
            num3.value = "F";
            num4.innerHTML = "당신의 학점은 F입니다";
        }
    }
</script>

02_dom_input_03.html
0.00MB