✅오늘의 과제
➰챗봇에 유동적인 기능 추가하기
➰코드
day15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day15</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="day15.js"></script>
</body>
</html>
day15.js
let count= 0;
let topText1;
let topText2;
let default_background = document.getElementById("body");
let context = document.getElementById("context");
let default_text = document.getElementById("cloth");
// let val = document.getElementById("input_text").value;
let text_set = ["겨울이에요" + "</br>" + "따뜻하게 입으세요 !", "봄, 가을이에요" + "</br>" + "날씨 좋아요 !",
"봄, 가을이에요" + "</br>" + "날씨 좋아요 !", "여름이에요" + "</br>" + "어우 더워요 !",
"오늘 기온이" + "</br>" + "여러번 바뀌나요 ?", "잘못 누르셨나요 ?",
"위의 문장" + "</br>" + "바꿔드릴까요 ?", "첫번째 문장을 입력해주세요",
"프로그램을" + "</br>" + "종료합니다.", "두번째 문장을 입력해주세요",
"문장을 바꿨어요 !"];
let season_back_color = ["white", "saddlebrown", "gold", "green"];
let season_text_color = ["black", "white", "white", "white"];
let json = [{ topText1 : '오늘의 기온을 적어주세요', topText2 : '기온에 맞는 옷차림을 알려드릴게요'}];
function text_change(n) { default_text.innerHTML = text_set[n]; }
function typing(n) {
let typewriter = new Typewriter(context, { loop: true });
typewriter.typeString(json[n].topText1)
.pauseFor(2500)
.deleteAll()
.typeString(json[n].topText2)
.pauseFor(2500)
.start();
}
function push_json() { json.push({topText1: `${topText1}`, topText2: `${topText2}`}); }
function season(n) {
count++;
default_text.innerHTML = text_set[n];
default_background.style.backgroundColor = season_back_color[n];
default_text.style.color = season_text_color[n];
count_check();
}
function input_check() {
let val = document.getElementById("input_text").value;
if (val === "나 뭐입지?") {
typing(0);
}
if (val <= 4) { console.log("패딩, 두꺼운코드, 목도리, 기모제품"); season(0); }
else if (5 <= val && val <= 8) { console.log("코트, 가죽자켓, 니트, 레깅스"); season(0); }
else if (9 <= val && val <= 11) { console.log("자켓, 트렌치코트, 니트, 청바지"); season(1); }
else if (12 <= val && val <= 16) { console.log("자켓, 가디건, 야상, 청바지, 면바지"); season(1); }
else if (17 <= val && val <= 19) { console.log("얇은니트, 맨투맨, 가디건, 청바지, 면바지"); season(2); }
else if (20 <= val && val <= 22) { console.log("얇은가디건, 긴팔, 청바지, 면바지"); season(2); }
else if (23 <= val && val <= 27) { console.log("반팔, 얇은셔츠, 반바지, 면바지"); season(3); }
else if (28 <= val && val <= 40) { console.log("민소매, 반팔, 반바지, 원피스"); season(3); }
else { count++; count_check(); }
}
function count_check() {
let val = document.getElementById("input_text").value;
if (count === 7) { text_change(4); }
else if (count === 8) { text_change(5); }
else if (count === 9) { text_change(6); }
else if (count === 10) {
if (val === "응") { text_change(7); }
else { text_change(8); return; }
}
else if (count === 11) { topText1 = val; text_change(9); }
else if (count === 12) {
topText2 = val; push_json(); typing(1); text_change(10);
default_background.style.backgroundColor = "antiquewhite";
}
else { return; }
}
코드 설명
화면 최상단에 div태그의 id를 context, 화면 상단에 위치한 div 태그 안에 있는 p 태그의 id를 cloth라고 하고, body 태그의 id를 body, input 태그의 id를 input_text라고 했다. 각각을 선택해 변수 context, default_text, default_background, val에 담았다. 함수가 몇 번 실행되었는지 계산하기 위해 사용할 변수 count를 선언했다. 변수 json에 객체 형태로 들어가는 변수 topText1, topText2도 선언했다.
input_check() 함수에서는 input 태그에 "나 뭐입지?"라는 문자열을 입력하면 CDN을 이용하여 다운로드한 타이핑 애니메이션을 구현한 js파일을 사용하여 두 문장을 타이핑하고 지우는 것을 반복한다.
겨울에 해당하는 온도 범위의 구간에는 배경색을 흰색, 글씨색을 검정색으로, 가을에 해당하는 온도 범위의 구간에는 배경색을 갈색, 글씨색을 흰색으로, 여름에 해당하는 온도 범위의 구간에는 배경색을 초록색, 글씨색을 흰색으로, 봄에 해당하는 온도 범위의 구간에는 배경색을 노란색, 글씨색을 흰색으로 바꿔주었다. 또 각각의 계절에 해당하는 구간마다 default_text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 했다. 실행문이 한 번 실행될 때마다 count값이 1씩 증가하게 했다.
위의 코드를 간단하게 줄이기 위해 변수 text_set을 리스트 안에 문자를 담은 후 선언하고, 변수 season_back_color, season_text_color에 문자열 형태로 색깔을 리스트에 담아주었다. 또한 타이핑 애니메이션 코드는 typing() 함수 안에 넣었다. 마지막으로 모든 구간에서 실행되는 동작을 season() 함수에 담았다.
count_check() 함수에서는 input 태그의 id를 input_text라고 하고 변수 val에 담았다. 그리고 위에서 선언되고 변하는 count값에 따라 text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 하는 text_change() 함수를 넣어주었다. 변수 count의 값이 10이 되면 변수 val의 값이 "응" 확인하고 맞으면 첫 번째 문자열과 두 번째 문자열을 입력받아 push_json() 함수로 변수 json의 다음 원소로 추가해주었다. 또한 typing() 함수, text_change() 함수를 실행하고, body태그의 back ground color를 바꿔주었다. count의 값이 10일 때 변수 val의 값이 "응"이 아니면 "프로그램을 종료합니다"라는 문자열을 띄워주고 return 하게 했다.
💨let val = document.getElementById("input_text").value; 코드를 전역 변수로 선언하면 값을 읽어오지 못하는 현상이 발생하는데 이는 추후에 수정할 것이다.
➰코드실행화면(jsday15.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day15
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
'WEB > JS' 카테고리의 다른 글
| [JS] 15-1. 챗봇 유동적인 기능 만들기 (json parsing) (0) | 2021.10.02 |
|---|---|
| [JS] 14-2. 과제 - CDN 사용법 (2) | 2021.10.01 |
| [JS] 14-1. CDN 사용법 (2) | 2021.10.01 |
| [JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성) (2) | 2021.09.29 |
| [JS] 12. 과제 - 챗봇 만들기 2일차(태그 제어 → 배경색 변경) (0) | 2021.09.29 |
