오늘의 공부를 끝내며.. (11/3)

어제 했었던 검색구현 기능을 오늘 모두 해냈다. 그리고 css기능 및 HTML에도 여러가지 꾸밈을 추가하므로써 좀 더 그럴싸한 페이지가 만들어졌다. 

첫번째는 메인페이지, 두번쨰는 방명록 페이지이다.

방명록페이지에서는 글을 작성하여 쭉 아래와 같이 글을 남길수 있으며, 남긴 글을 수정 및 삭제도 가능하다. 또한 방명록안에 있는 닉네임 혹은 내용을 검색시 해당 일치하는 것을 모두 보여준다. 

 

사실 검색구현기능은 아래와 같이 간단하게 보이긴하나, 사실은 팀원끼리의 양식을 이어서 붙어야되기에 다소 어려운부분도 있었다.

,listFilter : function(){
    let value, contents, nick, item, i;

        value = document.getElementById("fil").value;
        // "fil"아이디에 포함된 모든 문자열의 입력값을 value에 넣어준다. 쉽게 보면 글검색창에 단어를 입력시 value에 넣어준다
        // 라고 생각하면됨

        item = document.getElementsByClassName("card");
        // "block"클래스, 즉 이미 있는 글내용과 닉네임이 있는 클래스에 포함된 모든 문자열을 item에 넣어준다.

        for (i = 0; i < item.length; i++) {
            // item에는 item[0], item[1], item[2] 현재 이렇게 담겨져있다.

            contents = item[i].getElementsByClassName("nick_name");
            // 각 아이템 배열에서 클래스 contents, 즉 글내용 부분을 담는다
            console.log(contents)
            nick = item[i].getElementsByClassName("blockquote-footer");
            // 각 아이템 배열에서 클래스 nick, 즉 닉네임 부분을 담는다
            if (contents[0].innerHTML.indexOf(value) > -1 ||
                nick[0].innerHTML.indexOf(value) > -1) {
                // innerHTML은 HTML의 컨텐츠, 즉 내용에 접근할 수 있는 변수이고
                // indexOf()는 괄호안 값 문자열의 위치가 0,1,2,3,4... 인지 반환, 만약 없으면 -1을 반환한다.

                //만약 첫번째 글내용에 HTML의 컨텐츠값인 value(이건 검색창에서 입력한 문자열)가 존재하거나
                //|| 혹은 첫번째 닉네임에 HTML의 컨텐츠값인 value(이건 검색창에서 입력한 문자열)이 존재할경우

                item[i].style.display = "block";
                // 지금 전체 글내용중에서 해당 번째의 글내용을 보여준다
            } else {
                item[i].style.display = "none";
                // 지금 전체 글내용중에서 해당 번째의 글내용을 보여주지 않는다.
            }
        }
}

한동안 틀린그림찾기와 같은 레벨의 작은 오류로 인해, 방황하다가 겨우 하나를 찾아내어 기능 구현에 성공했다.

 

5명의 팀원이 만들어낸 작품이긴 하나, 아쉽게도 2명의 인원은 도중 하차를 하게 되었다. 그분들의 도움이 정말 감사했으며 아쉽긴했으나, 사람인연은 또 어딘가에서 만나지 않을까 싶다. 내일 오후부터는 오늘 및 내일오전까지 해낸 프로젝트를 가지고 발표를 하게된다. 발표부분이나 프로젝트를 정리하는 부분등 여러가지 할일이 있지만, 나름 뿌듯하고 뭔가를 해냈다는게 좋았다.