자바스크립트로 근로기준법 연차일수 계산기 만들기

자바스크립트를 사용하여 근로기준법 연차일수 계산기를 만드는 방법에 대해 알아보겠습니다. 연차휴가 계산기는 근로자의 입사일, 근로기간, 그리고 출근율을 기준으로 연차휴가일수를 자동으로 계산해주는 도구입니다. 이 글에서는 간단한 자바스크립트 코드를 통해 연차휴가일수를 계산하는 방법을 단계별로 설명하겠습니다.

근로기준법 연차일수 계산기필요한 준비물

연차휴가 계산기를 만들기 위해서는 다음과 같은 준비물이 필요합니다:

HTML 파일: 사용자 인터페이스를 만들기 위한 HTML 코드
CSS 파일: 스타일링을 위한 CSS 코드
자바스크립트 파일: 연차휴가일수를 계산하는 로직을 포함한 자바스크립트 코드

HTML 코드 작성

먼저, HTML 파일을 작성합니다. 이 파일에는 사용자 입력을 받을 수 있는 폼과 계산 결과를 표시할 수 있는 영역이 포함됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연차휴가일수 계산기</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>연차휴가일수 계산기</h2>
        <form id="annualLeaveForm">
            <label for="startDate">입사일:</label>
            <input type="date" id="startDate" required>
            <label for="workMonths">근무 개월 수:</label>
            <input type="number" id="workMonths" required>
            <label for="attendanceRate">출근율 (%):</label>
            <input type="number" id="attendanceRate" required>
            <button type="button" onclick="calculateAnnualLeave()">계산하기</button>
        </form>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 코드 작성

다음으로, 사용자 인터페이스를 보기 좋게 스타일링하기 위해 CSS 파일을 작성합니다.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input {
    padding: 10px;
    margin-top: 5px;
}

button {
    margin-top: 20px;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 20px;
    font-size: 1.2em;
    text-align: center;
}

자바스크립트 코드 작성

마지막으로, 연차휴가일수를 계산하는 로직을 자바스크립트로 작성합니다.

// script.js
function calculateAnnualLeave() {
    const startDate = new Date(document.getElementById('startDate').value);
    const workMonths = parseInt(document.getElementById('workMonths').value);
    const attendanceRate = parseInt(document.getElementById('attendanceRate').value);

    let annualLeaveDays = 0;

    // 근무기간 1년 미만
    if (workMonths < 12) {
        annualLeaveDays = workMonths;
        if (attendanceRate >= 80) {
            annualLeaveDays = Math.min(11, annualLeaveDays); // 최대 11일
        } else {
            annualLeaveDays = 0; // 출근율이 80% 미만일 경우
        }
    } 
    // 근무기간 1년 이상
    else {
        const fullYears = Math.floor(workMonths / 12);
        annualLeaveDays = 15 + Math.floor((fullYears - 1) / 2);
        annualLeaveDays = Math.min(25, annualLeaveDays); // 최대 25일

        // 1년 미만의 근무기간 동안 사용한 연차 공제
        const remainingMonths = workMonths % 12;
        if (remainingMonths > 0 && attendanceRate >= 80) {
            annualLeaveDays -= remainingMonths;
        }
    }

    document.getElementById('result').innerText = `총 연차휴가일수: ${annualLeaveDays}일`;
}

이제 모든 준비가 완료되었습니다. 이 코드는 근로자의 입사일, 근무 개월 수, 출근율을 입력받아 연차휴가일수를 계산해줍니다.

결론

자바스크립트를 사용하여 연차휴가일수 계산기를 만드는 방법에 대해 알아보았습니다. 이 계산기는 사용자에게 편리하게 연차휴가일수를 계산할 수 있도록 도와줍니다. 앞으로 이 계산기를 활용하여 근로자들이 연차휴가를 효율적으로 관리할 수 있기를 바랍니다.

'Lect & Tip > javascript, jQuery' 카테고리의 다른 글

JavaScript RGB 색상표 (0)	2024.05.19
(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다. (0)	2023.12.14
1678. Goal Parser Interpretation leetcode javascript 해석 및 풀이 (0)	2023.11.20
에라토스테네스의 체 JS 소수 찾기 알고리즘 만들기 (0)	2023.11.10
자바스크립트 바인딩: 활용과 주의점 (0)	2023.11.07

자바스크립트로 근로기준법 연차일수 계산기 만들기