24.05.17 TIL

베이직반 과제하고 제촐

// 1.

document

.getElementById("container")

.addEventListener("click", function (event) {

if (event.target.classlist.container("box")) {

event.target.classlist.toggle("clicked");

}

});

// 2.

function getSquare(number) {

// number의 제곱을 계산하여 반환하는 함수를 작성하세요.

return number * number;

}

const result = getSquare(5);

console.log("5의 제곱 -> ", result); // 25 출력 (5의 제곱)

// 3.

window.addEventListener("scroll", function () {

let scrolled = window.scrollY;

console.log(`스크롤 양-> ${scrolled}`);

});

// 4.

for (let i = 0; i <= 10; i++) {

console.log(`for문-> ${i}`);

}

// 5.

for (let a = 0; a <= 20; a++) {

if (a % 2 === 0) {

console.log(`짝수출력-> ${a}`);

}

}

// 6.

setTimeout(() => {

console.log("3초 후에 출력되는 텍스트입니다.");

}, 3000);

// 7.

let count = document.querySelector("#counter");

let timer = parseInt(count.textContent);

const Interval = setInterval(() => {

console.log(timer);

if (timer < 5) {

timer = timer + 1;

count.textContent = timer;

} else {

clearInterval(Interval);

console.log("종료 !");

}

}, 1000);

---

베이직반 라이브 강의

 

🔥 요구 사항

1. 열기 버튼 클릭 시 사이드바가 우측으로 이동됩니다.
2. 사이드바가 우측으로 나오면 버튼의 텍스트가 열기에서 닫기로 바뀝니다.
3. 기본 css는 제공되어 있으니 javascript 코드만 수정하면 됩니다.

---

🔥 요구 사항

1. 열어봐 버튼 클릭 시 아래 내용이 나온다.
2. 각 버튼의 본인에게 인접한 내용이 나오게 해야 한다. (animation은 없어도 괜찮습니다)

 

collapsible 예시 찾다가 정답이 나와버렸다.

https://www.w3schools.com/howto/howto_js_collapsible.asp

How To Create a Collapsible