728x90
반응형
✅오늘의 과제
➰사용자의 입력을 받아 특정 텍스트가 들어왔을 때, 자신이 출력하거나 바꾸고 싶은 요소들을 console.log()로 출력하기
➰코드
day11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day11</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>
<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" maxlength="2" size="1">도씨
</div>
<div>
<button type="button" id="degree" onclick="input_check()">알아보기</button>
</div>
<script src="day11.js"></script>
</body>
</html>
day11.js
function input_check() {
let val = document.getElementById("input_text").value;
if (val <= 4) {
console.log("패딩, 두꺼운코드, 목도리, 기모제품");
} else if (5 <= val && val <= 8) {
console.log("코트, 가죽자켓, 니트, 레깅스");
} else if (9 <= val && val <= 11) {
console.log("자켓, 트렌치코트, 니트, 청바지");
} else if (12 <= val && val <= 16) {
console.log("자켓, 가디건, 야상, 청바지, 면바지");
} else if (17 <= val && val <= 19) {
console.log("얇은니트, 맨투맨, 가디건, 청바지, 면바지");
} else if (20 <= val && val <= 22) {
console.log("얇은가디건, 긴팔, 청바지, 면바지");
} else if (23 <= val && val <= 27) {
console.log("반팔, 얇은셔츠, 반바지, 면바지");
} else {
console.log("민소매, 반팔, 반바지, 원피스");
}
}
코드 설명
input 태그의 값을 변수 val에 담아두었다. id가 degree인 버튼을 누르면 input_check() 함수를 실행한다. input_check() 함수는 val값이 어떤 구간이 해당되는지 판단하여 해당되는 구간에 있는 문자열을 console창에 출력한다.
➰코드실행화면(jsday11.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day11
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
728x90
반응형
'WEB > JS' 카테고리의 다른 글
| [JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성) (2) | 2021.09.29 |
|---|---|
| [JS] 12. 과제 - 챗봇 만들기 2일차(태그 제어 → 배경색 변경) (0) | 2021.09.29 |
| [JS] 10-2. 과제 - 이벤트 (0) | 2021.09.29 |
| [JS] 10-1. 이벤트 (0) | 2021.09.29 |
| [JS] 9-2. 과제 - 객체 (0) | 2021.09.29 |
