FS_hansol

버튼을 생성하여 숫자가 작아지거나 커지거나 reset할 수 있는 걸 색상을 넣어서 구현해 보았다. let count = 0;const number = document.querySelector('.number');function updateColor() { if (count 0) { number.style.color = "green"; } else { number.style.color = "yellow"; }}//변수선언해서 할당하지 않고 addEventListener에서 같이 선언한 이유는 //반복적인 작업이 아니기 때문이다. //한번만 선언해서 할당해야하는 경우에 이렇게 쓰고 있다.document.querySelector('.btn-increase').addE..

const body = document.querySelector('body');const btn = document.querySelector('.button');let colors = [ 'yellow', 'green', 'pink', '#dc143c', 'rgba(123, 123, 123, 0.5)'];btn.addEventListener('click', colorChange);function colorChange() { const random = parseInt(Math.random() * colors.length); body.style.backgroundColor = colors[random];};색을 배열로 만들어서 버튼 클릭하면 배경색이 바뀌는 걸 구현해 보..

제출 const nameInput = document.querySelector('.name-input'); const displayName = document.querySelector('.display-name'); document.querySelector('.btn-submit').addEventListener('click', function () { const name = nameInput.value; // 입력된 이름 가져오기 displayName.textContent = `안녕하세요, ${name}!`; // 이름 표시 nameInput.value = ''; // 입력 필드 초기화 ..

알고리즘을 보면 가끔 등장하는  reduce 너무 궁금해서 오늘 공부해봤다. const sum = (...numbers) => { return numbers.reduce((acc, curr) => acc + curr, 0); //여기서 acc는 accumulator(누적 값), curr은 current(현재처리 중인 배열요소) //그리고 0은 초기값.};// 함수 호출console.log(sum(1, 2, 3, 4)); // 10console.log(sum(5, 10, 15)); // 30console.log(sum()); // 0console.log(sum(100, 200)); // 300한마디로 누적더하기라고 생각하면 쉽다 console.log(sum(..

이번주에 걷기반에서 배운 스프레드연산자에 대해 궁금증이 생겼다.스프레드연산자와 리스트연산자의 차이점이 대체 뭘까?? Spread연산자//배열const fruits = ['apple', 'banana', 'orange'];const moreFruits = [...fruits, 'grape', 'mango'];console.log(moreFruits); // ["apple", "banana", "orange", "grape", "mango//객체const person = { name: 'Alice', age: 25};const updatedPerson = { ...person, city: 'Seoul'};console.log(updatedPerson); // { name: 'Alice'..

아침부터 객체에 새로운 요소를 추가하고 싶어져서 실험해보았다.person을 만들어서 객체에 정보를 넣어주고 곧바로 아래 코드처럼 출력해보았다.const person = { name: 'Alice', age: 25, city: 'seoul'};const { name, year=2040 } = person;console.log(person.name) //Aliceconsole.log(person.year) //undefined왜 언디파인드가 나오는지 의문이 들었다. person객체에 존재하지 않는 속성이기 때문에 undefined 가 나온댄다...즉, 객체에 year이라는 속성이 존재하지 않기 때문에 나온다는 거라는데 그래서 추가하려고 한 게 아닌가?그렇다면 어떻게 해야 객체에 새로운 속성이..

자바스크립트 기본 요소1. 데이터 타입 원시 타입: String, Number, Boolean, Null, Undefined, Symbollet str = "Hello"; // 문자열let num = 42; // 숫자let isActive = true; // 불리언let nothing = null; // nulllet notAssigned; // undefinedlet uniqueSymbol = Symbol(); // 심볼 원시 타입: JavaScript에서 기본적인 데이터 유형입니다. 불변(immutable)입니다.String: 문자열을 나타냅니다.Number: 숫자를 나타냅니다.Boolean: true 또는 false 값..

function 모달창열닫() { document.querySelector(".modal").classList.toggle("show");}document.querySelector(".modal-btn").addEventListener("click", 모달창열닫);document.querySelector(".close-btn").addEventListener("click", 모달창열닫); 클릭 시 모달창이 닫히도록 구현한 코드.document.querySelector(".modal").addEventListener("click", function 함수명() { document.querySelector(".modal").classList.remove("show");})  버블링?내부 이벤트 발생->외부로..

오늘 할 일걷기반 복습딥다이브  배열let a=[1,2,3]console.log(...a) //123let b=[...a]let a = [1, 2, 3]console.log(...a) //123let b = [...a]b[0] = 100console.log('a=', a)//[1,2,3]console.log('b=', b)//[100,2,3]대활호 안에 ...찍으면 같이 바꾸는 걸 예방할 수 있다!!!  객체//여기부터 객체let a={a:1, b:2}console.log({...a})//{ a: 1, b: 2 }//중괄호 필수let b={...a}//중괄호 안쓰면 a,b 둘다 바뀜b.a=2;console.log({a})//{ a: { a: 1, b: 2 } }console.log({b})//{ b: {..

문제점깃허브에 올리는 과정에서 자꾸 인덱스를 제외하고 js와 css파일이 안들어가진다.보니까 master로 되어있어서 이를 병합해야 한다는 것이다. 해결$ git checkout master $ git branch main master -f$ git checkout main $ git push origin main -f위 코드를 터미널에서 순서대로 넣어주면 된다.문제점북마크페이지 크기해결#card>img { height: 400px;}문제점북마크 삭제 시 실시간 반영안됨 해결 function loadBookmarks() { const bookmarks = JSON.parse(localStorage.getItem("bookmarkList")) || []; // 저장된 북마크 목록 불러오기 const..