입력값이 있을 경우 QR코드 이미지를 생성합니다. qrImage.src는 img태그의 src속성을 변경하여 이미지를 로드하는 역할을 합니다. 여기서 src에 설정된 URL은 QR코드 생성 API인
https://api.qrserver.com/v1/create-qr-code/
입니다. 여기서 이 API는 size와 data라는 두개의 파라미터를 사용합니다. size=150x150으로 이 사이즈로 코드를 생성합니다. data=뒤에는 사용자가 입력한 텍스트나 URL이 추가됩니다. 즉 입력한 데이터가 QR코드에 인코딩 됩니다.
3. 이미지 박스 표시
imgBox.classList.add("show-img");
qr코드가 성공적으로 생성되면, imgBox에 show-img클래스를 추가합니다. 이 클래스는 CSS에서 정의된대로 이미지 박스의 max-height값을 늘려 QR코드 이미지를 보여주도록 합니다. 초기에는 이미지 박스의 높이가 0이므로 QR코드가 보이지 않다가 show-img클래스가 추가되면 이미지가 자연스럽게 나타납니다.
이번에 만들어 볼 프롤젝트는 태어난 날부터 지금까지 며칠이 지났는지는 계산하는 앱을 만들어 보려고 합니다.
이 프로젝트에서는 년도별 월별 일별에 따라 계산이 달라지기 때문에 이전 프로젝트들에 비해 조금 더 복잡한 조건문들이 사용되었습니다.
가장 초기화면의 모습입니다. 프로젝트의 이름이 적혀있고 날짜를 지정할 수 있는 창과 버튼이 있습니다.
달력 버튼을 누르게 되면 날짜를 지정할 수 있는 달력이 나타나게 됩니다. 이 프로젝트는 과거의 날짜에서 오늘까지의 날짜를 계산하는 것이기 때문에 오늘 이후의 날짜들은 선택할 수 없게 비활성화가 되어 있습니다.
저는 제 나이를 밝히고 싶지는 않아서 2000년 1월 1일부터 오늘까지의 날을 계산해보았습니다.
21세기가 된지 벌써 24년 하고도 8개월 9일이나 지나있습니다.
시간이 정말 빠르네요 ㅎㅎ
그럼 어떤 코드들이 사용되어 있는지 확인해 봅시다.
1. HTML요소 선택 및 초기화
let userInput = document.getElementById("date");
userInput.max = new Date().toISOString().split("T")[0];
let result = document.getElementById("result");
let userInput = document.getElementById("date"): date라는 id를 가진 HTML 요소(입력 필드)를 선택하여 userInput이라는 변수에 저장합니다.
userInput.max = new Date().toISOString().split("T")[0]: 사용자가 오늘 이후의 날짜를 입력하지 못하도록 max 속성을 오늘 날짜로 설정합니다. new Date().toISOString().split("T")[0] 코드는 현재 날짜를 YYYY-MM-DD 형식으로 변환하는 역할을 합니다.
let result = document.getElementById("result"): 결과를 표시할 result라는 id를 가진 HTML 요소를 선택하여 result 변수에 저장합니다.
2. 나이계산함수 CalculateAge()
function calculateAge() {
let birthDate = new Date(userInput.value);
let d1 = birthDate.getDate();
let m1 = birthDate.getMonth() + 1;
let y1 = birthDate.getFullYear();
let today = new Date();
let d2 = today.getDate();
let m2 = today.getMonth() + 1;
let y2 = today.getFullYear();
let d3, m3, y3;
y3 = y2 - y1;
if (m2 >= m1) {
m3 = m2 - m1;
} else {
y3--;
m3 = 12 + m2 - m1;
}
if (d2 >= d1) {
d3 = d2 - d1;
} else {
m3--;
d3 = getDaysInMonth(y1, m1) + d2 - d1;
}
if (m3 < 0) {
m3 = 11;
y3--;
}
result.innerHTML = `You are <span>${y3}</span> years,<span>${m3}</span> months and <span>${d3}</span> days old`;
}
function calculateAge() { ... }: 이 함수는 사용자가 입력한 생년월일(userInput.value)을 받아 현재 나이를 계산하고, 그 결과를 HTML 요소에 표시합니다.
let birthDate = new Date(userInput.value);: 사용자가 입력한 생년월일을 Date 객체로 변환하여 birthDate 변수에 저장합니다.
let d1 = birthDate.getDate(): birthDate 객체에서 일을 추출합니다.
function showNotes() {
notesContainer.innerHTML = localStorage.getItem("notes");
}
showNotes();
이 함수는 로컬스토리지에서 저장된 노트를 불러와서 notesContainer에 표시하는 함수입니다.
localStorage.getItem('notes')는 로컬 스토리지에서 'notes'라는 키로 저장된 값을 가져옵니다.
이 값은 notesContainer의 innerHTML로 설정되어 페이지가 로드될 때 저장된 노트들이 표시되도록 합니다.
showNotes()를 호출하여 페이지가 로드될 때 자동으로 저장된 노트들이 화면에 표시됩니다.
function updateStorage() {
localStorage.setItem("notes", notesContainer.innerHTML);
}
updateStorate함수는 현재 notesContainer의 내용을 로컬 스토리지에 저장하는 역할을 합니다. localStorage.setIem('notes',notesContainer.innerHTML)는 notesContainer의 현재 innerHTML을 'notes'라는 로컬 스토리지에 저장합니다. 이를 토통해 페이지를 새로고침해도 노트가 유지됩니다.
- inputbox는 새로운 <p>요소를 생성하며 class를 input-box로 설정하고 contentededitable속성을 true로 설정한다. 이 속성은 사용자가 해당 요소를 클릭하여 내용을 편집할 수 있게 해준다.
- img는 살제버튼으로 사용할 이미지를 생성한다. 이 이미지는 나중에 노트를 삭제할 때 사용된다.
- 마지막으로 생성된 inputbox와 img를 notesContainer에 추가한다. 이로써 새로운 노트가 화면에 나타나게 된다.
notesContainer.addEventListener("click", function (e) {
if (e.target.tagName === "IMG") {
e.target.parentElement.remove();
updateStorage();
} else if (e.target.tagName === "P") {
notes = document.querySelectorAll(".input-box");
notes.forEach((nt) => {
nt.onkeyup = function () {
updateStorage();
};
});
}
});
이 코든느 notesContainer내에서 발생하는 클릭 이벤트를 처리한다.
- e.target.tagName==='IMG'는 만약 클릭한 요소가 이미지(IMG)라면 해당 이미지를 포함하는 부모요소를 제거한다. 그런다음 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다.
- e.target.tagName==='p'는 만약 클릭한 요소가 p태그라면 모든 노트요소를 다시 선택하고 각각의 노트에 대해 keyup이벤트를 등록한다. 이 이벤트는 사용자가 노트의 내용을 수정할 때마다 updateStorage()를 호출하여 변경된 내용을 로컬 스토리지에 저장한다.
