고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
⏹ 기존 기능
- 버튼을 누르면 배경과 폰트 색이 다크 모드, 라이트 모드로 변경된다.
⏭ 추가된 기능
- 배경이 라이트 모드이면, 검정색 버튼이고 Dark가 텍스트로 써있다.
- 배경이 다크 모드이면, 흰색 버튼이고 Light가 텍스트로 써있다.
📝 코드에서 변경된 부분
- Bootstrap과 jQuery 사용에 필요한 파일들을 로컬에 설치해서 불러오는 방식으로 했는데, 링크로 가져오는 방식으로 변경했다.
- DOM이 로드되길 기다렸다가 코드를 실행하도록 하는 부분을, 더 축약해서 표현했다.
- class 이름을 'btn btn-dark'와 'btn btn-light'가 toggle되도록 구현해야 하는데, toggleClass를 사용해서 인수로 'btn btn-dark'를 주면, toggleClass가 해당 요소를 추가했다가 삭제하는 함수이기 때문에 'btn btn-dark'가 아닐 때는 원하는 'btn btn-light' 클래스가 나오지 않았다.
- 따라서 toggleClass()가 더 간단하지만, 기존의 removeClass()로 클래스를 삭제 후 addClass()로 추가하는 방식을 가져간다.
- 조건문을 없애고, 현재의 클래스 이름을 가져와서 name에 저장하고, reverse 변수에는 name과 다른 'btn btn-light'나 'btn btn-dark'로 값을 준다. 그럼 현재 클래스 이름인 name을 removeClass() 인수로 주고, addClass()로 reverse 변수를 주면 코드가 훨씬 간단해 진다.
- 텍스트를 변경하지 못했던 부분도 해결했다. 위의 말했던 방법을 통해 고안했는데, text()로 아이디가 dnn인 요소의 텍스트를 변경할 때 reverse 값이 'btn btn-dark'이면 Dark, 'btn btn-light'이면 Light이면 된다.
- 삼항 연산자를 사용해서 reverse 값을 할당하고, 텍스트 값을 바꿔줬다.
💻 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>KOHARIN</title>
<style>
.dark{
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>🌞Day and 🌙Night Mode</h2><br>
<h4>Which color? Black or White??</h4>
<p>
<button type="button" class="btn btn-dark" id="dnn">Night</button>
<label>👈 click button to change mode.</label>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#dnn').on('click', function(e){
$('body').toggleClass('dark'); // toggleClass: body 요소에 dark 클래스가 있으면 추가, 없으면 제거한다.
//$('button').toggleClass('btn btn-dark');
var name = $('#dnn').attr('class');
var reverse = (name === 'btn btn-dark' ? 'btn btn-light' : 'btn btn-dark');
$('#dnn').removeClass(name).addClass(reverse);
$('#dnn').text(
reverse === "btn btn-dark" ? "Night" : "Day");
});
});
</script>
</body>
</html>
🖨 결과
❓ 앞으로 추가할 기능?
생각해보자. 🤔🤔
생각 후 기능을 추가하여 점점 개선시킬 예정이다.
728x90
반응형
'PROGRAMMING > Web' 카테고리의 다른 글
| Fetch API 통한 Ajax 구현 #1 (0) | 2021.02.24 |
|---|---|
| jQuery #2 : jQuery & Ajax (XMLHttpRequest) (0) | 2021.02.21 |
| jQuery #1 (0) | 2021.02.18 |
| [Web 개발] Day and Night Mode #1 (jQuery, Bootstrap) (0) | 2021.02.02 |
| [JavaScript] JavaScript #5: 실행 컨텍스트 (0) | 2021.02.01 |
