자바스크립트 카운터 | HTML, CSS, JS

3905 단어 csswebdevprogrammingjavascript
HTML, CSS 및 Javascript를 사용하는 간단한 자바스크립트 카운터
이와 같은 더 많은 튜토리얼을 기대해 주세요.

비디오 자습서 및 소스 코드는 다음과 같습니다.



index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple counter using HTML, CSS, JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <div class="whole">
        <div class="main">
            <div class="counter">9</div>
            <div class="plus count"><i class="fa-solid fa-plus"></i></div>
            <div class="minus count"><i class="fa-solid fa-minus"></i></div>
        </div>
        <div class="reset">
            <button class="reset-btn">Reset</button>
        </div>
    </div>



<script src="app.js"></script>

</body>
</html>


같은 디렉토리에 파일을 만들고 이름을 style.css로 지정합니다.
아래 주어진 코드를 붙여넣기

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Roboto', sans-serif;

}

.whole{
    margin: auto;
}


.main{
    width: 300px;
    position: relative;
}

.main .counter{
    width: 200px;
    height: 200px;
    margin: auto;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #FF5757;
    border-radius: 5px;
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
}


.count{
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 5px solid #FF5757;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -30px;
    border-radius: 5px;
}


.count i{
    color: #FF5757;
    font-size: 2rem;
}


.count:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}

.plus{
    right: 10px;
}
.minus{
    left: 10px;
}

.reset{
    align-items: center;
    text-align: center;
    margin-top: 80px;


}

.reset .reset-btn{
    margin: auto;
    outline: none;
    padding: 10px 18px;
    background-color: #fff;
    border-radius: 5px;
    border: 5px solid #FF5757;
    color: #FF5757;
    font-size: 1.2rem;
    font-weight: 700;

}

.reset .reset-btn:hover{
    background-color: #FF5757;
    color: #fff;

}


마지막으로 Javascript 파일 이름을 app.js로 지정합니다.

const counter = document.querySelector('.counter');
const add = document.querySelector('.plus')
const sub = document.querySelector('.minus')
const resetNum = document.querySelector('.reset-btn')

let number = counter.innerHTML;

add.addEventListener('click', function(){
    number++;  
    addToHtml(number);
})

sub.addEventListener('click', function(){
    number--;  
    addToHtml(number);
})

resetNum.addEventListener('click', function(){ 
    addToHtml(0);
})


function addToHtml(value){
    number = value;
    counter.innerHTML = value;
}

addToHtml(0)


읽어 주셔서 감사합니다

제안 사항이 있으면 알려주세요.
당신과 이야기하게되어 기쁩니다
소스 코드가 아닌 지식에 DRY 적용
CSS 방향 속성과 논리적 속성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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