[JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성)

✅오늘의 과제

728x90

✅오늘의 과제

➰나만의 챗봇 만들기

➰코드

day13.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day13</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>
</head>
<body id="body">
    <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="day13.js"></script>
</body>
</html>

day13.js

let count = 0;

function input_check() {
    let default_text = document.getElementById("cloth");
    let default_background = document.getElementById("body");
    let val = document.getElementById("input_text").value;
    console.log(val);
    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 태그 안에 있는 p 태그의 id를 cloth라고 하고, body 태그의 id를 body, input 태그의 id를 input_text라고 했다. 각각을 선택해 변수 default_text, default_background, val에 담았다. 함수가 몇 번 실행되었는지 계산하기 위해 사용할 변수 count를 선언했다.

input_check() 함수에서는 겨울에 해당하는 온도 범위의 구간에는 배경색을 흰색, 글씨색을 검정색으로, 가을에 해당하는 온도 범위의 구간에는 배경색을 갈색, 글씨색을 흰색으로, 여름에 해당하는 온도 범위의 구간에는 배경색을 초록색, 글씨색을 흰색으로, 봄에 해당하는 온도 범위의 구간에는 배경색을 노란색, 글씨색을 흰색으로 바꿔주었다. 또 각각의 계절에 해당하는 구간마다 default_text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 했다. 실행문이 한 번 실행될 때마다 count값이 1씩 증가하게 했다.

count_check() 함수에서는 화면 상단에 위치한 div 태그 안에 있는 p 태그의 id를 cloth라고 하고 변수 text에 담았다. 그리고 위에서 선언되고 변하는 count값에 따라 text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 했다.

➰코드실행화면(jsday13.netlify.app)

➰GitHub

https://github.com/minseon6371/javascript-study/tree/main/day13

GitHub - minseon6371/javascript-study

Contribute to minseon6371/javascript-study development by creating an account on GitHub.

github.com

728x90

'WEB > JS' 카테고리의 다른 글

[JS] 14-2. 과제 - CDN 사용법 (2)	2021.10.01
[JS] 14-1. CDN 사용법 (2)	2021.10.01
[JS] 12. 과제 - 챗봇 만들기 2일차(태그 제어 → 배경색 변경) (0)	2021.09.29
[JS] 11. 과제 - 챗봇 만들기 1일차(조건문 → 값 전달) (0)	2021.09.29
[JS] 10-2. 과제 - 이벤트 (0)	2021.09.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성)

✅오늘의 과제

➰나만의 챗봇 만들기

➰코드

➰코드실행화면(jsday13.netlify.app)

➰GitHub

'WEB > JS' 카테고리의 다른 글

✅오늘의 과제

➰나만의 챗봇 만들기

➰코드

➰코드실행화면(jsday13.netlify.app)

➰GitHub

'WEB > JS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역