반응형
✅ 오늘의 문제 풀이 인증
📣 과제에 대한 답안 코드는 <소스코드>를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가)
📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁
불 좀 꺼줄래도 재미로 넣어봤습니다
Day11.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Day11</title>
<link rel="stylesheet" href="./Day11.css">
</head>
<body>
<div class="layout">
<div class="cat_says">
냐옹~
</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;">
</div>
<input class="input_layout" type="text">
<div class="btn">시키기</div>
<div class="stopBtn">불 켜줘</div>
</div>
<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="./Day11.js"></script>
</body>
</html>
Day11.css
.layout {
width: 100vw;
height: 100vh;
padding-top: 50px;
}
@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;
}
.cat_says {
width: 700px;
height: 300px;
text-align: center;
line-height: 300px;
margin-left: auto; margin-right: auto;
border-radius: 7px;
border: solid 3px #000000;
font-size: 30px;
font-family: "MaruBuri-Regular";
}
.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: left;
cursor: pointer;
}
@-webkit-keyframes blink {
0% { color: yellow; }
33% { color: red; }
66% { color: blue; }
100% { color: white; }
}
Day11.js
$('.btn').on('click', answer);
$('.input_layout').on('keydown', function(key){
if (key.keyCode == 13) { // keyCode 13번은 엔터키
answer();
}
});
$('.stopBtn').on('click', stop);
var answers = {
'안녕': "반갑다~~옹~",
'심심해': "코딩 해라옹~",
'뭐해': "창 밖 구경한다옹~",
'공부': "힘내라옹 다 잘될거라옹~!",
'불 좀 꺼줄래?': "♩ ♪ ♫ ♬"
}
function answer() {
var inputText = $('.input_layout').val();
console.log(inputText);
for (i in answers) {
if (inputText.includes(i)) {
if (i == '공부') {
$('.cat_says').text(answers[i]);
alert("주의! 지금 공부하지 않으면 10년 뒤가 힘듭니다.")
} else if (i == '불 좀 꺼줄래?') {
$('.cat_says').text(answers[i]);
$('.cat1').hide();
$('.cat2').show();
$('.cat_says_form').hide();
$('.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').show();
} else {
$('.cat_says').text(answers[i]);
}
break;
}
}
$('.input_layout').val('');
}
function stop() {
$('.cat_says').text("냐옹~");
$('.cat1').show();
$('.cat2').hide();
$('.cat_says_form').show();
$('.cat_says').css('color', 'black');
$('.cat_says').css('-webkit-animation', '');
$('.layout').css('background-color', 'white');
$('.cat').css('margin-top', '');
$('.stopBtn').hide();
}
엔터키의 키 코드가 13번인 것을 알게되었네요 ㅋㅋㅋ
계속 answer이 function이 아니라는 오류가 떠서 디버그해보니 answer함수안에 answer이라는 변수를 만들어서 그랬네요.. 이름을 i로 바꿔준 뒤 잘 작동했습니다.
앞으로 같은 이름은 절대 쓰지 않는 것으로..!
✅ 오늘의 한마디
👉 할 것도 많은데 모각코 과제 한번 시작하면 시간가는 줄 모르고 하게되네요 오늘도 재밌게 과제하고 갑니다!
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [코뮤니티] 13일차 - 한 입 웹개발(JS) (0) | 2021.05.18 |
|---|---|
| [코뮤니티] 12일차 - 한 입 웹개발(JS) (1) | 2021.05.15 |
| [코뮤니티] 10일차 - 한 입 웹개발(JS) (0) | 2021.05.12 |
| [코뮤니티] 9일차 - 한 입 웹개발(JS) (0) | 2021.05.12 |
| [코뮤니티] 8일차 - 한 입 웹개발(JS) (2) | 2021.05.11 |