Toy project #1 westagram

HTML, CSS

instagram
1. main Page
2. feed 1개
3. logIn Page 구현

Javascript

1. logIn Page: ID input, PW input 에 각각 1개 이상의 글자가 있으면 로그인 버튼 활성화
2. main Page: 게시 버튼 클릭하거나, Enter키 눌렀을 때 feed에 댓글달기 기능 활성화.

부족한점

javascript의 .addEventListener() 에 대한 이해도 부족.
// 개인적으로 다른 토이 프로젝트를 진행하며 더 익혀야겠다.
CSS의 flex에 대한 이해도 부족.
// 개구리 flex 게임과 다른 토이 프로젝트에서 flex만 사용하도록 하여 더 익혀야겠다.

.addEventListener 사용기록

const commentA = document.querySelector('.com_txt');
const btn = document.querySelector('.btn');

commentA.addEventListener('keydown',a); //댓글입력하면 게시버튼 색상바뀌기
btn.addEventListener('click',b); //게시버튼 클릭하면 댓글게시하기
commentA.addEventListener('keydown', c); //input에 enter버튼 누르면 댓글 게시하기


function a(){
    //키 입력하면 버튼 색상바뀌기
    const commentC = commentA.value.length;
    const btnColor = document.querySelector('.btn');
    if(commentC>=0){
        btnColor.style.color = '#5197e9';
    }
    
}
function b(){
    const commentB = commentA.value;
    const tagDiv = document.querySelector('.com_txt_block');
    const tagP = document.createElement('p');
    const tagSpan = document.createElement('span');


    tagSpan.innerText = "jelly_je2";
    console.log(tagSpan);
    tagP.innerHTML=commentB;
    tagP.prepend(tagSpan);
    tagDiv.appendChild(tagP);
    console.log(tagDiv);
    commentA.value = "";
}
function c(){
    if(event.keyCode == 13){
    // const commentB = commentA.value;
    // const tagDiv = document.querySelector('.com_txt_block');
    // const tagP = document.createElement('p');
    // const tagSpan = document.createElement('span');


    // tagSpan.innerText = "jelly_je2";
    // console.log(tagSpan);
    // tagP.innerHTML=commentB;
    // tagP.prepend(tagSpan);
    // tagDiv.appendChild(tagP);
    // console.log(tagDiv);
    // commentA.value = "";
    b();
    }