슬기로운 AI생활 - 집요한 PM 에릭

띵동코딩 11주차 개발 일지 : jquery와 Javascript 본문

코딩공부

띵동코딩 11주차 개발 일지 : jquery와 Javascript

집요한 기획자 에릭 2022. 8. 20. 12:12
> 1. 이번 주 느낀 점

자바스크립트를 좀 더 쉽게 활용할 수 있는 jquery에 대해 배웠다.

그런데  jquery와 javascript를 함께 활용하다 보니 슬슬 헷갈리는 부분들이 나오기 시작했다.

그리고 #, 대/소문자와 같은 작은 실수에도 코드가 돌아가지 않는 일들이 있는 것을 보면서

작은 디테일도 놓치지 않고, 나만의 변수 선언법을 확실하게 일관적으로 유지해야 할 것 같다고 느꼈다.

 

그래도 겉모습만 존재하던 웹이 움직이기 시작하는 것을 보니까 너무 재밌었다.

역시 프론트엔드는 바로바로 보이는 점이 나름의 성취감을 주는 것 같다.

 
> 2. 이번 주에 어떤 내용을 배웠나요?
jquery의 사용법과 함수 사용법, 그리고 해당 사용법을 통해 로그인하며 움직이는 로그인 페이지를 만들었다.
 
file:///C:/Users/Sangmyung%20Hong/Desktop/%EB%9D%B5%EB%8F%99%EC%BD%94%EB%94%A9/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/jquery01.html
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩 - 로그인</title>
    <style>
        * {
            font-family: "Pretendard",serif;
        }
        .wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            width: 300px;
            margin: 70px auto auto auto;
            padding: 80px 50px 50px 50px;

            border: 1px solid lightgray;
            border-radius: 8px;
        }
        .wrap > img {
            width: 90px;
            height: 46px;
            margin-bottom: 30px;

            margin-right: auto;
        }
        .wrap > p {
            font-size: 24px;
            color: #26343d;

            margin-right: auto;
            line-height: 1.5;

            margin-top: 10px;
        }
        .wrap > button {
            width: 320px;
            height: 60px;
            border-radius: 8px;
            border: none;
            background-color: #ffe237;
            cursor: pointer;
            color: #1c1d1e;
            font-size: 16px;
            font-weight: bold;

            margin-top: 50px;
            margin-bottom: 25px;
        }
        .wrap > span {
            color: #26343d;
            font-size: 14px;
            cursor: pointer;
        }
        .email {
            display: none;
        }

        .email > p {
            margin-right: auto;
            font-weight: bold;
        }

        .email > input {
            width: 292px;
            height: 20px;
            font-size: 16px;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid rgb(219, 221, 224);
        }

        .email > button {
            width: 320px;
            height: 60px;
            background-color: lightgray;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            border: none;
            margin-top: 60px;
            margin-bottom: 30px;
            color: white;

            margin-top: 20px;
            margin-bottom: 20px;

                        background-color: black;
            color: white;
        }

        .email > span {
            font-size: 14px;
            color: rgb(38, 52, 61);

            display: block;
            text-align: center;
        }
    </style>
    <script>
        function openEmail(){
            $('#emailBox').show();
        }

        function login() {
            let email = $('#emailLogin').val();
            if(email == ''){
                alert('이메일을 입력해주세요')
            } else{
                if (email.includes('@')==true) {
                    $('#btnLogin').text('로그인 중입니다..')
                    $('#btnLogin').css('background-color','gray')
                    $('#emailLogin').hide();
                } else{
                    alert('이메일 형식이 아닙니다')
                }
            }
        }

    </script>
</head>
<body>
    <div class="wrap">
        <p>
            매주 월요일,<br/>
            내 강의실에 찾아오는<br/>
            코딩 학습지
        </p>
        <button>카카오로 1초만에 시작하기</button>
        <span onclick="openEmail()">이메일로 시작하기</span>
        <div id ="emailBox" class="email">
            <p>이메일</p>
            <input id ="emailLogin" type="text" placeholder="이메일 주소를 입력해주세요">
            <button id = "btnLogin"onclick="login()" >로그인하기</button>
            <span>이메일이 기억나지 않아요.</span>
        </div>
    </div>
</body>
</html>
 
>

 

 3.이번 주 인증샷!

'코딩공부' 카테고리의 다른 글

띵동코딩 13주차 개발일지 : Fetch 활용하기  (0) 2022.08.30
띵동코딩 12주차 개발일지 : Fetch 사용하기  (0) 2022.08.22
띵동코딩 10주차 개발 일지 : Javascript 복습  (0) 2022.08.08
띵동코딩 9주차 개발 일지 : Javascript 기초  (0) 2022.08.02
띵동코딩 8주차 - 부트스트랩 활용 파타고니아 홈페이지 카피코딩  (0) 2022.07.25
'코딩공부' Related Articles more