728x90
반응형
✅오늘의 과제
➰ style 변경 기능을 통해 다양한 디자인 적용하기
➰코드
day12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day12</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" maxlength="2" size="1">도씨
</div>
<div>
<button type="button" id="degree" onclick="input_check()">알아보기</button>
</div>
<script src="day12.js"></script>
</body>
</html>
day12.js
function input_check() {
let default_text = document.getElementById("cloth");
let default_background = document.getElementById("body");
let val = document.getElementById("input_text").value;
if (val <= 4) {
console.log("패딩, 두꺼운코드, 목도리, 기모제품");
default_background.style.backgroundColor = "white";
default_text.innerHTML = "겨울이야." + "</br>" + "따뜻하게 입어 !";
} else if (5 <= val && val <= 8) {
console.log("코트, 가죽자켓, 니트, 레깅스");
default_background.style.backgroundColor = "white";
default_text.innerHTML = "겨울이야." + "</br>" + " 따뜻하게 입어 !";
} else if (9 <= val && val <= 11) {
default_background.style.backgroundColor = "saddlebrown";
console.log("자켓, 트렌치코트, 니트, 청바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + " 날씨 좋다 !";
default_text.style.color = "white";
} else if (12 <= val && val <= 16) {
default_background.style.backgroundColor = "saddlebrown";
console.log("자켓, 가디건, 야상, 청바지, 면바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + " 날씨 좋다 !";
default_text.style.color = "white";
} else if (17 <= val && val <= 19) {
default_background.style.backgroundColor = "gold";
console.log("얇은니트, 맨투맨, 가디건, 청바지, 면바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + " 날씨 좋다 !";
default_text.style.color = "white";
} else if (20 <= val && val <= 22) {
default_background.style.backgroundColor = "gold";
console.log("얇은가디건, 긴팔, 청바지, 면바지");
default_text.innerHTML = "봄, 가을이야." + "</br>" + " 날씨 좋다 !";
default_text.style.color = "white";
} else if (23 <= val && val <= 27) {
default_background.style.backgroundColor = "green";
console.log("반팔, 얇은셔츠, 반바지, 면바지");
default_text.innerHTML = "여름이야." + "</br>" + " 어우 더워 !";
default_text.style.color = "white";
} else {
default_background.style.backgroundColor = "green";
console.log("민소매, 반팔, 반바지, 원피스");
default_text.innerHTML = "여름이야." + "</br>" + " 어우 더워 !";
default_text.style.color = "white";
}
}
코드 설명
화면 상단에 위치한 div 태그 안에 있는 p 태그의 id를 cloth라고 하고, body 태그의 id를 body, input 태그의 id를 input_text라고 했다. 각각을 선택해 변수 default_text, default_background, val에 담았다.
겨울에 해당하는 온도 범위의 구간에는 배경색을 흰색, 글씨색을 검정색으로, 가을에 해당하는 온도 범위의 구간에는 배경색을 갈색, 글씨색을 흰색으로, 여름에 해당하는 온도 범위의 구간에는 배경색을 초록색, 글씨색을 흰색으로, 봄에 해당하는 온도 범위의 구간에는 배경색을 노란색, 글씨색을 흰색으로 바꿔주었다.
또 각각의 계절에 해당하는 구간마다 default_text의 innerHTML값을 바꿔주어 다른 문자열을 출력하게 했다.
➰코드실행화면(jsday12.netlify.app)
➰GitHub
https://github.com/minseon6371/javascript-study/tree/main/day12
GitHub - minseon6371/javascript-study
Contribute to minseon6371/javascript-study development by creating an account on GitHub.
github.com
728x90
반응형
'WEB > JS' 카테고리의 다른 글
| [JS] 14-1. CDN 사용법 (2) | 2021.10.01 |
|---|---|
| [JS] 13. 과제 - 챗봇 만들기 3일차 (태그 제어 → 값 변경 및 버튼 이벤트 생성) (2) | 2021.09.29 |
| [JS] 11. 과제 - 챗봇 만들기 1일차(조건문 → 값 전달) (0) | 2021.09.29 |
| [JS] 10-2. 과제 - 이벤트 (0) | 2021.09.29 |
| [JS] 10-1. 이벤트 (0) | 2021.09.29 |
