웹 개발을 처음 배우는 사람에게 가장 좋은 첫 프로젝트 중 하나가 바로 온도 변환기입니다. HTML로 화면 구조를 잡고 JavaScript로 변환 로직을 처리하면, 사용자가 입력한 섭씨(Celsius) 온도를 화씨(Fahrenheit)로 실시간 변환해 주는 도구를 몇 분 만에 완성할 수 있습니다.
온도 변환기 전체 코드
아래는 HTML과 JavaScript로 구현한 온도 변환기의 전체 소스 코드입니다. 입력란에 값을 넣는 즉시 결과가 갱신되도록 oninput과 onchange 이벤트를 함께 사용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input, span{
font-size: 20px;
}
</style>
</head>
<body>
<h1>Temperature Converter</h1>
<h2>Type Temperature in Celsius to convert it into Fahrenheit</h2>
<p>
<label>Celsius</label>
<input id="inputCelsius" type="number" placeholder="Celsius" oninput="CtoFConverter(this.value)" onchange="CtoFConverter(this.value)">
</p>
<p>Fahrenheit: <span class="fahrenheit"></span></p>
<script>
function CtoFConverter(temp) {
document.querySelector(".fahrenheit").innerHTML = (temp * 1.8) + 32;
}
</script>
</body>
</html>
코드 동작 원리
핵심 부분만 간단히 살펴보겠습니다.
- <input> 요소: type이 number로 지정되어 숫자만 입력할 수 있으며, oninput·onchange 이벤트에 변환 함수가 연결되어 있어 값을 입력하거나 수정하는 순간 결과가 자동으로 업데이트됩니다.
- CtoFConverter() 함수: 입력받은 값을 매개변수 temp로 받아 섭씨→화씨 변환 공식인 (섭씨 × 1.8) + 32를 적용합니다. 참고로 반대 방향인 화씨→섭씨 변환은 (화씨 − 32) ÷ 1.8 공식을 사용합니다.
- document.querySelector(): class가 fahrenheit인 <span> 요소를 찾아 innerHTML로 계산된 결과를 화면에 출력합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
입력란에 섭씨 온도를 입력하면 아래와 같이 화씨 값이 즉시 계산되어 표시됩니다.
이처럼 단 몇 줄의 코드로도 실시간으로 동작하는 온도 변환기를 만들 수 있습니다. 여기에 toFixed()를 활용한 소수점 자릿수 처리, 화씨→섭씨 양방향 변환 기능, CSS를 활용한 디자인 개선 등을 추가하면 한층 완성도 높은 도구로 발전시킬 수 있습니다.