\'피플 카운터\' 구축: 어린 시절부터 현대 웹사이트까지의 여정

Introduction

Ever find yourself counting people or objects just for fun? I certainly did as a child, whether it was the number of cars passing by or how many people were in a room. This simple habit sparked the idea behind my project: The People Counter.

The primary goal of creating The People Counter was to dive into JavaScript, understand its syntax, and get comfortable with its flow. While I named it “The People Counter,” the concept is versatile and can be adapted to any type of counter—be it a car counter, house counter, toffee counter, or even a star counter. It’s fundamentally a counter app that helps in grasping the basics of JavaScript programming.

This project was built using resources from the Scrimba learning platform, which provided valuable insights and guidance throughout the development process.

Click to view the app in action!

The People Counter is designed to provide an easy, effective way to track and manage counts, all while showcasing the power of HTML, CSS, and JavaScript.

Features That Make Counting Fun

1. Real-Time Counting
   Keep track of your count with a simple click of the "Increment" button. No more manual tallying!
   Increment
   This feature updates the displayed count instantly each time you click the button.

2. Save and View Entries
   Log your counts and view a history of previous entries. Perfect for keeping track of multiple counts over time.
   Save
   

   
   저장된 카운트가 버튼 아래 목록에 추가되어 카운트 기록을 검토할 수 있습니다.

3. 우아하고 반응성이 뛰어난 디자인
   이 앱은 다양한 화면 크기에 완벽하게 적응하여 데스크탑이나 모바일 기기에서 깔끔하고 현대적인 인터페이스를 보장합니다.
   앱 디자인이 모든 기기에서 멋지게 나타나 사용자 경험이 향상됩니다.

앱을 강화하는 기술

HTML : 애플리케이션의 백본으로 필수 구조를 제공합니다.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <title>The People Counter</title>


    <div class="app-container">
        <header>
            <h1 id="The-People-Counter">The People Counter</h1>
        </header>
        <main class="counter-container">
            <div class="counter-display">
                <div class="counter-frame">
                    <div id="count-el">0</div>
                </div>
            </div>
            <div class="controls">
                <button id="increment-btn" onclick="increment()">
                    <span>Increment</span>
                </button>
                <button id="save-btn" onclick="save()">
                    <span>Save</span>
                </button>
            </div>
            <div class="entries">
                <h2 id="Previous-Entries">Previous Entries</h2>
                <div id="save-el" class="entry-list"></div>
            </div>
        </main>
    </div>
    <script src="index.js"></script>

CSS
앱 스타일을 지정하려면 CSS를 사용하여 시각적으로 매력적이고 반응성이 뛰어나도록 만들 수 있습니다. (이 섹션은 JavaScript에 더 중점을 두기 때문에 여기에서는 자세한 CSS를 건너뛰겠습니다.)

자바스크립트
동적 기능을 통해 앱에 상호작용성을 구현합니다.

let count = 0

let countEl = document.getElementById("count-el")

let saveEl = document.getElementById ("save-el")


function increment() {   
    count += 1
    countEl.textContent = count
}

function save() {
    let countStr = count + " - "
    saveEl.textContent += countStr
    countEl.textContent = 0
    count = 0
}

설명:

변수 선언:

• let count = 0;: 증분 수를 추적하기 위해 변수 count를 초기화합니다.
• let countEl = document.getElementById("count-el");: 현재 개수가 표시되는 HTML 요소를 검색하여 countEl에 할당합니다.
• let saveEl = document.getElementById("save-el");: 저장된 개수가 표시될 HTML 요소를 검색하여 saveEl에 할당합니다.

증분 함수:

• count += 1;: 함수가 호출될 때마다 count 변수를 1씩 증가시킵니다.
• countEl.textContent = count;: 새 값을 반영하도록 countEl 요소에 표시된 개수를 업데이트합니다.

저장 기능:

• let countStr = count + " - ";: 현재 개수에서 문자열을 생성하고 구분을 위해 대시를 추가합니다.
• saveEl.textContent += countStr;: saveEl 요소에 저장된 기존 개수 목록에 새 개수 문자열을 추가합니다.
• countEl.textContent = 0;: 저장 후 표시되는 개수를 0으로 재설정합니다.
• count = 0;: count 변수를 0으로 재설정하여 다음 계산 세션을 새로 시작합니다.

앱 사용방법

카운트 증가:
"증분" 버튼을 클릭하면 개수가 1씩 증가합니다. 표시되는 숫자는 실시간으로 업데이트됩니다.

카운트 저장:
현재 카운트를 기록하려면 "저장" 버튼을 클릭하세요. 이전 항목 목록에 개수가 추가되고 표시가 0으로 재설정됩니다.

이전 항목 보기:
저장된 개수는 '이전 항목' 섹션 아래에 표시되며 여기에서 개수 기록을 검토할 수 있습니다.

배운 교훈

인원 계수기 만들기는 특히 Scrimba에 대한 튜토리얼 이후로 통찰력 있는 경험이었습니다. HTML, CSS 및 JavaScript의 핵심 개념을 강화하고 기능적이고 반응성이 뛰어난 웹 애플리케이션을 만드는 방법을 보여주었습니다.

결론

People Counter는 약간의 코딩 지식을 통해 단순한 아이디어가 얼마나 실용적인 도구로 발전할 수 있는지를 보여주는 증거입니다. 사람, 사물을 추적하거나 단순히 숫자를 가지고 놀 때 이 앱은 오래된 습관에 대한 현대적인 솔루션을 제공합니다.

위 내용은 \'피플 카운터\' 구축: 어린 시절부터 현대 웹사이트까지의 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!