์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ทผ๋ก๊ธฐ์ค๋ฒ ์ฐ์ฐจ์ผ์ ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ทผ๋ก๊ธฐ์ค๋ฒ ์ฐ์ฐจ์ผ์ ๊ณ์ฐ๊ธฐ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์ฐ์ฐจํด๊ฐ ๊ณ์ฐ๊ธฐ๋ ๊ทผ๋ก์์ ์ ์ฌ์ผ, ๊ทผ๋ก๊ธฐ๊ฐ, ๊ทธ๋ฆฌ๊ณ ์ถ๊ทผ์จ์ ๊ธฐ์ค์ผ๋ก ์ฐ์ฐจํด๊ฐ์ผ์๋ฅผ ์๋์ผ๋ก ๊ณ์ฐํด์ฃผ๋ ๋๊ตฌ์ ๋๋ค. ์ด ๊ธ์์๋ ๊ฐ๋จํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ํตํด ์ฐ์ฐจํด๊ฐ์ผ์๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ ๋จ๊ณ๋ณ๋ก ์ค๋ช ํ๊ฒ ์ต๋๋ค.
๊ทผ๋ก๊ธฐ์ค๋ฒ ์ฐ์ฐจ์ผ์ ๊ณ์ฐ๊ธฐํ์ํ ์ค๋น๋ฌผ
์ฐ์ฐจํด๊ฐ ๊ณ์ฐ๊ธฐ๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋ ๋ค์๊ณผ ๊ฐ์ ์ค๋น๋ฌผ์ด ํ์ํฉ๋๋ค:
- 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' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ ๋นํฐ์์ด ๊ฒ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ (0) | 2025.04.27 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ map()ํจ์, Object json key ๊ฐ ๊ฐ์ ธ์ค๊ธฐ (0) | 2025.03.20 |
JavaScript RGB ์์ํ (0) | 2024.05.19 |
1678. Goal Parser Interpretation leetcode javascript ํด์ ๋ฐ ํ์ด (0) | 2023.11.20 |
์๋ผํ ์คํ ๋ค์ค์ ์ฒด JS ์์ ์ฐพ๊ธฐ ์๊ณ ๋ฆฌ์ฆ ๋ง๋ค๊ธฐ (0) | 2023.11.10 |
๋๊ธ