환율 계산기 만들기 html css javascript

환율 계산기

환율 조회

환율 변동 추이

매매기준 조회

날짜	매매기준율

상기 환율 계산기의 HTML 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>환율 계산기 및 조회</title>
    <link rel="stylesheet" href="style.css>
</head>
<body>
    <h1>환율 계산기</h1>
    <form id="exchange-form">
        <!-- 환율 계산기 폼 -->
    </form>

    <h1>환율 조회</h1>
    <form id="exchange-rate-form">
        <!-- 환율 조회 폼 -->
    </form>

    <h1>환율 변동 추이</h1>
    <canvas id="exchange-chart" width="400" height="200"></canvas>

    <h1>매매기준 조회</h1>
    <table id="exchange-rate-table">
        <!-- 환율 정보 테이블 -->
    </table>

    <script src="https://sample.com/script.js">
        // JavaScript 코드 추가
    </script>
</body>
</html>

환율 계산기
<form id="exchange-form">

환율 조회
<form id="exchange-rate-form">
<label for="currency">통화 선택:</label>
<select id="currency" name="currency" required>
<option value="krw">원화</option>
<option value="usd">달러</option>

</select>

<label for="date">날짜 선택:</label>
<input type="date" id="date" name="date" required>

<button type="submit">조회</button>
</form>

환율 변동 추이


매매기준 조회
<table id="exchange-rate-table">
<thead>
<tr>
<th>날짜</th>
<th> 매매기준율 </th>
</tr>
</thead>
<tbody>

</tbody>
</table>

/sylesheet. css/

        body {
            font-family: Arial, sans-serif;
        }
        form {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        select, input[type="number"], input[type="date"] {
            margin-bottom: 10px;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }

/script.js/

<script>
    // 환율 계산기 폼
    const exchangeForm = document.getElementById('exchange-form');
    exchangeForm.addEventListener('submit', function(event) {
        event.preventDefault();
        
        const amount = parseFloat(document.getElementById('amount').value);
        const fromCurrency = document.getElementById('from').value;
        const toCurrency = document.getElementById('to').value;

        // 여기서 환율 계산 로직을 추가합니다.
        // 예: API 호출 또는 사전에 정의된 환율을 사용하여 계산합니다.

        // 계산된 결과를 화면에 표시합니다.
        alert(`환전 결과: ${amount} ${fromCurrency}은(는) 계산 결과를 여기에 표시합니다.`);
    });

    // 환율 조회 폼
    const exchangeRateForm = document.getElementById('exchange-rate-form');
    exchangeRateForm.addEventListener('submit', function(event) {
        event.preventDefault();
        
        const currency = document.getElementById('currency').value;
        const date = document.getElementById('date').value;

        // 여기서 환율 조회 로직을 추가합니다.
        // 예: API 호출 또는 데이터베이스에서 조회합니다.

        // 조회된 환율 정보를 화면에 표시합니다.
        alert(`조회 결과: ${date}의 ${currency} 환율은 여기에 표시합니다.`);
    });

    // 환율 변동 추이 차트
    // 여기에 차트 라이브러리를 사용하여 환율 변동 추이를 그립니다.

    // 매매기준 조회 테이블
    // 여기에 API를 호출하여 조회된 환율 정보를 테이블에 표시합니다.
</script>

저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

컴퓨터 부팅 후 검은 화면 나타나는 이유 해결 방법 (0)	2024.07.09
로또 1등 당첨 번호 추출 VS Code 활용 방법 (0)	2024.07.08
‘query-input’ 입력란 누락/엑세스 금지(403) 차단 문제 해결 방법 (0)	2024.07.05
국토정보 플랫폼 주요 기능과 활용 방법 (0)	2024.07.04
공공 데이터 포털 주요 기능 사용법 (0)	2024.07.01

환율 계산기 만들기 html css javascript