Javascript

07.Javascript 기초 예제 자판기 만들기

프론트개미 2022. 2. 25. 17:21

function과 if문을 이용하여 만든 자판기 예제입니다.

 

- html

<!DOCTYPE html>
<html lang="ko">
<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>자판기 예제</title>
    <link rel="stylesheet" href="ex01.css">
    <script defer src="ex01.js"></script>
</head>
<body>
    <div id="vending">
        <div class="drink">
            <button type="button" id="drink1">아메리카노(4000원)</button>
            <button type="button" id="drink2">자몽에이드(4500원)</button>
            <button type="button" id="drink3">아이스티(3700원)</button>
        </div>
        <div class="cash">
            <button type="button" id="cash1">1000원</button>
            <button type="button" id="cash2">500원</button>
            <button type="button" id="cash3">100원</button>
        </div>
        <p id="price">현재 금액 : <span id="current"></span></p>
    </div>
</body>
</html>

 

- css

#vending{
    width:500px;
    height:200px;
    border:1px solid #ddd;
}

.drink{
    text-align: center;
    margin-top:20px;
}

.drink button{
    width:30%;
}

.cash{
    margin:20px 0 0 19px;
}

#price{
    margin:45px 0 0 19px;
    font-weight: bold;
}

 

자바스크립트 예제이기 때문에 간단하게 틀만 짜서 제작했습니다.

 

이렇게 코드를 입력하면 출력되는 화면입니다.

 

화면을 통한 자바스크립트 작동 기획은

1. 금액을 클릭하여 현재 금액에 표시가 되게 한다. (금액은 누른만큼 중첩됨)

2. 금액이 부족할 때 음료를 선택하게 되면 잔액이 부족하다는 안내창이 나온다.

3. 현재 금액이 음료를 구매할 수 있는 금액이 되었을 때, 그리고 구매할 수 없을 때를 색상으로 표시해준다.

4. 현재 금액을 채워 음료를 구매했을 때 음료를 구매한뒤 남은 잔액을 표시해준다.

 

 

'use strict';

let coin = 0;
const current = document.getElementById('current');
const drink1 = document.getElementById("drink1");
const drink2 = document.getElementById("drink2");
const drink3 = document.getElementById("drink3");
const cash1 = document.getElementById("cash1");
const cash2 = document.getElementById("cash2");
const cash3 = document.getElementById("cash3");
document.getElementById('current').innerHTML = coin + '원';

금액을 표시해줄 변수 coin을 0으로 초기화 시켜줍니다.

그리고 필요한 전역변수들을 미리 생성해줍니다.

 

 

// 가격에 따른 메뉴 색상 변경
function colorChange(){
    if(3700 <= coin && coin <= 4000){
        drink1.style.color = 'blue';
    }else if(4000 < coin && coin <= 4500){
        drink1.style.color = 'blue';
        drink2.style.color = 'blue';
    }else if(4500 <= coin){
        drink1.style.color = 'blue';
        drink2.style.color = 'blue';
        drink3.style.color = 'blue';
    }else{
        drink1.style.color = 'red';
        drink2.style.color = 'red';
        drink3.style.color = 'red';
    }
};

음료를 구매할 수 있는 금액이 되었을 때 해당 음료의 색을 파랑색, 구매할 수 없을 때를 빨강색으로 표시해줍니다.

if문을 통해서 금액의 범위를 지정했고 그에 따른 결과값이 보이게 작성을 했습니다.

 

// 금액 버튼 클릭시
function cash1_Click(){
    coin = coin + 1000;
    colorChange();
    document.getElementById('current').innerHTML = coin + '원';
};

function cash2_Click(){
    coin = coin + 500;
    colorChange();
    document.getElementById('current').innerHTML = coin + '원';
};

function cash3_Click(){
    coin = coin + 100;
    colorChange();
    document.getElementById('current').innerHTML = coin + '원';
};

금액 버튼을 클릭했을 때 화면에 금액이 추가되고 그에 따라 음료의 구매 가능 여부를 색으로 보여주는 기능입니다.

클릭시 가져올 함수를 작성했고, coin이란 전역변수를 사용함으로써 현재 금액을 누적 시킬 수 있었습니다.

 

// 음료 주문시
function drink1_Click(){
    if(4000 <= coin){
        coin = coin - 4000;
        document.getElementById('current').innerHTML = coin + '원';
        colorChange();
        alert(`아메리카노를 주문하셨습니다. 잔액은 ${coin}원 남았습니다.`);
    }else{
        alert(`잔액이 부족합니다.`);
    };
};

function drink2_Click(){
    if(4500 <= coin){
        coin = coin - 4500;
        document.getElementById('current').innerHTML = coin + '원';
        colorChange();
        alert(`자몽에이드를 주문하셨습니다. 잔액은 ${coin}원 남았습니다.`);
    }else{
        alert(`잔액이 부족합니다.`);
    };
};

function drink3_Click(){
    if(3700 <= coin){
        coin = coin - 3700;
        document.getElementById('current').innerHTML = coin + '원';
        colorChange();
        alert(`아이스티를 주문하셨습니다. 잔액은 ${coin}원 남았습니다.`);
    }else{
        alert(`잔액이 부족합니다.`);
    };
};

음료를 클릭하여 구매했을 때 어떤 음료를 구매했는지, 잔액은 얼마가 남았는지, 마지막으로 현재 금액이 부족할 경우 

사용자에게 잔액이 부족하다는 안내창을 보여주는 기능입니다.

if문을 이용하여 coin이 음료 금액 이상으로 있을 때만 계산이 진행되고, 그게 아닐경우 else를 이용하여 안내창을 보여줬습니다.

 

 

//실행
function result(){
    cash1.addEventListener('click',cash1_Click);
    cash2.addEventListener('click',cash2_Click);
    cash3.addEventListener('click',cash3_Click);

    drink1.addEventListener('click',drink1_Click);
    drink2.addEventListener('click',drink2_Click);
    drink3.addEventListener('click',drink3_Click);
};

result();

최종으로 음료의 종류나 금액 선택 버튼이 추가될 경우 수정을 하기 쉽도록 result란 함수를 만들어서 묶어서 실행시켰습니다.

addEventListener를 이용하여 'click' 했을 때 해당 함수를 실행하게 제작했습니다.

 

- JavaScript 최종코드

'use strict';

let coin = 0;
const current = document.getElementById('current');
const drink1 = document.getElementById("drink1");
const drink2 = document.getElementById("drink2");
const drink3 = document.getElementById("drink3");
const cash1 = document.getElementById("cash1");
const cash2 = document.getElementById("cash2");
const cash3 = document.getElementById("cash3");
document.getElementById('current').innerHTML = coin + '원';

// 가격에 따른 메뉴 색상 변경
function colorChange(){
    if(3700 <= coin && coin <= 4000){
        drink1.style.color = 'blue';
    }else if(4000 < coin && coin <= 4500){
        drink1.style.color = 'blue';
        drink2.style.color = 'blue';
    }else if(4500 <= coin){
        drink1.style.color = 'blue';
        drink2.style.color = 'blue';
        drink3.style.color = 'blue';
    }else{
        drink1.style.color = 'red';
        drink2.style.color = 'red';
        drink3.style.color = 'red';
    }
};

// 금액 버튼 클릭시
function cash1_Click(){
    coin = coin + 1000;
    colorChange();
    document.getElementById('current').innerHTML = coin + '원';
};

function cash2_Click(){
    coin = coin + 500;
    colorChange();
    document.getElementById('current').innerHTML = coin + '원';
};

function cash3_Click(){
    coin = coin + 100;
    colorChange();
    document.getElementById('current').innerHTML = coin + '원';
};

// 음료 주문시
function drink1_Click(){
    if(4000 <= coin){
        coin = coin - 4000;
        document.getElementById('current').innerHTML = coin + '원';
        colorChange();
        alert(`아메리카노를 주문하셨습니다. 잔액은 ${coin}원 남았습니다.`);
    }else{
        alert(`잔액이 부족합니다.`);
    };
};

function drink2_Click(){
    if(4500 <= coin){
        coin = coin - 4500;
        document.getElementById('current').innerHTML = coin + '원';
        colorChange();
        alert(`자몽에이드를 주문하셨습니다. 잔액은 ${coin}원 남았습니다.`);
    }else{
        alert(`잔액이 부족합니다.`);
    };
};

function drink3_Click(){
    if(3700 <= coin){
        coin = coin - 3700;
        document.getElementById('current').innerHTML = coin + '원';
        colorChange();
        alert(`아이스티를 주문하셨습니다. 잔액은 ${coin}원 남았습니다.`);
    }else{
        alert(`잔액이 부족합니다.`);
    };
};

//실행
function result(){
    cash1.addEventListener('click',cash1_Click);
    cash2.addEventListener('click',cash2_Click);
    cash3.addEventListener('click',cash3_Click);

    drink1.addEventListener('click',drink1_Click);
    drink2.addEventListener('click',drink2_Click);
    drink3.addEventListener('click',drink3_Click);
};

result();

 

'Javascript' 카테고리의 다른 글

09.Javascript 로또번호 추출기 예제  (0) 2022.03.04
08.Javascript 배열 정리  (0) 2022.03.03
06.Javascript Object 이론 정리  (0) 2022.02.23
05.Javascript class 이론  (0) 2022.02.22
04.Javascript 반복문 예제  (0) 2022.01.24

'Javascript'의 다른글

  • 현재글07.Javascript 기초 예제 자판기 만들기

관련글

댓글

티스토리툴바