{"id":5594,"date":"2024-08-28T23:32:25","date_gmt":"2024-08-28T23:32:25","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-1-mode-calcul\/"},"modified":"2024-08-28T23:32:28","modified_gmt":"2024-08-28T23:32:28","slug":"calculatrice-javascript-etape-1-mode-calcul","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/calculatrice-javascript-etape-1-mode-calcul\/","title":{"rendered":"6.3 Calculatrice JavaScript \u00c9tape 1 : Mode de Calcul"},"content":{"rendered":"\n<p><strong>6.3 Calculatrice JavaScript<\/strong> &#8211; Une calculatrice est un outil essentiel que vous pouvez cr\u00e9er pour mettre en pratique vos comp\u00e9tences en JavaScript. Dans ce tutoriel, nous allons apprendre \u00e0 cr\u00e9er une simple calculatrice \u00e9tape par \u00e9tape. Cette premi\u00e8re \u00e9tape se concentrera sur la mise en place du mode de calcul, permettant aux utilisateurs d&rsquo;effectuer des op\u00e9rations basiques comme l&rsquo;addition, la soustraction, la multiplication et la division.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Calculatrice Mode JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658882826?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPrice.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Cr\u00e9er une calculatrice en JavaScript est un projet parfait pour pratiquer les bases de la programmation en JavaScript. Nous allons d&rsquo;abord aborder la structure g\u00e9n\u00e9rale de notre calculatrice et mettre en place la logique de calcul. Avant de plonger dans le code, jetons un coup d&rsquo;\u0153il \u00e0 ce que nous allons construire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 1: D\u00e9finir la Structure HTML de la Calculatrice<\/h3>\n\n\n\n<p>Pour d\u00e9marrer, nous devons construire l&rsquo;interface utilisateur de notre calculatrice. Nous utiliserons un simple fichier HTML pour cr\u00e9er les boutons et l&rsquo;\u00e9cran de la calculatrice :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Calculatrice JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"calculator\"&gt;\n        &lt;input type=\"text\" class=\"calculator-screen\" disabled&gt;\n        &lt;div class=\"calculator-keys\"&gt;\n            &lt;button type=\"button\" class=\"operator\" value=\"+\"&gt;+&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"operator\" value=\"-\"&gt;-&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"operator\" value=\"*\"&gt;*&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"operator\" value=\"\/\"&gt;\/&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"7\"&gt;7&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"8\"&gt;8&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"9\"&gt;9&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"4\"&gt;4&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"5\"&gt;5&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"6\"&gt;6&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"1\"&gt;1&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"2\"&gt;2&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"3\"&gt;3&lt;\/button&gt;\n            &lt;button type=\"button\" value=\"0\"&gt;0&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"decimal\" value=\".\"&gt;.&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"all-clear\" value=\"all-clear\"&gt;AC&lt;\/button&gt;\n            &lt;button type=\"button\" class=\"equal-sign\" value=\"=\"&gt;=&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 2: Styles CSS pour l&rsquo;Apparence<\/h3>\n\n\n\n<p>Pour rendre notre calculatrice plus belle et fonctionnelle, ajoutons un peu de CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    margin: 0;\n    font-family: Arial, sans-serif;\n}\n\n.calculator {\n    border: 1px solid #333;\n    border-radius: 10px;\n    width: 300px;\n    padding: 10px;\n    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);\n}\n\n.calculator-screen {\n    width: 100%;\n    height: 50px;\n    font-size: 2em;\n    text-align: right;\n    border: none;\n    margin-bottom: 10px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.calculator-keys button {\n    width: 25%;\n    height: 60px;\n    font-size: 1.5em;\n    margin: 3px;\n    cursor: pointer;\n}\n\n.operator {\n    background-color: #f2a33c;\n}\n\n.equal-sign {\n    background-color: #4caf50;\n    color: #fff;\n}\n\n.all-clear {\n    background-color: #e74c3c;\n    color: #fff;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 3: Ajout du Mode de Calcul en JavaScript<\/h3>\n\n\n\n<p>Maintenant que nous avons l&rsquo;interface utilisateur pr\u00eate, nous allons ajouter la logique de calcul en JavaScript. Commen\u00e7ons par capturer les \u00e9v\u00e9nements des boutons et mettre en place les fonctions de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const calculator = document.querySelector('.calculator');\n    const keys = calculator.querySelector('.calculator-keys');\n    const display = calculator.querySelector('.calculator-screen');\n\n    keys.addEventListener('click', event => {\n        if (!event.target.matches('button')) return;\n\n        const key = event.target;\n        const action = key.value;\n        const displayedNum = display.value;\n        const previousKeyType = calculator.dataset.previousKeyType;\n\n        if (key.classList.contains('operator')) {\n            calculator.dataset.firstValue = displayedNum;\n            calculator.dataset.operator = action;\n            calculator.dataset.previousKeyType = 'operator';\n        }\n\n        if (key.classList.contains('decimal')) {\n            if (!displayedNum.includes('.')) {\n                display.value += '.';\n            }\n        }\n\n        if (key.classList.contains('all-clear')) {\n            display.value = '';\n        }\n\n        if (key.classList.contains('equal-sign')) {\n            const firstValue = calculator.dataset.firstValue;\n            const operator = calculator.dataset.operator;\n            const secondValue = displayedNum;\n\n            display.value = calculate(firstValue, operator, secondValue);\n        }\n\n        if (!key.classList.contains('operator') && !key.classList.contains('decimal') && !key.classList.contains('all-clear') && !key.classList.contains('equal-sign')) {\n            if (previousKeyType === 'operator') {\n                display.value = key.value;\n            } else {\n                display.value += key.value;\n            }\n        }\n\n        calculator.dataset.previousKeyType = action;\n    });\n\n    function calculate(first, operator, second) {\n        first = parseFloat(first);\n        second = parseFloat(second);\n\n        if (operator === '+') return first + second;\n        if (operator === '-') return first - second;\n        if (operator === '*') return first * second;\n        if (operator === '\/') return first \/ second;\n    }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tape 4: Am\u00e9lioration de l&rsquo;Exp\u00e9rience Utilisateur<\/h3>\n\n\n\n<p>Pour finaliser notre calculatrice, nous allons ajouter quelques am\u00e9liorations pour une meilleure exp\u00e9rience utilisateur comme la gestion des nombres d\u00e9cimaux et la r\u00e9initialisation des valeurs:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const calculator = document.querySelector('.calculator');\n    const keys = calculator.querySelector('.calculator-keys');\n    const display = calculator.querySelector('.calculator-screen');\n\n    keys.addEventListener('click', event => {\n        if (!event.target.matches('button')) return;\n\n        const key = event.target;\n        const action = key.value;\n        const displayedNum = display.value;\n        const previousKeyType = calculator.dataset.previousKeyType;\n\n        if (key.classList.contains('operator')) {\n            calculator.dataset.firstValue = displayedNum;\n            calculator.dataset.operator = action;\n            calculator.dataset.previousKeyType = 'operator';\n        }\n\n        if (key.classList.contains('decimal')) {\n            if (!displayedNum.includes('.')) {\n                display.value += '.';\n            } else if (previousKeyType === 'operator') {\n                display.value = '0.';\n            }\n        }\n\n        if (key.classList.contains('all-clear')) {\n            display.value = '';\n            calculator.dataset.firstValue = '';\n            calculator.dataset.modValue = '';\n            calculator.dataset.operator = '';\n            calculator.dataset.previousKeyType = '';\n        }\n\n        if (key.classList.contains('equal-sign')) {\n            const firstValue = calculator.dataset.firstValue;\n            const operator = calculator.dataset.operator;\n            const secondValue = displayedNum;\n\n            display.value = calculate(firstValue, operator, secondValue);\n        }\n\n        if (!key.classList.contains('operator') && !key.classList.contains('decimal') && !key.classList.contains('all-clear') && !key.classList.contains('equal-sign')) {\n            if (previousKeyType === 'operator') {\n                display.value = key.value;\n            } else if (previousKeyType === 'equal-sign') {\n                display.value = key.value;\n            } else {\n                display.value += key.value;\n            }\n        }\n\n        calculator.dataset.previousKeyType = action;\n    });\n\n    function calculate(first, operator, second) {\n        const firstNum = parseFloat(first);\n        const secondNum = parseFloat(second);\n\n        if (operator === '+') return firstNum + secondNum;\n        if (operator === '-') return firstNum - secondNum;\n        if (operator === '*') return firstNum * secondNum;\n        if (operator === '\/') return firstNum \/ secondNum;\n    }\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion de notre Projet Calculatrice JavaScript<\/h2>\n\n\n\n<p>Nous avons cr\u00e9\u00e9 une calculatrice basique en JavaScript, HTML, et CSS. Ce projet couvre les bases de la programmation JavaScript, la manipulation du DOM, et quelques aspects de la gestion des \u00e9v\u00e9nements. Pour approfondir, vous pouvez explorer d&rsquo;autres concepts tels que les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\" target=\"_blank\" rel=\"noopener\">fonctions JavaScript<\/a> et m\u00eame apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-parametres-a-une-fonction-javascript\" target=\"_blank\" rel=\"noopener\">ajouter des param\u00e8tres aux fonctions<\/a>. Une autre bonne id\u00e9e serait d&rsquo;apprendre comment <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-tableau-avec-concat-en-javascript\" target=\"_blank\" rel=\"noopener\">afficher des tableaux en JavaScript<\/a> et d&rsquo;utiliser des <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-condition-en-javascript\" target=\"_blank\" rel=\"noopener\">conditions en JavaScript<\/a> pour g\u00e9rer des sc\u00e9narios plus complexes.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>6.3 Calculatrice JavaScript &#8211; Une calculatrice est un outil essentiel que vous pouvez cr\u00e9er pour mettre en pratique vos comp\u00e9tences en JavaScript. Dans ce tutoriel,&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2854,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5594","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5594"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5594\/revisions"}],"predecessor-version":[{"id":5595,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5594\/revisions\/5595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2854"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}