프로젝트/나만의 Home Page9 [나만의 Home Page] 디버깅 필요 모음 이전의 글들과 다른 사람들의 경험 결과를 바탕으로 디버깅이 필요한 점을 기록한다. ✅: 완료한 것 ❎: 계획 수정으로 인해 디버깅이 필요하지 않은 것 [js] google link 삭제해도 뜨는 이유 파악하고 수정하기 localStroage에서 myQuotes를 삭제해도 새로 추가할 수 있도록 설정✅ myQuote, 사진 입력 후 바로 화면에 표시🔺 (로컬파일과 커밋까지는 완료했으나, 사이트에는 적용되지 않음) [html] meta 설정🔺 (로컬파일과 커밋까지는 완료했으나, 사이트에는 적용되지 않음) input의 maxlength 설정✅ [css] input button의 글자 크기 수정✅ input-form의 배치 수정✅ 명언 폰트 색깔을 랜덤으로 설정❎ submit 같은 반응이 있을 때 transit.. 2023. 3. 8. [나만의 Home Page] 바로 가기 만들기 링크와 링크의 별명을 입력하면 바로가기 목록에 추가되도록 만들었다. 만들어진 목록을 클릭하면 새 창을 열어 해당 링크로 이동한다. 그리고 삭제 버튼을 눌러 링크를 삭제할 수도 있다. 기술 알고리즘이 할 일 목록과 거의 동일하다. - 링크와 별명을 입력받으면 myLinks 배열에 저장한다. - 이를 localStorage에서도 저장한다. - localStorage에서 myLinks를 불러와 해당 목록을 화면에 나타낸다. - 목록을 화면에 나타낼 때는 createElement(), appendChild()를 활용한다. - 각각의 버튼은 eventListner이고, 클릭되었을 때 li 태그의 정보를 가지고 온다. - 가지고 온 정보를 바탕으로 해당 링크를 삭제한다. localStorage에 저장된 myLink.. 2023. 1. 29. [나만의 Home Page] 갤러리 구현하기 이미지 주소를 입력하면 화면에 드러내는 갤러리를 만들었다. 그리고 버튼을 통해 갤러리 속 사진을 확인할 수 있고, 삭제할 수도 있다. 동기부여 할 수 있는 사진, 가고 싶은 곳, 외우고 싶은 개념 등 원하는 사진을 볼 수 있어 좋다. 기술 - 입력받은 이미지 주소를 js 파일의 links 배열과 localStorage에 저장한다. - 현재 보이는 이미지를 저장한 글로벌 변수 chosenImg를 정의한다. - chosenImg를 활용하여, 버튼의 클릭에 따라 이미지를 삭제하거나 배열에 저장된 순서대로 이미지를 표시한다. - 새로 고침할 때, 이미지를 삭제할 때 Math를 이용하여 랜덤으로 이미지를 표시한다. 디버깅 함 1. 이미지에도 border-radius를 설정했다. 2. 아래처럼 input-form을.. 2023. 1. 29. [나만의 Home Page] 할 일 목록 만들기 할 일을 입력하면 목록에 추가된다. 그리고 옆의 x 버튼을 누르면 해당 할 일이 삭제된다. 기술 - 할 일 목록을 localStorage에 저장한다. - 할 일 목록을 localStorage에서 불러온다. - 할 일은 createElement(), appendChild()를 통해 화면에 나타낸다. - 할 일은 Date.now()를 이용하여 고유한 id를 만든다. - x버튼이 눌리면 event.target.parentElement를 이용해 해당 li 요소를 없앤다. - filter()를 통해 할 일 목록에서 해당 내용도 삭제하고, localStorage도 수정한다. https://github.com/soaringwave/html-JS-css/commit/16a8b0504cc183e4fa4cb6e4feeae.. 2023. 1. 29. 이전 1 2 3 다음
