프론트엔드 - 바닐라js

... spread 연산자

// 틀렸음 const [person, setPerson] = useState({ name: '엘리', title: '개발자', mentors: [ { name: '밥', title: '시니어개발자', }, { name: '제임스', title: '시니어개발자', }, ], }); { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson((person) => ({ ...person, mentors: person.mentors.map((mentor) => { if (mentor.name === prev) { return {...mentor, current} } })})) }} > {....

[javascript] 바닐라 JS로 크롬 앱 만들기 - 끝

결론적으로 졸업작품은 못 냈다...... 다 만들어놓고 이것저것 수정해야지~ 하고는 연휴동안 까먹었다!!! 만들 때 창을 작게 띄워놓고 하는데 그래서 그런지 엄청 조그맣게 만들어졌다ㅋㅋㅋ ^^ㅠㅠ css 부분은 거의 포기했다고 보면 된다. 스타일 컴포넌트랑 scss 쓰다가 css 쓰니까 하나하나 효과를 따로 줘야하는 부분이 너무 많았다. 🖐 form을 이용해서 이름 입력받고 보여주기 🕙 시계 💘 디데이 📝 투두리스트 💞 랜덤 배경화면 🌈 위치 받아서 날씨 알려주기 💤 오늘의 기분 🖐 form을 이용해서 이름 입력받고 보여주기 🕙 시계 이름을 입력하면 로컬스토리지에 저장한다. 💘 디데이 특정날짜까지 남은 시간을 계산하여 보여준다. '디데이까지'라는 문구는 수정할 수 있다. 📝 투두리스트 할 일 입력 후 엔..

[javascript] 바닐라 JS로 크롬 앱 만들기 - 오늘의 기분 선택하기, 디데이까지~

// index.html 뒹굴뒹굴 스트레스 라라라라 // mood.js const moods = document.querySelectorAll(".mood li"); const moodImg = document.querySelector("#mood-img"); console.log(moods); const todayMood = ["뒹굴뒹굴", "스트레스", "라라라라"]; const onClickMood = (event) => { todayMood.map((image) => { switch (event.target.innerText) { case image: moodImg.src = `img/${image}.gif`; return; default: return; } }); }; moods.forEach(..

[javascript] 바닐라 JS로 크롬 앱 만들기 - #7.1 ~ toDo list

삭제는 li 안에 버튼을 만들고, function deleteToDo(event) { const li = event.target.parentElement; li.remove(); } event.target.parentElement(즉 li)를 지우는 방법을 쓴다. 할 일을 저장하기 위해서 로컬 스토리지를 사용한다. localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); 배열, 오브젝트 등을 string으로 저장할 수 있게 해주는 JSON.stringify const savedToDos = localStorage.getItem(TODOS_KEY); if (savedToDos) { const parsedToDos = JSON.parse(savedToDos); } ..

[javascript] 바닐라 JS로 크롬 앱 만들기 - 디데이 숙제

폰트 : 갈무리

[javascript] 바닐라 JS로 크롬 앱 만들기 #3.0 - #3.4

자바스크립트는 HTML에 접근할 수 있게끔 설정되어 있다. document.title 이라고 콘솔에 입력하면 사이에 적은 텍스트가 나온다! 변경도 가능할까? document.title = "mandu"; 하면 새로고침 하기 전까진 title이 mandu로 바뀐다. JS에서 HTML을 변경하는 것도 가능하다! (접근하고 읽고 변경할 수 있다.) document.getElementById("title") 하면 id가 title인 태그를 가져온다. consol.dir 하면 더 자세하게 볼 수 있다. 그 속에 outerHTML, locanName, innerHTML .... 등등등 autofocus 쓰면 autofocus가 true가 된다. document.getElementbyClassName, TagName..