劉任昌學習Bro code製作計算機

https://www.youtube.com/watch?v=I5kj-YsmWjM

Build this JS calculator in 15 minutes!

以上程式碼

<H1>劉任昌學習Bro code製作計算機</H1>

<div id="calculator">

<input id="display" readonly></input>

<div id="keys">

    <button onclick="appendToDisplay('+')">+</button>

    <button onclick="appendToDisplay('7')">7</button>

    <button onclick="appendToDisplay('8')">8</button>

    <button onclick="appendToDisplay('9')">9</button>

    <button onclick="appendToDisplay('-')">-</button>

    <button onclick="appendToDisplay('4')">4</button>

    <button onclick="appendToDisplay('5')">5</button>

    <button onclick="appendToDisplay('6')">6</button>

    <button onclick="appendToDisplay('*')">*</button>

    <button onclick="appendToDisplay('1')">1</button>

    <button onclick="appendToDisplay('2')">2</button>

    <button onclick="appendToDisplay('3')">3</button>

    <button onclick="appendToDisplay('/')">/</button>

    <button onclick="appendToDisplay('0')">0</button>

    <button onclick="appendToDisplay('.')">.</button>

    <button onclick="calculate()">=</button>

    <button onclick="clearDisplay()">C</button>

</div>

</div>

<p>https://www.youtube.com/watch?v=I5kj-YsmWjM</p>

<p></p>Build this JS calculator in 15 minutes!</p>

<SCRIPT>

function appendToDisplay(input)

{ const display = document.getElementById("display");

    display.value += input;}

function clearDisplay()

{ const display = document.getElementById("display");

display.value = "";}

function calculate()

{ const display = document.getElementById("display");

    try{ display.value = eval(display.value); }

    catch(error){display.value = "Error";}

}

</SCRIPT>

<STYLE>

#calculator{

    background-color: darkgreen;

    border-radius: 15px;

    max-width: 400px;}

#display{

    width: 100%;

    padding: 20px;

    font-size: 4rem;

    text-align: left;

    border: none;

    background-color: black;

    color: white;}

#keys{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    padding: 10px;}

button{

    width: 80px;

    height: 80px;

    border-radius: 40px;

    background-color: gray;

    color: white;

    font-size: 3rem;

    font-weight: bold;

    cursor: pointer;}

button:hover{background-color: darkorange;}

button:active{background-color: yellow;}

</STYLE>