eventDay.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* 쌤은 바로 중앙정렬 💚 */
}
#wrap {
width: 80%;
max-width: 1000px;
border-radius: 20px;
border: 3px solid pink;
/* 쌤은 테두리 주셨음 💚 */
overflow: hidden;
}
#title {
padding: 30px;
color: #fff;
background: pink;
}
#inputs {
text-align: center;
padding: 20px;
}
input {
outline: none;
border: none;
border-bottom: 3px dotted pink;
margin: 0 10px;
line-height: 50px;
}
#buttons {
text-align: center;
margin: 20px;
background: rgb(252, 231, 234);
}
button {
border: none;
outline: none;
border-radius: 5px;
background: pink;
padding: 10px 40px;
margin: 0 6px;
}
#text {
padding: 40px;
text-align: center;
color: pink;
font-size: 30px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="title">
<h2>기념일</h2>
<p>사귄날짜를 입력하세요.</p>
</div>
<div>
<div id="inputs">
<input type="text" id="year" name="year">
<input type="text" id="month" name="month">
<input type="text" id="date" name="date">
</div>
<div id="buttons">
<!-- 커스텀 속성 추가 / click이벤트 줘도 됨 -->
<button data-key="date" data-value="50">50일 ?</button>
<button data-key="date" data-value="100">100일 ?</button>
<button data-key="date" data-value="today">오늘은 ?</button>
</div>
</div>
<div id="text"></div>
</div>
<script>
// ⭐ 동작 순서도 먼저 작성 ⭐
// input에 사용자로부터 입력을 받는다.
// 년, 월, 일
// 입력 받고 버튼을 누르면 결과를 text에 보여준다.
// 경고창
// 버튼을 클릭했을 때 년, 월, 일이 빈칸이면 " 날짜를 입력해주세요 " 경고창 띄우기
// 년, 월, 일이 빈칸이 아니면 숫자가 맞는지 확인
// 숫자가 아닌 문자가 있을 경우
// " 숫자만 입력해주세요 " 경고창 띄우기
// 입력된 값으로 데이트 객체를 생성
// 버튼
// 50일은 버튼을 클릭했을때
// 입력된 값으로 만든 데이트 객체에서 50일 더해진 데이트 객체를 생성
// 100일은 버튼을 클릭했을때
// 입력된 값으로 만든 데이트 객체에서 100일 더해진 데이트 객체를 생성
// 오늘은? 버튼을 클릭했을때
// 현재 날짜의 객체를 생성
// 날짜 변환
// 현재날짜 객체의 밀리초를 반환하여
// 입력한 데이트 객체의 밀리초를 빼줌
// 그 값을 일자로 변환
// 출력
// " 사귄지 ~~일 되었습니다 " 를 화면에 출력
let yearInput = document.querySelector('#year');
let monthInput = document.querySelector('#month');
let dateInput = document.querySelector('#date');
let btns = document.querySelector('#buttons');
let text = document.querySelector('#text');
btns.addEventListener('click', function(e) { // 버튼에 이벤트 걸어주기
let getDate = getInputValue();
// 호출해서 사용
// ⭐ ex) getDate {
// year : "2022",
// month : "5",
// date : "20",
// }
// new Date(getDate.year, getDate.month, getDate.date)
// console.log(e.target);
// (e)이벤트 객체 // target 속성 있음 → 무엇을 클릭했는지 알 수 있음
let value = e.target.dataset.value;
// 클릭한 node의 dataset객체의 value키에 접근 / 누른 버튼의 값이 담김 (50, 100, today의 값)
// console.log(value);
// data-value="__" 값이 나옴 → 50, 100, today
// console.log(getDate);
// 입력한 날짜의 데이트 객체를 생성
// {year: 2022, month: 5, date: 20}
let firstDate = new Date(getDate.year, getDate.month, getDate.date);
console.log(firstDate.getFullYear(), firstDate.getMonth()+1, firstDate.getDate());
// 항상 +1 잊지말기
// ⭐ 오늘 버튼을 클릭했다면
if(value === "today") {
let toDay = new Date();
// 입력한 데이트 객체를 밀리초로 받아서 startTime 할당
let startTime = firstDate.getTime(); // 밀리초로 바꿔줌
// 현재 데이트 객체를 밀리초로 받아서 startTime 할당
let todayTime = toDay.getTime();
// 빼주기, 소수점 빼기
let re = Math.floor((todayTime-startTime)/(1000*60*60*24));
text.innerHTML = `우리가 만난지 ${re}일 입니다 ❤`
} else {
firstDate.setDate(firstDate.getDate()+Number(value));
text.innerHTML = `${value}일은 ${firstDate.getFullYear()}년
${firstDate.getMonth()+1}월 ${firstDate.getDay()}일 입니다 ❤`;
}
})
function getInputValue () {
// (1) input의 값이 빈칸이면 return
// (2) Number 로 변환 → 문자있으면 NaN → NaN 은 true, false 로 비교 X
// 비교구문 ★ ) isNaN(123) → false / isNaN(sdf) → ture
if(!yearInput.value || !monthInput.value || !dateInput.value) { // (false)입력이 되지 않았다면 return
console.log(yearInput.value, monthInput.value, dateInput.value);
alert("날짜를 입력해주세요.");
return
}
if(isNaN(Number(yearInput.value))
|| isNaN(Number(monthInput.value))
|| isNaN(Number(dateInput.value))) { // isNaN 이 맞다면 return
alert("숫자만 입력해주세요.");
return;
}
// 객체(여러개의 값을 묶어 관리) 만들기
// ⭐ 잘 (입력)진행이 되면 firstDay함수를 돌려줌
const firstDay = {
year : Number(yearInput.value),
month : Number(monthInput.value)-1,
date : Number(dateInput.value),
}
return firstDay; // (firstDay)함수가 실행되면 객체를 돌려줌
}
</script>
</body>
</html>
dataSet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ⭐ html 커스텀 속성 -->
<div>
<button data-key="buttondata" data-value="10">버튼</button>
</div>
<script>
// (1)
let btn = document.querySelector('button');
console.log(btn);
console.dir(btn); // 자세히 볼 수 있음 🧡
// ▼▼ 결과
// dataset: DOMStringMap
// key: "buttondata"
// value: "10"
console.log(btn.dataset); // DOMStringMap {key: 'buttondata', value: '10'}
console.log(btn.dataset.key); // buttondata
// (2)
let obj = {
name : 'green', // key : value
age : 30,
}
console.log(obj.name); // green
console.log(obj['age']); // 30
</script>
</body>
</html>
