2022. 1. 8. 23:04ㆍ코딩공부/프로젝트 완성본
프로젝트 원본
<body>
<h1>실업급여</h1>
<div>
<input type = "button" value = "night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type = "button" value = "day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
</div>
...onclick 자체에 제이쿼리를 넣어 css를 변경시켜
day 버튼을 누르면 주간모드
night 버튼을 누르면 야간모드가 된다.
개선하고 싶었던 점 :
버튼을 하나로 해서 처음에는 주간모드 상태에서
night 버튼을 누르면 야간모드로 되면서 버튼 이름이 day로 바뀌고
다시 day 버튼을 누르면 주간모드가 되면서 버튼 이름이 night로 바뀌게끔 하고싶었다.
개선 중 검색, 참고한 것 / 어려웠던 점 :
"제이쿼리 토글"을 검색하였으나 원하는 기능이 나오지 않았다. 그래서 직접 짜게 되었는데 일단 버튼에 id를 주고 onclick에 function을 넣는 것부터 시작하였다. 버튼에 day_btn 이라는 id를 주고 script안에 toggle()이라는 function을 주어 버튼의 onclick에도 toggle()을 달아주었다. 전에 했던 나홀로메모장의 포스팅박스 열기/닫기 기능을 응용해서
function openClose() {
if ($("#post-box").css("display") == "block") {
$("#post-box").hide();
$("#btn-post-box").text("포스팅 박스 열기");
} else {
$("#post-box").show();
$("#btn-post-box").text("포스팅 박스 닫기");
}
}조건문을 사용해 만약 버튼의 텍스트가 day면 주간모드가되고 버튼이름을 night로.
아니라면 야간모드에 버튼 이름을 day로 하게끔 만들어 주었다
<script>
function toggle() {
if ($("#day_btn").text() == "day") {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
$("#day_btn").text("night");
} else {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
$("#day_btn").text("day");
}
}
</script>삽질했던 부분은 처음에 function을 줄 때 day() / night() 이렇게 주간 야간 function을 나눠두었는데 if문을 쓰면 어차피 한 function안에서 기능을 묶을 수 있어서 지웠다가 다시했다
결과물 :
느낀점 :
프로젝트가 하나하나 쌓여가면서 혼자 뭔가 만들어내거나 고칠때에도 참 많이 도움이 되는 것 같다.
앞으로도 잘 적어서 남겨둬야겠다!!