스파르타 코딩 메이킹챌린지 개발일지-1

메이킹 챌린지의 모집이 시작되고 한참을 고민했다.

"아... 나 배운거 얼마 안되는거 같은데 할수 있을려나?"

하는 생각이 가장 앞섰던거 같다.

하지만 스파르타코딩클럽에서 다행히 복습챌린지라는 것을 신설해주셔서

이때까지 배운것을 복습한다는 개념으로 접근을 해서 만드는 챌린지라고 해서 도전하게 되었다.

 

조원이 모이고 파트 분배 및 역할 분담 같은걸 정하고는(나는 프론트엔드) 여러가지를 시도해보았는데

우리조의 첫 구상은 "To Do List" 였었다.

해볼만 한것 같았고 코드펜 같은데서 이쁜 템플릿을 퍼오면 전부다 가능할거라고 생각했지만

역시나.. ㅠ_ㅠ 

 

태그 명령어 부터 전혀 이해가 안가는것들 투성이라 

이게 되면 저게 안되고 저게 되면 이게 안되고를 계속 반복했다.

 

그래서 우리는 다시 처음부터 새로 계획

해결의책 컨셉으로 방향을 잡기로 했다.

 

그뒤에 다시 나눈 역할분담에서 나는 해결을 띄우는 팝업창 부분을 담당하기로 했고

 

그결과 "모달창"이라는 요즘에 많이쓰는 레이어 팝업을 구글링을 통해 알게 되어서 

구현 하게 되었다.

 

<div class="modal">
    <div class="modal_content"
         title="클릭하면 창이 닫힙니다.">
        <div class="popup_box"> <!--팝업 박스를 감싸는 부분-->
            <!--"(이름)님의 생각"이 들어가는 부분-->
            <p class="name_box" id="name_modal"></p>
            <!--해답 부분들을 감싸는 부분-->
            <div class="main_box">
                <!--"(질문)에 대한 해답"이 들어가는 부분-->
                <ul class="que_box"><div id="question_modal"></div><br/>에 대한 해답
                    <div class="img_box"><img src="https://picsum.photos/420/250" class="img_box_1" alt="해답"></div>
                    <!--img 삽입구간-->
                    <li id="random" class="que">여기에 해답이 들어갑니다. <br/>여기에 해답이 들어갑니다.<br/>여기에 해답이 들어갑니다.</li>
                </ul>
                <div class="solution_box"></div> <!--해답을 넣을 구간-->
            </div>
        </div>


        <script type="text/javascript">
            
            function btnClick() {
                let name = document.getElementById("inputName").value; <!-- 이름 입력한 것 가져오기 -->
                let question = document.getElementById("inputGomin").value; <!-- 고민 입력한 것 가져오기 -->
                document.getElementById("name_modal").innerText = `${name}` +'님의 생각'; <!-- 가져온 이름 모달창에 띄우기 -->
                document.getElementById("question_modal").innerText = `${question}`; <!-- 가져온 고민 모달창에 띄우기 -->

            }
            
            $(function () {

                <!--고민해결 버튼 눌렀을 때 모달 나타나면서 실행될 코드들-->
                $("#modal_btn").click(function () {
                    $(".modal").fadeIn(); <!-- 모달 나타남 -->
                });

                <!--모달 창 눌렀을 때-->
                $(".modal_content").click(function () {
                    $(".modal").fadeOut(); <!-- 모달 사라짐 -->
                    location.reload(); <!-- 전부 새로고침 -->
                });
            });
        </script>

    </div>
</div>

위에 코드가 모달을 구성할때 썻던 코드

알고나면 간단한 것들이었지만

사실 아직도 잘 이해가 안된다. ㅠ_ㅠ

 무튼 여차저차해서 모달창 완성 ㅠ_ㅠ

 

다음 내용은 다음 글에서 설명하겠습니다.