Vanilla JavaScript를 사용하여 증분 버튼을 코딩하는 방법

10313 단어 htmlwebdevjavascripttutorial
우리가 할 일.



우리는 사람 수를 세는 앱을 만들 것입니다. 버튼을 한 번 클릭하면 한 번만 세고, 반복해서…
우리가 사용할 경로는 JavaScript, Html, & Css..(이 앱은 고급 프로그래머가 아닌 초보자를 위한 앱입니다)입니다.

소개



기술의 강한 바람이 강하게 불고 있고 그것이 전 세계에 미치는 영향에 따라 어떤 조직에서는 사람들의 수를 세고 싶을 때 누군가를 데려와 1-피니시부터 세기 시작한다는 것을 알게 됩니다. 그러한 회사의 예는 철도역입니다. 예를 들어 내가 기차역에서 책과 펜으로 모든 사람을 세는 일일 의무가 있다면. 그 방법이 스트레스가 많다는 데 모두 동의하실 것입니다. 평범한 자바스크립트를 사용하면 시스템이나 휴대전화를 휴대할 수 있고, 하루가 끝날 때 버튼을 클릭하고 저장하기만 하면 됩니다…
저와 함께 시작할 준비가 되셨나요?

전제 조건



다음은 저와 함께 구축해야 하는 항목 목록입니다. 많이 필요하지는 않지만.
 승화 또는 대 코드
 원하는 모든 브라우저
 아마도 이미지

증가 및 감소 앱 코딩
이것이 코딩이 시작되는 곳입니다. 아래는 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>Document</title>
</head>
<body>
    <h1>People Entered:</h1>
    <h2 id="count-el">0</h2>
    <button  id="increment-btn" onclick="increment()">INCREMENT</button>
    <button  id="save-btn" onclick="save()">Save</button>
<p id="save-el">Previous enteries: </p>

<script src="build_a_passenger_counter_app.js"></script>
</body>
</html>


다음은 인터페이스의 아름다움을 위한 CSS 코드입니다.

body{
    background-image: url(post-img2.jpg);
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
}

h1{
    margin-top: 10px;
    margin-bottom: 10px;
}

h2{
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button{
    border: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background-color: darkred;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

button: hover{
    transition: 5s;
    background-color: red;
}

#increment-btn{
    background-color: darkred;
}

#save-btn{
    background-color: darkgreen;
}


여기까지 왔다면 JavaScript 코드에 대한 준비를 해야 합니다.

let count = 0
let countEl = document.getElementById("count-el")
let count = 0
let countEl = document.getElementById("count-el")
function increment() {
    count += 1
    countEl = document.getElementById("count-el")
    countEl.textContent = count
}   

let saveEl = document.getElementById("save-el")
function save() {
    let all = count + " - "
    saveEl.textContent += all
    countEl.textContent = 0
    count = 0
}


와우, 여기까지 오시느라 고생하셨습니다. 모든 모임에서 사용할 수 있는 카운터 앱 빌드를 방금 완료했습니다.

결론 카운터 앱을 완료했으며 다음 튜토리얼에서 다시 뵙겠습니다.

저자 소개



Emmanuel Okolie는 2020년에 소프트웨어 엔지니어로서의 여정을 시작했습니다. 수년 동안 그는 JavaScript, PHP, HTML 및 CSS 등에서 본격적인 기술을 연마했습니다.

그는 현재 프리랜서로 클라이언트를 위한 웹사이트를 구축하고 있으며 자신이 하는 일을 다른 사람들에게 가르치는 기술 자습서를 작성하고 있습니다.
Emmanuel Okolie는 귀하의 의견을 들을 수 있도록 열려 있습니다. , Facebook , Github 또는 그의 website 에서 연락할 수 있습니다.
좋음과 나쁨 - MVC Razor View Engine의 nab-bar에서 활성 페이지를 강조 표시합니다.
Umbraco 9 - Redis용 Azure 캐시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage