tweaks

Γράψε μια αριθμομηχανή με HTML, JS και CSS

giorgos 4 λεπτά ανάγνωσης
Προσθέστε το iGuRu.gr στη Google

Παρακάτω θα δούμε πως μπορείτε να γράψετε ένα λειτουργικό calculator με λίγες γραμμές (181) κώδικα.

Μπορείτε να δοκιμάσετε την αριθμομηχανή παρακάτω:

Προτιμώμενη πηγή στο Google

Calculator

Ας δούμε τον κώδικα

HTML
<span class="line"><span style="color: #808080;"><</span><span style="color: #569cd6;">h4</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">Calculator</span><span style="color: #808080;"></</span><span style="color: #569cd6;">h4</span><span style="color: #808080;">></span></span>

<span class="line"><span style="color: #808080;"><</span><span style="color: #569cd6;">h3</span> <span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text-align: center;"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">span</span> <span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"background-color: #ccffff;"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">Toy calculator</span><span style="color: #808080;"></</span><span style="color: #569cd6;">span</span><span style="color: #808080;">></</span><span style="color: #569cd6;">h3</span><span style="color: #808080;">></span></span>
<span class="line">            <span style="color: #808080;"><</span><span style="color: #569cd6;">table</span> <span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_table"</span><span style="color: #808080;">></span></span>
<span class="line">                <span style="color: #808080;"><</span><span style="color: #569cd6;">tbody</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"><</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span> <span style="color: #9cdcfe;">colspan</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">input</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_display"</span> <span style="color: #9cdcfe;">type</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"text"</span> <span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"0"</span> <span style="color: #9cdcfe;">disabled</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">""</span><span style="color: #808080;">/></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"></</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"><</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_7"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">7</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_8"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">8</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_9"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">9</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_divide"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">/</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"></</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"><</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_4"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">4</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_5"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">5</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_6"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">6</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_multiply"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">*</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"></</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"><</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_1"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">1</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_2"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">2</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_3"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">3</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_subtract"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">-</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"></</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"><</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_0"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">0</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_decimal"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">.</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_equals"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">=</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_add"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">+</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"></</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"><</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                        <span style="color: #808080;"><</span><span style="color: #569cd6;">td</span> <span style="color: #9cdcfe;">colspan</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"4"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">id</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"t7_clear"</span><span style="color: #808080;">></span><span style="color: #d4d4d4;">C</span><span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">><</span><span style="color: #569cd6;">span</span><span style="color: #808080;">></span> <span style="color: #808080;"></</span><span style="color: #569cd6;">span</span><span style="color: #808080;">></</span><span style="color: #569cd6;">td</span><span style="color: #808080;">></span></span>
<span class="line">                    <span style="color: #808080;"></</span><span style="color: #569cd6;">tr</span><span style="color: #808080;">></span></span>
<span class="line">                <span style="color: #808080;"></</span><span style="color: #569cd6;">tbody</span><span style="color: #808080;">></span></span>
<span class="line">            <span style="color: #808080;"></</span><span style="color: #569cd6;">table</span><span style="color: #808080;">></span></span>
<span class="line">            <span style="color: #808080;"><</span><span style="color: #569cd6;">style</span><span style="color: #808080;">></span></span>
<span class="line"><span style="color: #d4d4d4;">                .t7_table </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">collapse</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">collapse</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">: 5</span><span style="color: #9cdcfe;">px</span> <span style="color: #9cdcfe;">ridge</span> <span style="color: #9cdcfe;">whitesmoke</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">flex</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">flex</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">direction</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">column</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">fit</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">content</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>

<span class="line"><span style="color: #d4d4d4;">                .t7_table>tbody </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">border</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">collapse</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">collapse</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">flex</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">flex</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">direction</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">column</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: 5</span><span style="color: #9cdcfe;">px</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #6a9955;">/* width: fit-content; */</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>

<span class="line"><span style="color: #d4d4d4;">                /* Buttons */</span></span>
<span class="line"><span style="color: #d4d4d4;">                .t7_table>*>*>*>* </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">font</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">family</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">monospace</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">font</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">size</span><span style="color: #d4d4d4;">: 10</span><span style="color: #9cdcfe;">pt</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>

<span class="line"><span style="color: #d4d4d4;">                /* Display */</span></span>
<span class="line"><span style="color: #d4d4d4;">                .t7_table>tbody>tr>td>#t7_display </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #6a9955;">/* width: 50%; */</span></span>
<span class="line">                    <span style="color: #9cdcfe;">font</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">family</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">monospace</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">font</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">size</span><span style="color: #d4d4d4;">: 10</span><span style="color: #9cdcfe;">pt</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">text</span><span style="color: #d4d4d4;">-</span><span style="color: #9cdcfe;">align</span><span style="color: #d4d4d4;">: </span><span style="color: #9cdcfe;">right</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">width</span><span style="color: #d4d4d4;">: 110</span><span style="color: #9cdcfe;">px</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>

<span class="line"><span style="color: #d4d4d4;">                /* make gap smaller */</span></span>
<span class="line"><span style="color: #d4d4d4;">                .t7_table>tbody>tr>td </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #6a9955;">/* width: 0px; */</span></span>
<span class="line">                    <span style="color: #9cdcfe;">padding</span><span style="color: #d4d4d4;">: 3</span><span style="color: #9cdcfe;">px</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #6a9955;">/* background-color: black; */</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>
<span class="line">            <span style="color: #808080;"></</span><span style="color: #569cd6;">style</span><span style="color: #808080;">></span></span>

<span class="line">            <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></span>
<span class="line"><span style="color: #d4d4d4;">                // get refs to all the buttons in a dict</span></span>
<span class="line"><span style="color: #d4d4d4;">                const buttons = </span><span style="color: #569cd6;">{}</span><span style="color: #d4d4d4;">;</span></span>
<span class="line"><span style="color: #d4d4d4;">                for (let i = 0; i < 10; i++) </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">buttons</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">] = </span><span style="color: #9cdcfe;">document</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">querySelector</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">`#t7_</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">i</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">`</span><span style="color: #d4d4d4;">);</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["."] = document.querySelector("#t7_decimal");</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["="] = document.querySelector("#t7_equals");</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["/"] = document.querySelector("#t7_divide");</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["*"] = document.querySelector("#t7_multiply");</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["-"] = document.querySelector("#t7_subtract");</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["+"] = document.querySelector("#t7_add");</span></span>
<span class="line"><span style="color: #d4d4d4;">                buttons["clear"] = document.querySelector("#t7_clear");</span></span>

<span class="line"><span style="color: #d4d4d4;">                // get ref to the display</span></span>
<span class="line"><span style="color: #d4d4d4;">                const display = document.querySelector("#t7_display");</span></span>

<span class="line"><span style="color: #d4d4d4;">                let buffer = 0;</span></span>
<span class="line"><span style="color: #d4d4d4;">                let answer_buffer = 0;</span></span>
<span class="line"><span style="color: #d4d4d4;">                let operator;</span></span>
<span class="line"><span style="color: #d4d4d4;">                let isFloat = false;</span></span>

<span class="line"><span style="color: #d4d4d4;">                buttons["clear"].addEventListener("click", () => </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #ce9178;">"0"</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">isFloat</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">undefined</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                <span style="color: #569cd6;">}</span><span style="color: #d4d4d4;">);</span></span>

<span class="line"><span style="color: #d4d4d4;">                for (let i = 0; i < 10; i++) </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">buttons</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">].</span><span style="color: #dcdcaa;">addEventListener</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"click"</span><span style="color: #d4d4d4;">, () </span><span style="color: #569cd6;">=></span><span style="color: #d4d4d4;"> {</span></span>
<span class="line">                        <span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> == </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;"> && </span><span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;"> != </span><span style="color: #569cd6;">undefined</span><span style="color: #d4d4d4;">) {</span></span>
<span class="line">                            <span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">buffer</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #6a9955;">// console.log("here");</span></span>
<span class="line"><span style="color: #d4d4d4;">                        }</span></span>
<span class="line">                        <span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">isFloat</span><span style="color: #d4d4d4;">) {</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #dcdcaa;">parseFloat</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">() + </span><span style="color: #ce9178;">'.'</span><span style="color: #d4d4d4;"> + </span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">());</span></span>
<span class="line">                            <span style="color: #9cdcfe;">isFloat</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></span>
<span class="line"><span style="color: #d4d4d4;">                        } </span><span style="color: #c586c0;">else</span> <span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">().</span><span style="color: #dcdcaa;">includes</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">)) {</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #dcdcaa;">parseFloat</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">() + </span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">());</span></span>
<span class="line"><span style="color: #d4d4d4;">                        } </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> {</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #dcdcaa;">parseInt</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">() + </span><span style="color: #9cdcfe;">i</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">());</span></span>
<span class="line"><span style="color: #d4d4d4;">                        }</span></span>
<span class="line">                        <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                        <span style="color: #6a9955;">// console.log(buffer);</span></span>
<span class="line">                        <span style="color: #6a9955;">// console.log(buffer.isFloat);</span></span>
<span class="line"><span style="color: #d4d4d4;">                    });</span></span>
<span class="line">                <span style="color: #569cd6;">}</span></span>

<span class="line"><span style="color: #d4d4d4;">                buttons["."].addEventListener("click", () => </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #dcdcaa;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">().</span><span style="color: #dcdcaa;">includes</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">)) {</span></span>
<span class="line"><span style="color: #d4d4d4;">                        return;</span></span>
<span class="line"><span style="color: #d4d4d4;">                    }</span></span>
<span class="line">                    <span style="color: #9cdcfe;">isFloat</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">true</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #dcdcaa;">parseFloat</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">toString</span><span style="color: #d4d4d4;">() + </span><span style="color: #ce9178;">"."</span><span style="color: #d4d4d4;">);</span></span>
<span class="line">                    <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> + </span><span style="color: #ce9178;">'.'</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                <span style="color: #569cd6;">}</span><span style="color: #d4d4d4;">);</span></span>

<span class="line"><span style="color: #d4d4d4;">                buttons["="].addEventListener("click", () => </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #dcdcaa;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;"> == </span><span style="color: #569cd6;">undefined</span><span style="color: #d4d4d4;">) {</span></span>
<span class="line"><span style="color: #d4d4d4;">                        return;</span></span>
<span class="line"><span style="color: #d4d4d4;">                    }</span></span>
<span class="line">                    <span style="color: #dcdcaa;">switch</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;">) {</span></span>
<span class="line"><span style="color: #d4d4d4;">                        case </span><span style="color: #ce9178;">"/"</span><span style="color: #9cdcfe;">:</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> / </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">break</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                        <span style="color: #9cdcfe;">case</span> <span style="color: #ce9178;">"*"</span><span style="color: #d4d4d4;">:</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> * </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">break</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                        <span style="color: #9cdcfe;">case</span> <span style="color: #ce9178;">"-"</span><span style="color: #d4d4d4;">:</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> - </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">break</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                        <span style="color: #9cdcfe;">case</span> <span style="color: #ce9178;">"+"</span><span style="color: #d4d4d4;">:</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> + </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">break</span><span style="color: #d4d4d4;">;</span></span>
<span class="line"><span style="color: #d4d4d4;">                    }</span></span>
<span class="line">                    <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #6a9955;">// answer_buffer = buffer;</span></span>
<span class="line">                    <span style="color: #6a9955;">// buffer = 0;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">undefined</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                    <span style="color: #9cdcfe;">isFloat</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                <span style="color: #569cd6;">}</span><span style="color: #d4d4d4;">);</span></span>

<span class="line"><span style="color: #d4d4d4;">                const operators = ["+", "-", "*", "/"];</span></span>
<span class="line"><span style="color: #d4d4d4;">                operators.forEach((op) => </span><span style="color: #569cd6;">{</span></span>
<span class="line">                    <span style="color: #9cdcfe;">buttons</span><span style="color: #d4d4d4;">[</span><span style="color: #9cdcfe;">op</span><span style="color: #d4d4d4;">].</span><span style="color: #dcdcaa;">addEventListener</span><span style="color: #d4d4d4;">(</span><span style="color: #ce9178;">"click"</span><span style="color: #d4d4d4;">, () </span><span style="color: #569cd6;">=></span><span style="color: #d4d4d4;"> {</span></span>
<span class="line">                        <span style="color: #c586c0;">if</span><span style="color: #d4d4d4;"> (</span><span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> == </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">) {</span></span>
<span class="line">                            <span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">op</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">answer_buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;"> = </span><span style="color: #b5cea8;">0</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">display</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">value</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">buffer</span><span style="color: #d4d4d4;">;</span></span>
<span class="line">                            <span style="color: #9cdcfe;">isFloat</span><span style="color: #d4d4d4;"> = </span><span style="color: #569cd6;">false</span><span style="color: #d4d4d4;">;</span></span>
<span class="line"><span style="color: #d4d4d4;">                        } </span><span style="color: #c586c0;">else</span><span style="color: #d4d4d4;"> {</span></span>
<span class="line">                            <span style="color: #6a9955;">// do the calculation and move the answer into the buffer</span></span>
<span class="line">                            <span style="color: #9cdcfe;">buttons</span><span style="color: #d4d4d4;">[</span><span style="color: #ce9178;">"="</span><span style="color: #d4d4d4;">].</span><span style="color: #dcdcaa;">click</span><span style="color: #d4d4d4;">();</span></span>
<span class="line">                            <span style="color: #6a9955;">// set the operator</span></span>
<span class="line">                            <span style="color: #9cdcfe;">operator</span><span style="color: #d4d4d4;"> = </span><span style="color: #9cdcfe;">op</span><span style="color: #d4d4d4;">;</span></span>
<span class="line"><span style="color: #d4d4d4;">                        }</span></span>
<span class="line"><span style="color: #d4d4d4;">                    });</span></span>
<span class="line">                <span style="color: #569cd6;">}</span><span style="color: #d4d4d4;">);</span></span>

<span class="line">            <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></span>
<span class="line"><span style="color: #d4d4d4;">        </</span><span style="color: #9cdcfe;">section</span><span style="color: #d4d4d4;">></span></span>

ή κατεβάστε το αρχείο

Προτιμώμενη πηγή στο Google
Προσθέστε το iGuRu.gr στη Google

0 σχόλια

iGuRu.gr

Συμμετέχετε στη συζήτηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Το μήνυμα σας δεν θα δημοσιευτεί εάν:

  1. Περιέχει υβριστικά, συκοφαντικά, ρατσιστικά, προσβλητικά ή ανάρμοστα σχόλια.
  2. Προκαλεί βλάβη σε ανηλίκους.
  3. Παρενοχλεί την ιδιωτική ζωή και τα ατομικά και κοινωνικά δικαιώματα άλλων χρηστών.
  4. Διαφημίζει προϊόντα ή υπηρεσίες ή διαδικτυακούς τόπους.
  5. Περιέχει προσωπικές πληροφορίες (διεύθυνση, τηλέφωνο κλπ).