wecode +8 (8/25)

배운 것/개발한 것/정리한 것

 - westagram : html, css, js 작업 (계속)

 

1. DOM을 이용한 JS 작업

 - 메인 화면

const commentUl = document.body.querySelector(".commentList");
const commentInput = document.body.querySelector(".commentDesc");
const commentBtn = document.body.querySelector(".commentBtn");

const uploadComment = () => {
  if (commentInput.value) {
    let liNew = document.createElement("li");
    liNew.innerHTML = `<span class="commentId">youngkwon315</span>
    <span class="commentDetail">${commentInput.value}</span>`;
    commentUl.appendChild(liNew);
    commentInput.value = "";
  }
};

commentBtn.addEventListener("click", uploadComment);
commentInput.addEventListener("keypress", function (e) {
  if (e.key === "Enter") {
    uploadComment();
  }
});

 - 로그인 화면

const idInput = document.body.querySelector(".userId");
const pwdInput = document.body.querySelector(".userPassword");

const buttonColorChange = () => {
  return idInput.value || pwdInput.value
    ? (document.body.querySelector(".login_btn").style.backgroundColor = "blue")
    : (document.body.querySelector(".login_btn").style.backgroundColor =
        "rgba(var(--d69, 0, 149, 246), 0.3)");
};

idInput.addEventListener("keyup", buttonColorChange);
pwdInput.addEventListener("keyup", buttonColorChange);

 

2. CSS flexbox & 기타 새로운 것 시도

 

 

내일 할 것

오전

 - JS 프로그래머스 문제 1개 풀기

 - JS 비동기 & 콜백 3번째 글 블로깅 (async & await)

 

오후

 - westagram 작업 (계속)

  -> CSS (검색창 포커싱 시 css 변경, 우측 프로필 그라데이션 적용, )

  -> js 추가 구현사항 적용

   1) id/pw validation

   2) 댓글 좋아요/삭제 기능

   3) 아이디 검색 기능

   4) nav 프로필 클릭시 메뉴 박스 생성

   5) 반응형 구현

 - codecademy react 강의 들어보기

 

저녁

 - westagram 작업 (계속)

  위 다섯개 작업 중 최소 4개 끝내기