[홍지범_FrontEnd] 3주차 과제 제출합니다.

[jibeommm]

No description provided.

[dooohun]

수고하셨습니다!
코드도 깔끔한 편이고, 전체적으로 읽기 편했습니다👍
간단하게 코드 리뷰 남겼으니, 확인해보고 답변 남겨주세요~

[dooohun]

선택자 문법을 잘 쓰셨네요👍

[jibeommm]

감사해욥🫠

[dooohun]

Suggested change

	document.getElementById("buy_count").addEventListener("input", () => {
	const count = document.getElementById("buy_count").value;
	document.getElementById("buy_count").addEventListener("input", (e) => {
	const count = e.target.value;

이런식으로 사용 가능해요! 여기서 e가 의미하게 무엇인지 학습해보세요!

[jibeommm]

e는 이벤트 객체로 이벤트가 발생했을 때 브라우저가 자동으로 만들어주는 객체입니다.
이벤트가 발생한 HTML 요소를 가르키는 데 위와 같은 상황에선 e.target.value = input창에 입력된 값입니다.
e에 대해 학습완료했습니닷!

[dooohun]

여기도 위와 마찬가지겠죠?

[dooohun]

위에서 result_list에서 작성한 내용하고 거의 비슷한 거 같아요. 아래쪽도 거의 비슷한 거 같은데, 어떻게 하면 줄일 수 있을까요? (재사용성을 고려해서 코드를 짜보면 좋을 거 같아요!)

[jibeommm]

function createBalls(numbers) {
const colorId = ["yellow", "blue", "red", "gray", "green", "yellow"];
let html = '

';
for (let i = 0; i < numbesr.length; i++) {
html += <div class="ball" id="${colorId[i]}">${numbers[i]}</div>;
}
html += '

';
return html;
}
재사용 함수를 만들면 될 것 같습니다!
my_result_list.innerHTML += ${createBalls(myNumbers)};