-
[바닐라 JS] 카운터 프로젝트 제작웹/포토폴리오 2023. 1. 18. 23:47
2023.1.18(수)
- html
- css
- javascript
- 블로그
- github코드
GitHub - JudithHopps/Vanilla-JS: 바닐라 자바스크립트로 작성한 토이 프로젝트 모음집입니다. (리뷰)
바닐라 자바스크립트로 작성한 토이 프로젝트 모음집입니다. (리뷰). Contribute to JudithHopps/Vanilla-JS development by creating an account on GitHub.
github.com
전체 구조
1. html
a. head
- style,javascript,view타입 설정
b. body
- title, num, btn 구조로 되어 있음
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Counter</title> <!-- style --> <link rel="stylesheet" href="./style.css" /> <!-- javascript --> <script defer src="script.js"></script> </head> <body> <main> <h1 id="title">Counter</h1> <p id ="num">0</p> <div class="btn"> <button class="btn_decrease">DECREASE</button> <button class="btn_reset">RESET</button> <button class="btn_increase">INCREASE</button> </div> </main> </body> </html>전체 구조
2. css
a. 폰트
- 구글 웹 폰트 이용
b. 리셋 구간
- body,h1,p 태그 초기 설정 초기화
c. main
- display:flex로 설정하고 #num에서 flex-grow:1로 설정함.
d. button
- -webkit-text-stroke을 이용해 텍스트 테두리 설정함.
/* 폰트 */ @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap'); /* ===== 리셋 구간 ===== */ body,h1,p{ margin:0; padding:0; } /* ===== 메인 구간 ===== */ main{ display: flex; flex-direction: column; text-align: center; /* 개발용 설정 */ min-height: 50vh; min-width: 30vw; } /* title */ #title{ font-size: 4em; font-weight:300; margin-top : 3em; color: white; -webkit-text-stroke: 1px skyblue; } /* 숫자 */ #num{ font-size: 8em; flex-grow: 1; margin-bottom: 0.3em; } button{ background:transparent; color: white; width:8em; height: 2em; -webkit-text-stroke: 1px skyblue; font-size: 1em; border-radius: 4em; border: 1px solid skyblue; transition:all 0.4s } button:hover{ background:skyblue; -webkit-text-stroke: 1px white; }전체 구조
3. javascript
a. count 초기 설정
b. Dom
- 숫자와 버튼 변수 설정
c. 버튼 이벤트
- addEventListener로 각각 이벤트 설정
d. num 색상
- count가 양수면 num.style.color ="green";
- count가 음수면 num.style.color ="red";
- count가 0이면 num.style.color = "black";
// count 초기 설정 let count = 0; // select dom const num = document.getElementById("num"); const btn_decrease = document.querySelector(".btn_decrease"); const btn_reset = document.querySelector(".btn_reset"); const btn_increase = document.querySelector(".btn_increase"); // 버튼 이벤트 btn_decrease.addEventListener("click",function () { count--; num.textContent = count>0 ? "+" + count : count; colorChange() }); btn_reset.addEventListener("click",function () { count = 0; num.textContent = count; colorChange() }); btn_increase.addEventListener("click",function () { count++; num.textContent = count>0 ? "+" + count : count; colorChange(count) }); // 음수 양수 css 전환 function colorChange() { if (count < 0) num.style.color ="red" if (count > 0) num.style.color ="green"; if (count == 0) num.style.color = "black"; }완성
Counter
Counter 0 DECREASE RESET INCREASE
subtle-zuccutto-5a225d.netlify.app
'웹 > 포토폴리오' 카테고리의 다른 글
[바닐라 JS] FAQ 사이트 제작하기 - 0. js 헤멤 (0) 2023.01.19 [바닐라 JS] 책 평가하는 사이트 제작하기 - 2 (0) 2023.01.17 [바닐라 JS] 책 평가하는 사이트 제작하기 - 1 (0) 2023.01.16 [2023년 로드맵] 2023년 목표 (1) 2023.01.08