[나만의 Home Page] 홈페이지 이름 입력하기

홈페이지의 이름을 입력하면 화면에 표시하도록 설정했다.

---

기술

- 사용자가 입력하는 정보를 localStorage에 저장하여, 정보가 존재한다면 계속 표시하도록 하였다.

- 정보가 없다면 form을 보이고, 있다면 input을 display:none으로 설정하였다.

- 정보가 submit될 때 preventDefault()를 설정하여 의도대로 실행되도록 하였다.

---

디버깅 함

1.

hidden 클래스를 만들어 form을 숨기려고 했으나 다음과 같이 display:none이 적용되지 않아 애를 먹었었다.

.hidden {
    display: none;
}

hidden 클래스를 정의한 파일을 style.css에서 가장 마지막에 import 하기도 하고, 구글링도 해봤으나 의도대로 실행되지 않았다. 고군분투 끝에 다른 기능을 먼저 구현하고자 input-form을 따로 class로 정의했다. 그러면서 기존의 form에 className을 추가하고, hidden class가 정의된 for-js.css 파일을 input-form이 정의된 파일보다 더 나중에 import하니 해결되었다!

 

2.

placeholder의 글자 크기와 입력하는 텍스트의 크기가 달랐다. input과 input::placeholder의 font-size를 동일하게 설정하여 해결했다.

---

디버깅 필요함

- button의 글자 크기 수정

- input의 maxlength 설정

---

https://github.com/soaringwave/html-JS-css/commit/74c1a5267c42667f0b092437979c817d4438dfc6