Front-End/JavaScript

[코뮤니티] 15일차 - 한 입 웹개발(JS)

koh1018 2021. 5. 27. 18:09
반응형

 

✅ 오늘의 문제 풀이 인증

📣 과제에 대한 답안 코드는 <소스코드>를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가)

📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁

 

 

새로 말을 배울 수 있도록 해봤습니다!!

 

 

Day15.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Day15</title>

    <link rel="stylesheet" href="./Day15.css">
</head>
<body>
    <div class="layout">
        <div id="notice"></div>
        <div class="cat_says">
            냐옹~
            <img class="jokeFire" src="./img/fire.png" alt="fire" style="display: none;">
        </div>
        <div class="cat_says_form"><img src="./img/cat_say_form.png" alt=""></div>
        <div class="cat">
            <img class="cat1" src="./img/cat1.png" alt="cat">
            <img class="cat2" src="./img/cat2.png" alt="cat" style="display: none;">
            <img class="cat3" src="./img/cat3.png" alt="cat" style="display: none;">
        </div>
        <input class="input_layout" type="text">
        <div class="btn">시키기</div>
        <div class="stopBtn">불 켜줘</div>
    </div>

    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

    <script src="./Day15.js"></script>
</body>
</html>

 

 

 

Day15.css

/*Snow Keyframes*/
@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-color:#b4cfe0;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}


.layout {
    width: 100vw;
    height: 100vh;
    padding-top: 20px;
}

@font-face {
    font-family: "MaruBuri-Regular";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

#notice {
    width: 500px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-left: auto;  margin-right: auto;
    border-radius: 7px;
    border: solid 3px #000000;
    font-size: 20px;
    font-family: "MaruBuri-Regular";
}

.cat_says {
    width: 700px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    margin-top: 20px;  margin-left: auto;  margin-right: auto;
    border-radius: 7px;
    border: solid 3px #000000;
    font-size: 30px;
    font-family: "MaruBuri-Regular";
}

.jokeFire {
    display: block;
    width: 300px;
    height: 300px;
    margin-left: auto;  margin-right: auto;
}

.cat_says_form img {
    display: block;
    width: 550px;
    height: 100px;
    margin-left: auto;  margin-right: auto;
}

.cat {
    width: 100px;
    margin-left: auto;  margin-right: auto;
}
.cat img {
    width: 100px;
    height: 100px;
}

.input_layout {
    display: block;
    width: 312px;
    height: 19px;
    font-size: 16px;
    text-align: left;
    margin-top: 20px; margin-left: auto;  margin-right: auto;
    border: solid 2px #5f9be0;
    border-radius: 3px;
    font-family: "MaruBuri-Regular";
}

.btn {
    width: 180px;
    height: 50px;
    background: #76b3fa;
    border-radius: 100px;
    color: #fff;
    font-size: 1.45em;
    text-align: center;
    line-height: 50px;
    margin-top: 30px; margin-left: auto;  margin-right: auto;
    cursor: pointer;
    font-family: "MaruBuri-Regular";
}

.stopBtn {
    display: none;
    width: 150px;
    height: 40px;
    background: #4f5255;
    border-radius: 50px;
    color: #fff;
    font-size: 1.0em;
    text-align: center;
    line-height: 40px;
    margin-top: 30px;
    float: inline-end;
    cursor: pointer;
}

@-webkit-keyframes blink {
    0% { color: yellow; }
    33% { color: red; }
    66% { color: blue; }
    100% { color: white; }
}

 

 

Day15.js

$('.btn').on('click', answer);
$('.input_layout').on('keydown', function(key){
    if (key.keyCode == 13) {    // keyCode 13번은 엔터키
        answer();
    }
});
$('.stopBtn').on('click', stop);

var app = document.getElementById('notice');
var typewriter = new Typewriter(app, {
    loop: false
});

var json = 
[
    {
        "question" : "안녕",
        "answer" : "반갑다~~옹~"
    },
    {
        "question" : "나이",
        "answer" : "비밀이다 냥!"
    },
    {
        "question" : "이름",
        "answer" : "코묘~~~!"
    },
    {
        "question" : "안녕",
        "answer" : "반갑다~~옹~"
    },
    {
        "question" : "심심",
        "answer" : "코딩 해라옹~"
    },
    {
        "question" : "뭐해",
        "answer" : "창 밖 구경한다옹~"
    },
    {
        "question" : "공부",
        "answer" : "힘내라옹 다 잘될거다 냥~!"
    },
    {
        "question" : "불",
        "answer" : "귀찮다 냥!"
    },
    {
        "question" : "눈",
        "answer" : "눈이 펑펑 온다옹~♩♪"
    },
    {
        "question" : "따라",
        "answer" : "알겠다냥냥 냐냐냐~~옹!"
    }
]

// checker
let lightOffCount = 0;
let lightOnCount = 0;
let follow = false;
let isCommand = false;

// new conversation
var newQuestion = "";   // 사용자의 질문을 임시 저장할 변수
var newAnswer = "";     // 사용자의 대답을 임시 저장할 변수
var learnMode = 0;      // 0 : 말을 배우지 않는 상황, 1 : 모르는 말을 들은 상황, 2 : 말을 배우는 상황


function answer() {
    var inputText = $('.input_layout').val();
    console.log(inputText);

    // 말 배우기 모드인지 판단
    if (learnMode == 1) {
        if (inputText == "네") {
            $('.cat_says').text("대답을 입력해주세요!");
            learnMode = 2;
        } else {
            $('.cat_says').text("담에 배우지옹~!");
            learnMode = 0;
        }
        $('.input_layout').val('');
        return;
    }

    // 말을 배우는 중
    if (learnMode == 2) {
        newAnswer = inputText;
        push_json();
        $('.input_layout').val('');
        return;
    }


    // 따라하기 모드인지 아닌지 판단하는 분기문
    if (follow == true) {
        if (inputText == "그만해! 냥!") {
            follow = false;
            $('.cat2').hide();
            $('.cat1').show();
            $('.cat3').hide();
            $('.cat_says').text("알겠다옹...");
        } else {
            $('.cat_says').text(inputText + " 냥!");
        }
    } else {
        for (let i = 0; i < json.length; i++) {
            if (inputText.includes(json[i].question)) {
                isCommand = true;
                $('.jokeFire').hide();
                $('.cat_says').text(json[i].answer);
            
                switch (json[i].question) {
                    case '공부':
                        alert("주의! 지금 공부하지 않으면 10년 뒤가 힘듭니다.");
                        break;
                    case '불':
                        if (lightOffCount == 0) {
                            // 말 안듣는 고양이
                            lightOffCount++;
                        } else if (lightOffCount == 1) {
                            lightOffCount++;
                            $('.cat_says').text("바쁜 몸이다~옹!!");
                        } else {
                            lightOffCount = 0;
                            $('.cat1').hide();
                            $('.cat3').hide();
                            $('.cat2').show();
                            $('.cat_says_form').hide();
                            $('.cat_says').text("♩ ♪ ♫ ♬");
                            $('.cat_says').css('color', 'white');
                            $('.cat_says').css('-webkit-animation', 'blink 1.0s linear infinite');
                            $('.layout').animate({backgroundColor: 'black'}, 2000);
                            $('.cat').css('margin-top', '100px');
                            $('.stopBtn').text("불 켜줘");
                            $('.stopBtn').show();
                        }
                        break;
                    case '눈':
                        $('.cat1').hide();
                        $('.cat2').hide();
                        $('.cat3').show();
                        $('.cat_says_form').hide();
                        $('.layout').animate({backgroundColor: '#6b92b9'}, 2000);
                        $('.layout').css('background-image', "url('./img/snow.png'), url('./img/snow3.png'), url('./img/snow2.png')");
                        $('.layout').css('-webkit-animation', 'snow 20s linear infinite');
                        $('.layout').css('-moz-animation', 'snow 20s linear infinite');
                        $('.layout').css('-ms-animation', 'snow 20s linear infinite');
                        $('.layout').css('animation', 'snow 20s linear infinite');
                        $('.cat').css('margin-top', '100px');
                        $('.stopBtn').text("눈 멈춰!");
                        $('.stopBtn').show();
                        break;
                    case '따라':
                        if (follow == false) {
                            follow = true;
                            $('.cat1').hide();
                            $('.cat3').hide();
                            $('.cat2').show();
                        }
                        break;
                }
                break;
            }
        }

        // 미리 주어진 명령어인지를 판단하는 분기문
        if (isCommand == false) {
            $('.cat_says').text("무슨 말인지 모르겠다냥~!");
            typewriter.typeString("코묘가 알아듣지 못한 것 같다.")
                .pauseFor(100)
                .deleteAll()
                .start();
            setTimeout(function() {
                $('.cat_says').text("말을 가르쳐 주실래요?(네 or 아니요)");
            }, 2000);
            newQuestion = inputText;
            learnMode = 1;
        } else {
            isCommand = false;
            typewriter.stop();
        }
    }
    $('.input_layout').val('');
}

function push_json() {
    json.push({question : newQuestion, answer : newAnswer});
    $('.cat_says').text("말을 배웠다 냥!");
    learnMode = 0;
}

function stop() {
    if ($('.stopBtn').val() == "불 켜줘" && lightOnCount == 0) {
        $('.jokeFire').show();
    } else {
        $('.jokeFire').hide();
        $('.cat_says').text("냐옹~");
        $('.cat1').show();
        $('.cat2').hide();
        $('.cat3').hide();
        $('.cat_says_form').show();
        $('.cat_says').css('color', 'black');
        $('.cat_says').css('-webkit-animation', '');
        $('.layout').css('background-image', '');
        $('.layout').css('-moz-animation', '');
        $('.layout').css('-ms-animation', '');
        $('.layout').css('animation', '');
        $('.layout').css('background-color', 'white');
        $('.cat').css('margin-top', '');
        $('.stopBtn').hide();
        lightOnCount = 0;
    }
}

기존 코드에 응용해 말을 학습하고 배운 말을 할 수 있도록 만들었습니다!

또 객체를 이용해 대답 말뭉치를 만들었었는데 json으로 바꿨습니다.

 

 

✅ 오늘의 한마디

👉 마지막 한마디네요! 솔직히 가벼운 마음으로 시작한 프로그램이었는데 생각보다 시간도 많이 쓰고 배운 것도 많은 15일이었던 것 같습니다. 무엇보다 제가 성장한게 느껴져서 좋은 것 같아요!

무엇보다도, 조금씩이라도 꾸준히 한다는 것이 얼마나 중요한지 느끼는 시간이었던 것 같아요. 기억에 많이 남는 활동이 될 것 같습니다. 좋은 프로그램 참여하게 해주셔서 감사드리고 앞으로도 더 열심히 해나가겠습니다!!

감사합니다 :)

 

반응형

'Front-End > JavaScript' 카테고리의 다른 글

[모각코 수료증] 한 입 웹개발 (JS) 5월 과정  (0) 2021.06.03
[모각코 수료 후기] 한 입 웹개발 (JS) 5월 과정  (0) 2021.05.27
[코뮤니티] 14일차 - 한 입 웹개발(JS)  (0) 2021.05.27
[코뮤니티] 13일차 - 한 입 웹개발(JS)  (0) 2021.05.18
[코뮤니티] 12일차 - 한 입 웹개발(JS)  (1) 2021.05.15

'Front-End/JavaScript'의 다른글

  • 현재글[코뮤니티] 15일차 - 한 입 웹개발(JS)

관련글

댓글

티스토리툴바