JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<div class="wrap">
        <div class="card">
            <h3>simple counter:</h3>
            <div class="counter">
                <button class="btn-counter" id="subtract">-</button>
                <span id="output">0</span>
                <button class="btn-counter" id="add">+</button>
            </div>
        </div>

        <div class="card">
            <h3>simple calculator:</h3>
            <div class="calculator">
                <input class="form-input" type="number" id="firstNumber"/>
                <input class="form-input" type="number" id="secondNumber"/>
                <button id="arithmetic" class="btn btn-primary">加/減/乘/除</button>
            </div>
        </div>
    </div>

CSS

:root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }    
    *,
    *::after,
    *::before {
        padding: 0px;
        margin: 0px;
        font-family: inherit;
    }
    html,
    body {
        height: 100vh;
    }

    body {
        font-family: sans-serif;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: aliceblue;
    }
    .counter_conatiner {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        margin-top: 1rem;
    }
    span {
        font-size: 3rem;
        background-color: #00bb00;
        padding: 2px 12px;
        margin: 0 1rem;
        border-radius: 0.25rem;
        min-width: 4rem;
        color: #fff;
    }
    .btn-counter {
        font-size: 3rem;
        cursor: pointer;
        background-color: transparent;
        border: 0px;
    }
    .card{
        padding: 1rem;
        border-radius: 0.25rem;
        background: #fff;
        margin-bottom: 1.5rem;
    }
    h3{
        margin: 0.5rem 0 1rem;
    }
    .form-input{
        border: 1px solid #94a3b8;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        flex: auto;
        margin-bottom: 1rem;
    }
    .btn,button{
        padding: 0.5rem 1rem;
        border: 2px solid transparent;
        border-radius: 0.25rem;
        background-color: var(--gray);
        color: #475569;
        cursor: pointer;
    }
    .btn-primary{
        background-color: var(--primary);
        color: var(--white);
    }
    .btn-primary:hover{
        background-color: #3730a3;
    }

JavaScript

let subtract = document.querySelector('#subtract');
        let add = document.querySelector('#add');
        let output = document.querySelector('#output');

        // console.log(add, subtract);

        add.addEventListener('click', () =>{
            let result = Number(output.innerText) +1 ;
            output.innerText = result;
        })
        subtract.addEventListener('click', () =>{
            let result = Number(output.innerText) - 1;
            output.innerText = result;
        })

        arithmetic.addEventListener('click', () =>{
            let firstNumber = document.querySelector('#firstNumber');
            let secondNumber = document.querySelector('#secondNumber');
            // console.log(firstNumber, secondNumber);
            let firstValue = Number(firstNumber.value);
            let secondValue = Number(secondNumber.value);
            console.log(firstValue, secondValue);
            
            if( firstValue == 0 || secondValue == 0){
                alert('請輸入數字')
            }else{
                alert( firstValue + secondValue );
                alert( firstValue - secondValue );
                alert( firstValue * secondValue );
                alert( firstValue / secondValue );
            }
        })