{"id":5592,"date":"2024-08-28T23:28:36","date_gmt":"2024-08-28T23:28:36","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-bases\/"},"modified":"2024-08-28T23:28:38","modified_gmt":"2024-08-28T23:28:38","slug":"projet-calculatrice-javascript-bases","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-bases\/","title":{"rendered":"6.2 Projet Calculatrice JavaScript : Bases"},"content":{"rendered":"\n<p><strong>Calculatrice Base JavaScript<\/strong> &#8211; La cr\u00e9ation d&rsquo;une calculatrice en JavaScript est un excellent moyen de pratiquer vos comp\u00e9tences en programmation. Dans cet article, nous allons examiner les bases de la construction d&rsquo;une calculatrice en abordant la mise en place de l&rsquo;interface utilisateur, les fonctions JavaScript essentielles et le traitement des \u00e9v\u00e9nements. Suivez ce tutoriel et vous aurez une calculatrice fonctionnelle d&rsquo;ici la fin !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au Projet Calculatrice en JavaScript<\/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\/658882772?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&rsquo;offre 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 ? originalPriceElement.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>Dans ce projet, nous allons utiliser HTML, CSS et JavaScript pour cr\u00e9er une calculatrice simple mais fonctionnelle. En suivant les \u00e9tapes de ce tutoriel, vous apprendrez \u00e0 manipuler le DOM, g\u00e9rer les \u00e9v\u00e9nements utilisateur et \u00e9crire des fonctions JavaScript. Commen\u00e7ons par la mise en place des \u00e9l\u00e9ments de base.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en Place de l&rsquo;Interface Utilisateur<\/h3>\n\n\n\n<p>Pour commencer, nous allons cr\u00e9er la structure HTML de notre calculatrice. Cr\u00e9ez un fichier nomm\u00e9 <code>index.html<\/code> et ajoutez le code suivant :<\/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;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"calculator\"&gt;\n        &lt;div class=\"display\" id=\"display\"&gt;0&lt;\/div&gt;\n        &lt;div class=\"buttons\"&gt;\n            &lt;button class=\"btn\" id=\"clear\"&gt;C&lt;\/button&gt;\n            &lt;button class=\"btn\" id=\"equals\"&gt;=&lt;\/button&gt;\n            &lt;button class=\"btn\" id=\"plus\"&gt;+&lt;\/button&gt;\n            ...\n            &lt;!-- Ajoutez le reste des boutons ici --&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styling avec CSS<\/h3>\n\n\n\n<p>Pour donner un bon aspect visuel \u00e0 notre calculatrice, nous utiliserons CSS. Cr\u00e9ez un fichier nomm\u00e9 <code>styles.css<\/code> et ajoutez le code suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n    background-color: #f4f4f4;\n}\n\n.calculator {\n    width: 400px;\n    height: auto;\n    padding: 20px;\n    border-radius: 10px;\n    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);\n    background-color: white;\n}\n\n.display {\n    font-size: 2em;\n    padding: 10px;\n    background-color: #222;\n    color: white;\n    text-align: right;\n    border-radius: 5px;\n}\n\n.buttons {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 10px;\n    margin-top: 10px;\n}\n\n.btn {\n    padding: 20px;\n    font-size: 1.5em;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    background-color: #f4f4f4;\n    transition: background-color 0.2s;\n}\n\n.btn:hover {\n    background-color: #ddd;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Fonctionnalit\u00e9s avec JavaScript<\/h3>\n\n\n\n<p>Maintenant que notre interface utilisateur est pr\u00eate, ajoutons les fonctionnalit\u00e9s n\u00e9cessaires avec JavaScript. Cr\u00e9ez un fichier nomm\u00e9 <code>script.js<\/code> et commencez par s\u00e9lectionner les \u00e9l\u00e9ments HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const display = document.getElementById('display');\n    const buttons = Array.from(document.getElementsByClassName('btn'));\n    let currentInput = '';\n    let operator = null;\n    let previousInput = '';\n\n    buttons.map(button => {\n        button.addEventListener('click', (e) => {\n            const value = e.target.innerText;\n\n            if (value === 'C') {\n                display.innerText = '0';\n                currentInput = '';\n                operator = null;\n                previousInput = '';\n            } else if (value === '=') {\n                display.innerText = eval(previousInput + operator + currentInput);\n                currentInput = '';\n                operator = null;\n                previousInput = display.innerText;\n            } else if (['+', '-', '*', '\/'].includes(value)) {\n                operator = value;\n                previousInput = currentInput;\n                currentInput = '';\n            } else {\n                currentInput += value;\n                display.innerText = currentInput;\n            }\n        });\n    });\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester la Calculatrice<\/h3>\n\n\n\n<p>Il est maintenant temps de tester votre calculatrice ! Ouvrez <code>index.html<\/code> dans votre navigateur et v\u00e9rifiez que toutes les op\u00e9rations de base fonctionnent correctement. Vous pouvez \u00e9tendre ce projet en ajoutant des fonctionnalit\u00e9s suppl\u00e9mentaires comme la gestion des d\u00e9cimales, l&rsquo;ajout d&rsquo;un bouton de suppression, ou m\u00eame un th\u00e8me sombre.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s et Am\u00e9liorations<\/h3>\n\n\n\n<p>Pour rendre la calculatrice plus robuste et fonctionnelle, vous pouvez impl\u00e9menter des fonctions et am\u00e9liorations suppl\u00e9mentaires :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des Erreurs<\/h4>\n\n\n\n<p>Ajoutez une gestion des erreurs pour des entr\u00e9es incorrectes ou des divisions par z\u00e9ro :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const display = document.getElementById('display');\n    const buttons = Array.from(document.getElementsByClassName('btn'));\n    let currentInput = '';\n    let operator = null;\n    let previousInput = '';\n\n    buttons.map(button => {\n        button.addEventListener('click', (e) => {\n            const value = e.target.innerText;\n\n            try {\n                if (value === 'C') {\n                    display.innerText = '0';\n                    currentInput = '';\n                    operator = null;\n                    previousInput = '';\n                } else if (value === '=') {\n                    display.innerText = eval(previousInput + operator + currentInput);\n                    currentInput = '';\n                    operator = null;\n                    previousInput = display.innerText;\n                } else if (['+', '-', '*', '\/'].includes(value)) {\n                    operator = value;\n                    previousInput = currentInput;\n                    currentInput = '';\n                } else {\n                    currentInput += value;\n                    display.innerText = currentInput;\n                }\n            } catch (error) {\n                display.innerText = 'Erreur';\n                currentInput = '';\n                operator = null;\n                previousInput = '';\n            }\n        });\n    });\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajout de Fonctionnalit\u00e9s Suppl\u00e9mentaires<\/h4>\n\n\n\n<p>Vous pouvez \u00e9galement ajouter des fonctionnalit\u00e9s comme les calculs en cha\u00eene, les pourcentages ou encore un bouton de changement de signe (+\/-). Voici un exemple de code pour ajouter un bouton de pourcentage :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener('DOMContentLoaded', function() {\n    const display = document.getElementById('display');\n    const buttons = Array.from(document.getElementsByClassName('btn'));\n    let currentInput = '';\n    let operator = null;\n    let previousInput = '';\n\n    buttons.map(button => {\n        button.addEventListener('click', (e) => {\n            const value = e.target.innerText;\n\n            try {\n                if (value === 'C') {\n                    display.innerText = '0';\n                    currentInput = '';\n                    operator = null;\n                    previousInput = '';\n                } else if (value === '=') {\n                    display.innerText = eval(previousInput + operator + currentInput);\n                    currentInput = '';\n                    operator = null;\n                    previousInput = display.innerText;\n                } else if (value === '%') {\n                    currentInput = (parseFloat(currentInput) \/ 100).toString();\n                    display.innerText = currentInput;\n                } else if (['+', '-', '*', '\/'].includes(value)) {\n                    operator = value;\n                    previousInput = currentInput;\n                    currentInput = '';\n                } else {\n                    currentInput += value;\n                    display.innerText = currentInput;\n                }\n            } catch (error) {\n                display.innerText = 'Erreur';\n                currentInput = '';\n                operator = null;\n                previousInput = '';\n            }\n        });\n    });\n});\n<\/code><\/pre>\n\n\n\n<p>En int\u00e9grant ces fonctionnalit\u00e9s et en ajoutant des \u00e9l\u00e9ments personnalis\u00e9s, votre calculatrice JavaScript sera plus performante et user-friendly. Explorez davantage ce projet sur <a href=\"https:\/\/github.com\" target=\"_blank\" rel=\"noopener\">Github<\/a> ou d&rsquo;autres ressources en ligne pour perfectionner vos comp\u00e9tences. Apprenez \u00e9galement comment <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\">acc\u00e9der aux \u00e9l\u00e9ments du DOM en JavaScript<\/a> pour d&rsquo;autres projets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Cr\u00e9er une <strong>calculatrice en JavaScript<\/strong> est une excellente initiation aux bases de la programmation en JavaScript. Ce projet vous permet de travailler sur la manipulation du DOM, la gestion des \u00e9v\u00e9nements, et l&rsquo;\u00e9criture de fonctions JavaScript. Pour aller plus loin, consultez nos autres tutoriels sur les projets JavaScript avanc\u00e9s et continuez \u00e0 pratiquer pour devenir un d\u00e9veloppeur chevronn\u00e9. Pour plus de tutoriels sur JavaScript, explorez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>.<\/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-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<!-- Liens Internes -->\n<p>Pour aller plus loin dans l&rsquo;apprentissage du JavaScript, visitez aussi :\n<a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu\u2019est-ce que JavaScript : Explications et D\u00e9finition<\/a>, \n<a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">Les Meilleurs Outils pour","protected":false},"excerpt":{"rendered":"<p>Calculatrice Base JavaScript &#8211; La cr\u00e9ation d&rsquo;une calculatrice en JavaScript est un excellent moyen de pratiquer vos comp\u00e9tences en programmation. Dans cet article, nous allons&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5592","post","type-post","status-publish","format-standard","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\/5592","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=5592"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5592\/revisions"}],"predecessor-version":[{"id":5593,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5592\/revisions\/5593"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}