반응형
HTML, CSS, JS로 간단한 카운터 앱을 만들어 봅니다.
https://www.youtube.com/watch?v=IuhVaYeNCsE
프로젝트 개요
- 프로젝트 이름: Couter App
- 프로젝트 설명: 간단한 웹 카운터 앱으로 사용자가 숫자를 증가 감소 초기화 할수 있습니다.
- 프로젝트 목표: 기본적인 DOM 조작을 연습하고 사용자 이벤트 처리 및 UI 업데이트 학습
- 프로젝트 기능: 카운터 표시, 증가기능, 감소 버튼, 초기화 버튼
프로젝트 구조
Counter-App/
├── index.html
├── style.css
└── app.js
코드
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Counter App</title>
</head>
<body>
<div class="counter-container">
<h1 id="display">0</h1>
<button id="increment">증가</button>
<button id="decrement">감소</button>
<button id="reset">리셋</button>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
background-color: #f0f0f0;
justify-content: center;
align-items: center;
}
.counter-container {
background-color: white;
padding: 20px 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.counter-container h1 {
margin-bottom: 10px;
text-align: center;
}
button {
padding: 8px;
border: none;
background-color: #f0f0f0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
transition: background-color 0.3s ease;
font-size: 0.7rem;
margin: 0 5px;
}
button:hover {
cursor: pointer;
background-color: #e0e0e0;
}
JS
document.addEventListener('DOMContentLoaded', () => {
const counterDisplay = document.getElementById('display');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');
const resetButton = document.getElementById('reset')
let counter = 0;
function updateDisplay() {
counterDisplay.textContent = counter;
}
incrementButton.addEventListener('click', () => {
counter++;
updateDisplay();
})
decrementButton.addEventListener('click', () => {
if (counter > 0) {
counter--;
updateDisplay();
}
})
resetButton.addEventListener('click', () => {
counter = 0;
updateDisplay();
})
})
https://idocleancode.tistory.com/424
[JavaScript] 학습 로드맵
소개자바스크립트란?자바스크립트 역사자바스크립트 실행 방법변수변수의 선언호이스팅네이밍 규칙스코프데이터 타입string 참고 자료https://roadmap.sh/javascript JavaScript Developer Roadmap: Step by step
idocleancode.tistory.com
반응형
'Tutorials > JavaScript' 카테고리의 다른 글
| [Valilla JS Programming] Color Changer App (0) | 2024.10.19 |
|---|---|
| [JavaScript] null (1) | 2024.10.18 |
| [JavaScript] undefined (0) | 2024.10.18 |
| [JavaScript] Boolean (0) | 2024.10.18 |
| [JavaScript] Number (0) | 2024.10.06 |
