[생활코딩] JavaScript 12. 웹사이트 만들기 (야간모드 추가)

1. 아이디어

 
헤드라인 밑에 버튼을 만듭니다.
누르면 night 모드랑 day 모드가 번갈아서 나옵니다.

 
* 버튼 기능

	night 모드	day 모드
하이퍼링크 색	파우더블루	블루
배경색	블랙	화이트
글씨색	화이트	블랙

 

제작 : 2023. 8. 1 (github 이전)

 
 

2. 구조

스타듀밸리 치트 (index.html)
1. 호감도 치트 (1.html)
2. 돈 치트 (2.html)
3. 능력 치트 (3.html)
 
디자인 담당 (style.css)
- link 태그로 배포
버튼 기능 구현 (colors.js)
- script 태그로 배포 (JQuery 기능도 사용)
 
 
 

3. 코드 살펴보기

1. html 파일 변경사항

- script 태그 : 첫 번째는 JQuery, 두 번째는 JS 파일
- input 태그 : 버튼 삽입
 
 

2. colors.js

1) 변수 Links (객체)
- 함수 setColor 정의
2) 변수 Body (객체)
- 함수 setColor, setBackgroundColor 정의
 

3) 함수 nightDayHandler
- 조건문 이용 (if, else)
 
(1) night 값
- 배경색 검정, 글씨색 흰색
- 값 day로
- 링크색 파우더블루
 
(2) day 값
- 배경색 흰색, 글씨색 검정
- 값 night로
- 링크색 블루
 
 
 

4. 결과물

1. 링크

https://cejinn.github.io/stardew_wiki_v3/

Stardew Valley

 

- github 웹호스팅까지 완료
 
 

2. 페이지별로 살펴보기

	night 모드	day 모드
index.html
1.html
2.html
3.html