사전캠프 12일차

벌써 일주일이 지났다..

TIL(Today I Learned) - 오늘의 공부

Javascrip 응용하기 도전과제! 과제 02 까지 완료
- 브라우저의 콘솔을 이용해 javascript 문법들을 시험해볼 수 있었다.
- 웹개발 강의를 보면서 사용했던 CSS나 Javascript를 다시금 복습하며, 새로 Math 함수를 사용해볼 수 있는 시간이었다.

TIL(Today I Learned) - 학습 과정 중 특이사항

Javascript 응용하기 2번 문제가 스크립트 자체는 쉬웠으나 이를 사이트처럼 만들기 위해 css를 사용하여 꾸미는 데 시간이 오래걸렸다.
부트 스트랩 사이트에서 자료들을 이용해 어떻게 써야 원하는대로 배치 되는지를 계속해서 실험해봐야 했다.
강의들을 보면서 쉽다고만 생각했는데 직접 만들어보니 역시 생각해야될 것들과 찾아봐야할 것들이 계속해서 나온다.. 계속 정진하자!

WIL(Weekly I Learned) - 이번 주의 실황

제공된 도전과제 및 강의들을 대부분 수강하여 기초적인 사항들은 배웠다고 생각한다.
그러나 언제나 그랬듯이 학습은 빠르지만 복습은 느린편이라 계속 정리된 자료들을 볼 예정이다!

WIL(Weekly I Learned) - 어떤 기분이었는가?

과제들을 하나하나씩 완료할 때마다 뿌듯했엇고, 배운 자료들을 블로그에 조금씩 정리하며 나를 되돌아 볼 수 있어 좋았다.

WIL(Weekly I Learned) - 기억에 남는 것

SQL 응용과제들을 풀면서 여러 구문이나 사용방법들을 배운 것! 구체적으로 HAVING과 서브쿼리의 조합으로 컬럼별 1순위를 구분하는 방법이다.

WIL(Weekly I Learned) - 앞으로의 일

다음 주가 마지막이지만 과제들은 대부분 끝났기에 남는 시간에 팀으로써 무언갈 자율적으로 해보는 것이 기대된다!

과제제출

1.콘솔 적극 활용하기

placeholder

강아지를 그리는데 역슬래쉬 모양이 제대로 안나와서 아쉬웠다.

2.숫자 기억 게임 만들기

사이트를 꾸미고 여러 기능들을 추가하는데 시간이 꽤나 걸렸다.
따로 제출할 방법을 찾을 수 없어 raw코드를 보여주게 되었다..

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자 기억 게임</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        body{
            background-color: rgb(204, 204, 204);
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        }

        .mypostingbox {
            background-color: white;
            width: 500px;
            height: 250px;

            border: 1px solid white;
            border-radius: 8px;
            padding: 5px;

            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>


    <script>
        let rand = 0;
        let seconds

        function Start() {
            $('#point2').empty();

            rand = Math.floor(Math.random()*8000)+1000;

            let temp_html1 = `
                <h1 id="temp_id" class="display-6 fw-bold mb-4">${rand}</h1>
            `;
            $('#point').after(temp_html1);

            seconds = 3
            $('#temp1').text(seconds);
            let timer = setInterval(() => {
                seconds--;
                $('#temp1').text(seconds);
                if(seconds===0){
                    $('#temp_id').empty();
                    $('#temp1').empty();
                    clearInterval(timer);
                    seconds = 5;
                }
            }, 1000);
            
        }

        function Check() {

            $('#point2').empty();

            let ck_num = Number($('#ip_num').val());

            console.log(rand);

            if(rand===0 || seconds!==5){
                let temp_html2 = `
                <h4 class="display-10 fw-bold mb-4">게임이 시작되지 않았습니다!</h4>
                `;

                $('#point2').append(temp_html2);
            } else if (rand===ck_num){
                let temp_html2 = `
                <h4 class="display-10 fw-bold mb-4">정답입니다!</h4>
                `;

                $('#point2').append(temp_html2);
            } else if (rand!==ck_num){
                let temp_html2 = `
                <h4 class="display-10 fw-bold mb-4">오답입니다!</h4>
                `;

                $('#point2').append(temp_html2);
            }
            console.log(rand===ck_num);
            console.log(typeof(rand));
            console.log(typeof(ck_num));
        }


    </script>

</head>

<body>
    <div class="mypostingbox">
        <div class="p-3 mb-3 bg-body-tertiary rounded-3">
            <div class="container-fluid py-4">
                <div class="row justify-content-center">
                    <div class="col-10">
                        <h2 id="point" class="fw-bold mb-4 offset-mb-3">숫자 기억 게임</h2>
                    </div>
                    <div class="col-1">
                        <span id="temp1"></span>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input id="ip_num" type="text" class=" form-control rounded-1" placeholder="숫자를 입력하세요" aria-label="숫자를 입력하세요" aria-describedby="button-addon2">
                    <button onclick="Start()" class="btn btn-outline-secondary rounded-1 ms-auto" type="button" id="button-addon1">시작</button>
                    <button onclick="Check()" class="btn btn-outline-secondary rounded-1 ms-auto" type="button" id="button-addon2">제출</button>
                </div>
                <div id="point2">
                </div>
            </div>
        </div>
    </div>
</body>

</html>