JavaScrpit 기초 실습하기 : Counter

이 리포지토리는 JavaScript를 활용하여 기본적인 카운터 기능을 구현하는 예제입니다.
DOM 조작 및 이벤트 핸들링을 통해 JavaScript의 기초를 학습할 수 있습니다.

🎯 목적

• JavaScript 기초 학습 : DOM 조작과 이벤트 핸들링을 이해하고 연습
• 기능 구현 경험 : 간단한 카운터 기능(증가, 감소, 초기화) 구현
• 반응형 UI 설계 : 사용자 친화적인 인터페이스 제공

💡 주요 기능

1. 카운터 증가

• 버튼 클릭 시 카운트가 1씩 증가

2. 카운터 감소

• 버튼 클릭 시 카운트가 1씩 감소

3. 초기화

• 초기화 버튼을 클릭하면 카운트가 0으로 리셋

4. 시각적 피드백

• 카운트 값 변경 시 실시간 화면 반영

🛠️ 기술 스택

• HTML : 기본 구조 정의
• CSS : 디자인 및 스타일링
• JavaScript : 주요 로직 구현 (DOM 조작 및 이벤트 핸들링)

📚 학습 자료

✅ JavaScript 기초 학습 Site : https://ko.javascript.info/

author : PARK INJUNG

📁 파일 구성

1. 폴더 생성

• 해당 실습을 위한 project 폴더 생성

2. 파일 생성

• index.html : HTML Code 작성
• style.css : CSS Style Code 작성
• app.js : JavaScript Code 작성

3. 작성 내용 HTML (index.html)

• 카운터 버튼 및 초기화 버튼의 구조 작성 CSS (style.css)
• UI 스타일 정의 (버튼, 카운트 출력 등) JavaScript (app.js)
• 버튼 클릭 이벤트 및 DOM 조작 로직 구현

🖼️ 실습 완료 스크린샷

1. 초기화면
2. 카운터 감소
3. 초기화 버튼 클릭
4. 카운터 증가