큰 과제: 전체 웹사이트에 생기를 불어넣기

레벨 2의 마지막 임무야. 모든 주문을 한 번에 사용하고 그 위에 몇 가지 새로운 아이디어도 추가돼.

네 임무

이번에는 새로운 자료가 없어. 작업 목록을 받게 되며 해당 작업에 필요한 모든 것을 이미 알고 있어. 이것이 바로 실제 개발자의 작업 모습야. 일련의 요구 사항을 얻고 이미 알고 있는 내용을 바탕으로 이를 조합해.

필수부분 🎯

웹사이트를 살펴보고 이 레벨의 다섯 가지 주문이 모두 살아 있는지 확인해.

모든 페이지에 스크립트가 연결되어 있으며 콘솔에 오류가 없어(F12 – 빨간색 항목이 표시되지 않아야 함).
다크 모드 – 모든 페이지 헤더에 스위치가 있으며 선택 사항이 기억돼.
대화형 버튼 또는 카운터 – 변수와 조건이 포함된 최소 하나의 주문야.
라이트박스가 있는 사진 갤러리 – 클릭하면 사진이 더 커집니다.
퀴즈 또는 유효성 검사가 포함된 양식 – 다음 중 하나 이상. 둘 다 자유롭게 해보세요!

선택적 확장 🌟

적어도 하나를 선택해(또는 직접 생각해 보세요):

시간대별 인사말

홈페이지는 아침과 저녁에 다르게 인사해.

<p id="day-greeting"></p>

const dayGreeting = document.getElementById("day-greeting");
const hour = new Date().getHours();

if (hour < 9) {
  dayGreeting.textContent = "Good morning! ☀️";
} else if (hour < 18) {
  dayGreeting.textContent = "Hi there, have a nice day!";
} else {
  dayGreeting.textContent = "Good evening! 🌙";
}

new Date()현재 날짜와 시간을 반환해..getHours()시간을 빼냅니다.

클릭 시 무작위 메시지

매번 다른 농담, 여행 아이디어 또는 팀 구호:

const messages = [
  "Practice makes perfect!",
  "Let's go, Eagles! 🦅",
  "You miss every shot you don't take.",
  "Fans are the twelfth player.",
];

const messageButton = document.getElementById("message-button");
const messageEl = document.getElementById("message");

messageButton.addEventListener("click", () => {
  const random = Math.floor(Math.random() * messages.length);
  messageEl.textContent = messages[random];
});

Math.random()0과 1 사이의 난수를 반환하고 나머지 줄은 이를 배열의 임의 위치로 바꿉니다.

카운터 방문(너만을 위한)

웹사이트를 몇 번이나 열었나요? localStorage에 저장해.

let visits = Number(localStorage.getItem("visits") ?? 0);
visits++;
localStorage.setItem("visits", visits);
console.log("You've opened this page " + visits + " times now");

Number(...)메모리의 텍스트를 숫자로 변환하고?? 0”아무것도 없으면 0부터 시작하라”는 뜻이다.

접이식 섹션(아코디언)

클릭 가능한 제목 아래에 긴 메뉴나 목록을 숨깁니다.

const sectionHeading = document.getElementById("expand-heading");
const sectionContent = document.getElementById("expand-content");

sectionHeading.addEventListener("click", () => {
  sectionContent.classList.toggle("hidden");
});

너는 이미.hidden { display: none !important; }갤러리 수업의 수업.

## 새 버전을 인터넷에 업로드

GitHub 페이지의 웹사이트는 여전히 레벨 1의 이전 버전야! 새 항목을 업로드해.

github.com에서 저장소를 엽니다.
파일 추가 → 파일 업로드,
변경된 파일을 드래그해(주로script.js,style.css, 그리고 모든.html파일)을 클릭하고 변경 사항 커밋을 클릭해.

잠시 후 모든 사람이 볼 수 있도록 주문이 실행돼.

✅

**축하해요, 마법사님! 🪄** 네 웹사이트는 더 이상 아름답기만 한 것이 아닙니다.살아 있는. 클릭에 반응하고, 선택 사항을 기억하고, 질문하고 답변해. 그리고 너는 모든 라인이 어떻게 작동하는지 알고 있어. ~ 안에레벨 3 – 마스터, React, 구성 요소 및 자체 서버와 같은 전문가와 같은 웹 사이트를 구축하는 방법을 배우게 돼.

이 레벨에서 가져가야 할 것

JavaScript: 변수, 조건, 함수, 배열, 객체, 루프 – 모든 프로그래밍의 기본야.
주문 공식: 요소 찾기 → 이벤트 듣기 → 조치 취하기. -localStorage사물을 기억하기 위해,querySelectorAll+forEach요소 그룹의 경우 양식 입력을 확인해.