[내일배움캠프_TIL]2023.03.14_2일차

Today

#🔛미니프로젝트

#🔜웹개발 종합반 재수강

---

📝오늘공부한 내용

- 미니프로젝트 진행

-모달창 구현

<!--수직 스크롤 모달창-->
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">

-좋아요 버튼 구현

<!--좋아요 버튼-->
<button class='like' id="like-button1" onclick="checkResult1()">👍좋아요</button>
<p id="likeCount3">0</p>

 .like {    width: 100px;
            height: 37px;
            border: 1px solid rgb(219, 53, 69);
            color: rgb(219, 53, 69);
            background-color: white;
            border-radius: 5px;
            flex-direction: row
        }

function checkResult1() {
            let likeCount1 = parseInt(document.getElementById("likeCount1").textContent);

            var button = document.getElementById("like-button1");
            if (button.innerHTML === "👍좋아요") {
                button.innerHTML = "😢좋아요 취소";
                $('#like-button1').css('background-color', 'rgb(219,53,69)')
                $('#like-button1').css('color', 'white')
                $('#like-button1').css('width', '110px')
                likeCount1++;
                document.getElementById("likeCount1").textContent = likeCount1.toString();
            } else {
                button.innerHTML = "👍좋아요";
                $('#like-button1').css('background-color', 'white')
                $('#like-button1').css('color', 'rgb(219,53,69)')
                $('#like-button1').css('width', '100px')
                likeCount1--;
                document.getElementById("likeCount1").textContent = likeCount1.toString();
            }
        }

---

😭어려웠던 부분

• 이것 저것 크기부터 폰트 사이즈, 모달창 디자인 하나 하나 다 고민되고 어려웠는데, 특히 좋아요버튼 구현이 제일 힘들었다. 숫자가 카운트 되게 하기도 어렵고 효과를 넣는 것도 마음대로 안돼서 시간을 제일 많이 투자하였다.

---

🔎궁금한 내용

• 좋아요 수를 카운팅해서 저장하고 싶어서 DB를 연결하다가 오류가 나서 좋아요 버튼 구현을 마무리하지 못했다. DB연결이 왜 오류가 났는지 자세히 알아봐야겠다.

---

🥲느낀점

새로운 기능을 추가할 때마다 손보고 추가할 내용이 많아져서 자꾸만 간단하게 하고 싶은 마음이 커지지만 나의 발전을 위해 한걸음이라도 더 나아가 보려고 계속 노력해야겠다.