\'피플 카운터\' 구축: 어린 시절부터 현대 웹사이트까지의 여정-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2024-08-18 00:00:36

원래의

903명이 탐색했습니다.

$Building \$

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

Real-Time Counting
Keep track of your count with a simple click of the "Increment" button. No more manual tallying!

This feature updates the displayed count instantly each time you click the button.
Save and View Entries
Log your counts and view a history of previous entries. Perfect for keeping track of multiple counts over time.

저장된 카운트가 버튼 아래 목록에 추가되어 카운트 기록을 검토할 수 있습니다.
우아하고 반응성이 뛰어난 디자인
이 앱은 다양한 화면 크기에 완벽하게 적응하여 데스크탑이나 모바일 기기에서 깔끔하고 현대적인 인터페이스를 보장합니다.
앱 디자인이 모든 기기에서 멋지게 나타나 사용자 경험이 향상됩니다.

앱을 강화하는 기술

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="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>
</head>
<body>
    <div class="app-container">
        <header>
            <h1>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>Previous Entries</h2>
                <div id="save-el" class="entry-list"></div>
            </div>
        </main>
    </div>
    <script src="index.js"></script>
</body>
</html>

로그인 후 복사

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에 할당합니다.

증분 함수: