반응형
D-DAY 계산기
만난지 며칠 되었는지 계산해주는 웹사이트를 만들어보려고 합니다.
- 시작 날짜가 제대로 입력되지 않은 채로 버튼을 누를 경우, '시작 날짜를 입력해주세요!'라는 메시지를 알러트창으로 띄웁니다.
- 5월 13일에 만났고 현재 5월 13일이면 '만난지 1일째'입니다. 5월 13일에 만났고 현재 5월 14일이면 '만난지 2일째'입니다.
<!DOCTYPE html>
<html>
<head>
<title>Couple Story</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">
<img id="logo" src="logo.png" width="157">
</div>
<div class="main">
<div class="container">
<!-- 만난지 며칠? -->
<h2>만난지 <span id="day-count">00</span>일째</h2>
<div class="img-row">
<img src="female.png" width="148">
<img src="dot.png" width="8">
<img src="dot.png" width="8">
<img src="heart.png" width="16">
<img src="dot.png" width="8">
<img src="dot.png" width="8">
<img src="male.png" width="148">
</div>
<!-- 만나기 시작한 날짜 -->
<div class="date-row">
<label for="start">시작일</label>
<input type="date" name="start" id="start">
</div>
<!-- 며칠됐는지 계산하기! -->
<button id="calculate">결과 보기</button>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$('#calculate').on('click', calculateDate);
function calculateDate() {
// Data 객체 생성
var now = new Date;
var startDate = new Date($('#start').val());
// 날짜 차이 계산
var betweenDays = (now.getTime() - startDate.getTime()) / 1000 / 60 / 60 / 24;
// 페이지에 표시
$('#day-count').text(Math.floor(betweenDays) + 1);
// 잘못 입력했을 경우
if ($('#start').val() === '') {
alert("날짜를 입력해주세요.")
}
}
</script>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 992px;
font-family: "Helvetica";
}
/* navigation bar */
.navbar {
height: 66px;
background-color: white;
text-align: center;
line-height: 66px;
}
#logo {
vertical-align: middle;
}
/* main */
.main {
background-image: linear-gradient(135deg, #B0A8FF 0%, #786FFF 100%);
padding: 80px 0;
min-height: calc(100vh - 66px);
}
.container {
background: #FFFFFF;
box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.10);
border-radius: 10px;
width: 600px;
margin: 0 auto;
text-align: center;
padding: 32px 66px;
}
.container h2 {
font-size: 24px;
color: #4A4A4A;
margin: 0;
margin-bottom: 28px;
}
.container h2 span {
font-weight: 700;
color: #786FFF;
}
.container .img-row {
margin-bottom: 40px;
}
.container .img-row img {
vertical-align: middle;
margin: 0 6px;
}
.date-row {
margin-bottom: 40px;
}
label[for=start] {
font-size: 16px;
color: #4A4A4A;
line-height: 34.5px;
vertical-align: middle;
margin-right: 13px;
}
input[type=date] {
border: 1px solid #786FFF;
border-radius: 5px;
padding: 8px 14px;
vertical-align: middle;
font-size: 16px;
}
#calculate {
width: 100%;
background: #786FFF;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
border-radius: 5px;
color: white;
font-size: 18px;
padding: 14px 0;
border: none;
cursor: pointer;
}
본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
|---|---|
| [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 (0) | 2021.02.19 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |