[section 1 마무리 - 솔로 프로젝트 완성] html form태그 input javascript로 데이터 가져오기 +7/20수정

young·2022년 5월 20일
0

4/25~ 5/23 Section 1 TIL

목록 보기
22/23

📢 7/20 미래에서 온 편지

지금 보니까 왜이렇게 감정 호소만 하고 ㅋㅋㅋㅋ 설명도 제대로 안 써놨지
새끼 기린같은 날것의 표현 최대한 그대로 두고
쓸데 없는 사담만 지워놓겠습니다~~


솔로 프로젝트 회고

: javascript에서 객체를 요소로 갇는 배열을 데이터로 받아서
나의 사이트를 만드는 프로젝트였다 <보러가기>

~지난 이야기~
솔로 프로젝트를 진행하는 동안 많은 난관이 있었다
오늘 4:30까지 제출 기한이 있었고

**form태그 submit을 하면
자바스크립트 파일 내 배열에 새로운 요소로 추가되는 것**은 실패했다

어제 운동 다녀와서 밤부터 오늘 아침 해뜨는 것 보면서... 열심히 했는데...

그 시간동안 한 것:
dom으로 질문과 답변 받아와서 출력하고
css로 예쁘게 구현한 것

이것만 한 7시간 했을 거다
그리고 쪽잠자고 오늘 약 4시간동안 form태그와 submit에 대해 알아보고 있었다.

---> 결국 성공!!!!!!!!!
다른 분들의 코드를 보고 공부해서 나의 환경에 맞게 적용시켰다


HTML form 태그 input 입력값 javascript로 데이터 가져오기


나의 경우는 html 태그 구조가 이런 상황이었다


~시행착오~
form내부의 입력값을 받아오기 위해
input의 value,
input의 value,
textarea의 value 를 가져오고
form.addEventListner('submit', 입력값을 받아서 사용할 함수);

라고 생각했다

그 중 한 케이스...

이때 input value를 가져오기 위해 선택한 방법은
document.createElement('form')부터 시작하여 폼을 새로 만들어놓고
document.getElementsByName() 메소드로 input태그의 name을 가져오는 것.
각각이 따로 움직인다고 생각했다
return false는 뭔지도 모른채 썼다
---> 출력이 되지도 않고 오류가 나지도 않았다


그러다 알게된 것은 queryselector()로 html내부에 있는 태그를 바로 가져오는 거였다 (!)
새로 값이 계속 들어오는 거니까
화면에 결과물이 연달아서 출력되려면 document.createElement('form') 로 만드는 거라고 생각했다.

아니까 이제 보인다...

/* submit */
// 변수선언 = 쿼리셀렉터로 가져와서, 함수밖에, form태그를 가져온다
const newContent = document.querySelector('.form__container form');
const newName = document.querySelector('div.form__input--name input');
const newTitle = document.querySelector('div.form__input--title input');
const newText = document.querySelector('div.form__textbox textarea');

const addPost = function(event){
  event.preventDefault();
  agoraStatesDiscussions.unshift({
    id: '비공개',
    createdAt: new Date(), //로컬 시간으로 변환하는 것은 글 밑으로...
    title: newTitle.value,
    url: null,
    author: newName.value,
    answer: null,
    bodyHTML: newText.value,
    avatarUrl: "https://img.icons8.com/dusk/64/000000/new.png", //무료아이콘
  });
  render(ul);	//다른 자바스크립트 파일 배열 데이터를 화면에 렌더링해주는 함수
};

newContent.addEventListener('submit', addPost);

submit 이벤트 핸들러는'버튼'이 아닌 form 요소에 적용해야 한다.

다른 컨테이너도 건드려야해서 바로 해결된 것은 아니지만
결국 했다...!!!!
직접 부딪히며 배우니까 오래 기억 남을 것 같다


CSS

기능 구현부터 하느라 많은 건 못했지만
input 요소들에 border-bottom만 주고,
textarea도 높이를 길게 해놓고 자동완성도 없앴다.

//자동완성 없애기
autocomplete='off'

답변자 정보는 text-align: right;로 설정하여 질문과 답변이 구분되게끔 했다
색조합사이트를 참조해서 편안하고 부드러운 색감으로 꾸며보았다

JavaScript

질문을 클릭하면-> 질문 내용content와 그 아래 답변 container(답변자 정보, 답변 내용)이 나오게 했다
서툴러서 한참 걸렸다...

html에서 질문내용 content와 답변 container의class='hide' 를 주고
css에서 .hide {display: none;}을 설정해 주었다.

//이벤트리스너
  const openContent = function(){
    if (!(질문내용.classList.contains('hide'))) {
      질문내용.classList.add('hide');
      답변묶음.classList.add('hide');
    }
    else {
      질문내용.classList.remove('hide');
      답변묶음.classList.remove('hide');
    }
  }
  
  질문제목.addEventListener('click', openContent);

+자바스크립트 시간 데이터 로컬 시간으로 반환하기

const localData = new Date(element).toLocalTimeString();

TODO : Advanced challenge

앞으로 더 공부해야 할 것들

  • 페이지네이션
    이전 페이지, 다음 페이지 이동하기
    한 페이지에 10개의 게시글 나타내기

  • LocalStorage
    페이지 새로고침해도 새 글 유지하기


완성된 화면

혼자서 프로젝트를 진행하는 건 정말 많은 공부가 되었다.
어째 더 책임감이 생긴 기분이라 열심히 하게 됐다.

나 진짜 잘 하고 싶다
오기가 생긴다...!!!
더 더 집착해서 열심히 할 거다

profile
즐겁게 공부하고 꾸준히 기록하는 나의 프론트엔드 공부일지

0개의 댓글