일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- codesandbox
- 프로그래밍 언어론
- websocket
- 컴퓨터 네트워크
- 코딩테스트 고득점 Kit 완전탐색
- 데이터모델링과마이닝
- 디자인 패턴
- Java
- vanillaJS
- 자바스크립트
- 프로그래머스
- react firebase
- 코틀린
- 자바 공부
- react hook
- 백준
- useState
- design pattern
- React JS
- 장고
- useEffect
- 프로그래머스 자바
- 자바
- JavaScript
- 코딩테스트 고득점 Kit
- 리액트
- 프로그래머스 완전탐색
- 리액트 훅
- NextJS
- react
- Today
- Total
목록Web/Javascript (24)
기록하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pGrJq/btrbbT5BX29/u1lZtE9uTt8KwVJm0rOo00/img.png)
- 위 스크린샷의 왼쪽 화면에서 체크리스트의 항목을 삭제하면 오른쪽 화면의 localStorage에서도 삭제된다. - 새로고침 실행 시 내가 삭제를 원했던 항목을 아래 스크린샷처럼 오른쪽 화면 및 localStorage 에서 모두 보이지 않도록 조치를 취한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const TODOS_KEY = "todos"; fu..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bT2BWF/btrbgpa3Bvf/CIKQNA6EQnW8yUvRPfFKV0/img.png)
Checklist Load 구현 - list를 입력 받아 localStorage에 저장한다. - 새로고침 후에도 localStorage로부터 이전에 저장한 value를 load해서 list를 유지할 수 있다. - 이전 정보 load 후 추가로 list를 입력 받을 때 덮어쓰기 되지 않고 기존 list에 추가되도록 한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bOnpOf/btra1ZkcqKD/BiSbmlDa6xZs0yoUIQbbvK/img.png)
아래와 같이 refresh 할 때마다 배경 사진이 바뀌는 기능을 추가해보자. Log in 00:00:00 const images=["img1.jpg","img2.jpg","img3.jpg"]; const chosenImage = images[Math.floor(Math.random()*images.length)]; const bgImage = document.createElement("img"); bgImage.src = `img/${chosenImage}`; document.body.appendChild(bgImage); 1. random image 저장 - 필요한 이미지를 프로젝트 폴더 내 img 폴더를 생성해 한 데 모아둔다. - string type..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kyFkm/btrbbSxjQoG/LzDvtyA6RKp5yLipqwxWk1/img.png)
10개의 명언 중 랜덤하게 하나를 골라 명언과 출처를 출력하는 js를 적용해보자. Log in 00:00:00 const quotes = [ { quote : "Laughter is timeless, Imagination has no age. And dreams are forever.", author : "Walt Disney", }, { quote : "The past can hurt, but the way I see it, you can either run from it or learn from it.", author : "Lion King", }, { quote : "You must not let anyone define your limits because ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Ot32d/btra8mZGnE9/s9gJqP9CUHBH27S0FY8cIk/img.png)
만들고자 하는 시계의 모양이다. 여기서 필요한 것은 기본적으로 제공되는 Date 객체의 hours, minuteds, seconds 함수는 시, 분, 초가 10보다 작은 경우 01, 02가 아닌 1, 2 와 같이 한 자리로 표시된다는 것이다. 따라서 아래 스크린샷처럼 00:00:00 형식으로 표시되도록 조치를 취해주어야하는 것이 포인트이다. Log in 00:00:00 const clock = document.querySelector("h2#clock"); function getClock(){ //매초 시분초를 갱신 const date= new Date(); const hours = String(date.getHours()).padStart(2,"0"); const..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xS4Ah/btraTbdWCLo/ygE0UtKgEubxnDZIoWOCGK/img.png)
1. 첫 화면 - username 을 입력하는 form 을 보여준다. - 이름을 입력하기 전에는 localStorage가 비어있다. 2. 이름 입력 후 login 버튼 클릭 - 'Hello 이름 :)!' 이 출력된다. - form 태그는 출력되지 않는다. - local Storage 에 username이 저장된다. - 새로고침을 해도 username이 local Storage에 저장되어 인사 멘트가 동일하게 출력된다. HTML Log in CSS body{ background-color: lightslategrey; text-align: center; } .hidden{ display : none; } body 태그 내 form, h1태그의 class 이름을 hidden으로 지정하고 css에서 hidde..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/YHwFt/btra8zjLWaq/sPgnkIxdOBmLBvSop4jxS0/img.png)
div.fruit h1[id=first] : class=fruit인 div중 h1의 id가 first인 쿼리 const h1=document.querySelector("div.fruit h1[id=first]"); handleTitleClick1, 2는 아래와 같은 역할을 동일하게 수행하는 코드이다. h1의 classList에 clicked class가 이미 있는지 확인 → 만약 있다면 clicked를 제거 → 없다면 clicked를 추가 toggle 함수는 handleTitleClick2 함수 내부의 코드 4줄과 동일한 역할을 한다. function handleTitleClick1(){ const clickedClass = "active"; if(h1.classList.contains(clickedCl..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pNMij/btraKFdRAHb/0nfhyIKr7mQyMEXTu8X2OK/img.png)
Peach🍑 GreenApple🍏 WaterMelon🍉 ☁ 🌞 ☃ ☔ body{ background-color: lightblue; text-align: center; } // document : 현재 js 파일과 연결된 html 파일 // document에 first 라는 id를 가진 element를 가져온다. let firstElement=document.getElementById("first"); console.log(firstElement); // document에 second 라는 id를 가진 element의 innerText를 가져온다. let SecondElement=document.getElementById("second").innerText; console.log(SecondElemen..