今日练习：使用html+css+js制作一个简单的计算器

html：

    <div class="container">
        <div class="output" id="output">0</div>
        <div class="calculator_keys">
            <button class="button" onclick="appendToOutput('+')">+</button>
            <button class="button" onclick="appendToOutput('-')">-</button>
            <button class="button" onclick="appendToOutput('*')">&times;</button>
            <button class="button" onclick="appendToOutput('÷')">÷</button>
            <button class="button" onclick="appendToOutput('7')">7</button>
            <button class="button" onclick="appendToOutput('8')">8</button>
            <button class="button" onclick="appendToOutput('9')">9</button>
            <button class="button" onclick="appendToOutput('4')">4</button>
            <button class="button" onclick="appendToOutput('5')">5</button>
            <button class="button" onclick="appendToOutput('6')">6</button>
            <button class="button" onclick="appendToOutput('1')">1</button>
            <button class="button" onclick="appendToOutput('2')">2</button>
            <button class="button" onclick="appendToOutput('3')">3</button>
            <button class="button equal-btn equals" onclick="calculate()">=</button>
            <button class="button" onclick="appendToOutput('0')">0</button>
            <button class="button" onclick="appendToOutput('.')">.</button>
            <button class="button" onclick="clearOutput()" id="clear">C</button>
        </div>
    </div>

css：

        html {
            box-sizing: border-box;
        }

        *,
        *::before,
        *::after {
            box-sizing: inherit;
        }

        body {
            margin: 0;
        }

        embed,
        iframe,
        img,
        object,
        video {
            max-width: 100%;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        ol,
        li,
        p,
        pre,
        blockquote,
        figure,
        hr {
            margin: 0;
            padding-right: 0;
            padding-left: 0;
        }

        a {
            text-decoration: none;
        }

        a:focus {
            outline: none;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            display: block;
        }

        ol,
        ul {
            list-style: none;
        }

        input,
        textarea,
        button {
            border: 0;
            border-radius: 0;
            background-color: transparent;
            font-size: inherit;
            font-family: inherit;
            font-weight: inherit;
            outline: none;
            appearance: none;
            text-align: left;
        }

        input:hover,
        input:active,
        input:focus,
        textarea:hover,
        textarea:active,
        textarea:focus,
        button:hover,
        button:active,
        button:focus {
            outline: none;
        }

        :root {
            font-family: Helvetica, Arial, sans-serif;
        }

        body {
            background-image: linear-gradient(236deg, #74ebd5, #acb6e5);
            font-family: Arial, Helvetica, sans-serif;
            height: 100vh;
        }

        .container {
            margin: auto;
            margin-top: 100px;
            /* padding: 10px; */
            max-width: 20em;
            margin-left: auto;
            margin-right: auto;
            border-radius: 12px;
            box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.15);
            overflow: hidden;

        }

        .output {
            font-size: 2em;
            text-align: right;
            background-color: #222222;
            color: #fff;
            font-size: 1.714285714em;
            padding: 0.5em 0.75em;
        }

        .calculator_keys {
            background-color: #999;
            display: grid;
            grid-gap: 1px;
            grid-template-columns: repeat(4, 1fr);
        }

        .calculator_keys>* {
            background-color: #fff;
            padding: 0.5em 1.25em;
            position: relative;
            text-align: center;
        }

        .calculator__keys>*:active::before {
            background-color: rgba(0, 0, 0, 0.2);
            bottom: 0;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
            content: "";
            left: 0;
            opacity: 0.3;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
        }

        .button {
            background-color: #eee;
        }
        .equal-btn {
            background-image: linear-gradient(to bottom, #fe886a, #ff7033);
            grid-column: -2;
            grid-row: 2 / span 5;
        }
        #clear{
            background-color: #31c27c;
        }

js：

        const output = document.querySelector('.output');

        function appendToOutput(value){
            if(output.innerHTML==='0'){
                output.innerHTML=value;
            }else{
                output.innerHTML += value;
            }
        }
        function clearOutput(){
            output.innerHTML= '0';
        }
        function calculate(){
            output.innerHTML = eval(output.innerHTML);
        }

仙路崎岖，磨难并不可怕，坚持终成正果！