728x90
반응형
✅오늘의 과제
➰챗봇에 타이핑 애니메이션 추가하기
➰코드
day14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day14</title>
<style>
@font-face {
font-family: 'yg-jalnan';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
text-align: center;
font-family: 'yg-jalnan'
}
#clothes {
display: inline-block;
width: 500px;
height: 300px;
border-radius: 30px;
border: 10px solid gray;
margin-top: 30px;
}
#cloth {
text-align: center;
margin-top: 100px;
font-size: 50px;
}
#shirt {
margin-top: 30px;
width: 300px;
height: 100px;
border-radius: 10px;
}
#input_layout {
display: inline-block;
margin-top: 30px;
border-radius: 10px;
width: 200px;
height: 50px;
border: 5px solid darksalmon;
text-align: center;
font-size: 30px;
}
#degree {
margin-top: 30px;
width: 400px;
height: 90px;
border-radius: 30px;
font-size: 40px;
background-color: forestgreen;
font-family: 'yg-jalnan';
}
</style>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
</head>
<body id="body">
<div id="context"></div>
<div id="clothes">
<p id="cloth">오늘 옷 뭐입지 ?</p>
</div>
<div>
<img src="./img/shirt-1902601_1920.jpg" id="shirt">
</div>
<div id="input_layout">
<input type="text" id="input_text" size="10">
</div>
<div>
<button type="button" id="degree" onclick="input_check()">알아보기</button>
</div>
<script src="day14.js"></script>
</body>
</html>
day14.js
let count = 0;
function input_check() {
let context = document.getElementById("context");
let default_text = document.getElementById("cloth");
let default_background = document.getElementById("body");
let val = document.getElementById("input_text").value;
if (val === "나 뭐입지?") {
let typewriter = new Typewriter(context, {
loop: true
});
typewriter.typeString('오늘의 기온을 적어주세요')
.pauseFor(2500)
.deleteAll()
.typeString('기온에 맞는 옷차림을 알려드릴게요')
.pauseFor(2500)
.start();
} else if (val <= 4) {
count++;
console.log("패딩, 두꺼운코드, 목도리, 기모제품");
default_background.style.backgroundColor = "white";
default_text.innerHTML = "겨울이야." + "</br>" + "따뜻하게 입어 !";
count_check();
} else if (5 <= val && val <= 8) {
count++;
console.log("코트, 가죽자켓, 니트, 레깅스");
default_background.style.backgroundColor = "white";
default_text.innerHTML = "겨울이야." + "</br>" + "따뜻하게 입어 !";
count_check();
} else if (9 <= val && val <= 11) {
count++;
default_background.style.backgroundColor = "saddlebrown";
console.log("자켓, 트렌치코트, 니트, 청바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + "날씨 좋다 !";
default_text.style.color = "white";
count_check();
} else if (12 <= val && val <= 16) {
count++;
default_background.style.backgroundColor = "saddlebrown";
console.log("자켓, 가디건, 야상, 청바지, 면바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + "날씨 좋다 !";
default_text.style.color = "white";
count_check();
} else if (17 <= val && val <= 19) {
count++;
default_background.style.backgroundColor = "gold";
console.log("얇은니트, 맨투맨, 가디건, 청바지, 면바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + "날씨 좋다 !";
default_text.style.color = "white";
count_check();
} else if (20 <= val && val <= 22) {
count++;
default_background.style.backgroundColor = "gold";
console.log("얇은가디건, 긴팔, 청바지, 면바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + "날씨 좋다 !";
default_text.style.color = "white";
count_check();
} else if (23 <= val && val <= 27) {
count++;
default_background.style.backgroundColor = "green";
console.log("반팔, 얇은셔츠, 반바지, 면바지");
default_text.innerHTML = "여름이야." + "</br>" + "어우 더워 !";
default_text.style.color = "white";
count_check();
} else {
count++;
default_background.style.backgroundColor = "green";
console.log("민소매, 반팔, 반바지, 원피스");
default_text.innerHTML = "여름이야." + "</br>" + "어우 더워 !";
default_text.style.color = "white";
count_check();
}
}
function count_check() {
let text = document.getElementById("cloth");
if (count === 7) {
text.innerHTML = "오늘 기온이" + "</br>" + " 여러번 바뀌나 ?";
} else if (count === 8) {
text.innerHTML = "아무 숫자나" + "</br>" + " 막 누르고 있지 !";
} else if (count === 9) {
text.innerHTML = "잘못 누른건가 ?";
} else if (count >= 10) {
text.innerHTML = "이제 계절" + "</br>" + "안 알려줄 거야!";
}
}
코드 설명
화면 최상단에 div태그의 id를 context, 화면 상단에 위치한 div 태그 안에 있는 p 태그의 id를 cloth라고 하고, body 태그의 id를 body, input 태그의 id를 input_text라고 했다. 각각을 선택해 변수 context, default_text, default_background, val에 담았다. 함수가 몇 번 실행되었는지 계산하기 위해 사용할 변수 count를 선언했다.
input_check() 함수에서는 input태그에 "나 뭐입지?"라는 문자열을 입력하면 CDN을 이용하여 다운받은 타이핑 애니메이션을 구현한 js파일을 사용하여 두 문장을 타이핑하고 지우는 것을 반복한다.
겨울에 해당하는 온도 범위의 구간에는 배경색을 흰색, 글씨색을 검정색으로, 가을에 해당하는 온도 범위의 구간에는 배경색을 갈색, 글씨색을 흰색으로, 여름에 해당하는 온도 범위의 구간에는 배경색을 초록색, 글씨색을 흰색으로, 봄에 해당하는 온도 범위의 구간에는 배경색을 노란색, 글씨색을 흰색으로 바꿔주었다. 또 각각의 계절에 해당하는 구간마다 default_text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 했다. 실행문이 한 번 실행될 때마다 count값이 1씩 증가하게 했다.
count_check() 함수에서는 화면 상단에 위치한 div 태그 안에 있는 p 태그의 id를 cloth라고 하고 변수 text에 담았다. 그리고 위에서 선언되고 변하는 count값에 따라 text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 했다.
➰코드실행화면(jsday14.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day14
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
728x90
반응형
'WEB > JS' 카테고리의 다른 글
| [JS] 15-2. 과제 - 챗봇 유동적인 기능 만들기 (json parsing) (0) | 2021.10.02 |
|---|---|
| [JS] 15-1. 챗봇 유동적인 기능 만들기 (json parsing) (0) | 2021.10.02 |
| [JS] 14-1. CDN 사용법 (2) | 2021.10.01 |
| [JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성) (2) | 2021.09.29 |
| [JS] 12. 과제 - 챗봇 만들기 2일차(태그 제어 → 배경색 변경) (0) | 2021.09.29 |
