{"id":5590,"date":"2024-08-28T23:24:30","date_gmt":"2024-08-28T23:24:30","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\/"},"modified":"2024-08-28T23:24:33","modified_gmt":"2024-08-28T23:24:33","slug":"projet-calculatrice-javascript-objectifs","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\/","title":{"rendered":"6.1 Projet Calculatrice JavaScript : Objectifs"},"content":{"rendered":"\n<p><strong>Calculatrice Projet JavaScript<\/strong> est une excellente opportunit\u00e9 pour renforcer vos comp\u00e9tences en programmation. En construisant votre propre calculatrice, vous apprendrez non seulement les bases de JavaScript, mais aussi comment manipuler le Document Object Model (DOM) et rendre vos applications interactives et utiles. Plongeons dans ce projet \u00e9tape par \u00e9tape pour que vous puissiez suivre et cr\u00e9er votre propre calculatrice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Calculatrice Projet 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\/658882712?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 ? 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>Le Calculatrice Projet JavaScript nous permet de mieux comprendre la manipulation du DOM, l&rsquo;interaction utilisateur et la gestion des \u00e9v\u00e9nements en JavaScript. Ce tutoriel vous guidera \u00e9tape par \u00e9tape pour cr\u00e9er une calculatrice fonctionnelle et esth\u00e9tique. Vous pouvez \u00e9galement voir les <a href=\"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-bases\" target=\"_blank\" rel=\"noopener\">bases du projet calculatrice en JavaScript<\/a> pour plus de d\u00e9tails.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structurer le Projet (HTML)<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er le squelette de la calculatrice en HTML. Nous aurons un conteneur principal, un affichage et une s\u00e9rie de boutons pour les chiffres et les op\u00e9rations arithm\u00e9tiques. Voici \u00e0 quoi ressemblera notre code HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!-- index.html --&gt;\n&lt;!doctype html&gt;\n&lt;html lang=\"en\"&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=\"style.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"calculator\"&gt;\n    &lt;div class=\"display\"&gt;0&lt;\/div&gt;\n    &lt;div class=\"buttons\"&gt;\n      &lt;button&gt;7&lt;\/button&gt;\n      &lt;button&gt;8&lt;\/button&gt;\n      &lt;button&gt;9&lt;\/button&gt;\n      &lt;button&gt;\/&lt;\/button&gt;\n      &lt;button&gt;4&lt;\/button&gt;\n      &lt;button&gt;5&lt;\/button&gt;\n      &lt;button&gt;6&lt;\/button&gt;\n      &lt;button&gt;*&lt;\/button&gt;\n      &lt;button&gt;1&lt;\/button&gt;\n      &lt;button&gt;2&lt;\/button&gt;\n      &lt;button&gt;3&lt;\/button&gt;\n      &lt;button&gt;-&lt;\/button&gt;\n      &lt;button&gt;0&lt;\/button&gt;\n      &lt;button&gt;.&lt;\/button&gt;\n      &lt;button&gt;C&lt;\/button&gt;\n      &lt;button&gt;+&lt;\/button&gt;\n      &lt;button&gt;=&lt;\/button&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\">Styliser la Calculatrice (CSS)<\/h3>\n\n\n\n<p>Pour rendre notre calculatrice plus attrayante, nous ajouterons un peu de CSS. Le fichier CSS formatte la disposition des boutons, l&rsquo;\u00e9cran de la calculatrice, et assure que tout est bien align\u00e9. Si vous souhaitez approfondir vos connaissances sur les outils JavaScript, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* style.css *\/\nbody {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  background: #f0f0f0;\n}\n\n.calculator {\n  border-radius: 10px;\n  overflow: hidden;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n}\n\n.display {\n  background: #333;\n  color: #fff;\n  font-size: 2em;\n  text-align: right;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.buttons {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n}\n\nbutton {\n  background: #fff;\n  border: 1px solid #ddd;\n  font-size: 1.5em;\n  padding: 20px;\n  cursor: pointer;\n}\n\nbutton:active {\n  background: #ddd;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter la Logique (JavaScript)<\/h3>\n\n\n\n<p>Maintenant que nous avons notre interface utilisateur, il est temps d&rsquo;ajouter la logique avec JavaScript. Nous allons g\u00e9rer les \u00e9v\u00e9nements des boutons pour effectuer des calculs et mettre \u00e0 jour l&rsquo;affichage en cons\u00e9quence. Vous pourriez trouver utile de lire notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-debugueur-en-javascript\" target=\"_blank\" rel=\"noopener\">guide sur l&rsquo;utilisation du d\u00e9bogueur en JavaScript<\/a> pour vous aider \u00e0 rep\u00e9rer les erreurs.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ script.js\ndocument.addEventListener('DOMContentLoaded', function() {\n  const buttons = document.querySelectorAll('.buttons button');\n  const display = document.querySelector('.display');\n  let currentInput = '0';\n  let firstOperand = null;\n  let operator = null;\n  let shouldResetDisplay = false;\n\n  buttons.forEach(button => {\n    button.addEventListener('click', () => {\n      const value = button.textContent;\n\n      if (value === 'C') {\n        resetCalculator();\n        return;\n      }\n\n      if (value === '=') {\n        evaluate();\n        return;\n      }\n\n      if (['\/', '*', '-', '+'].includes(value)) {\n        handleOperator(value);\n        return;\n      }\n\n      handleNumber(value);\n    });\n  });\n\n  function resetCalculator() {\n    currentInput = '0';\n    firstOperand = null;\n    operator = null;\n    shouldResetDisplay = false;\n    updateDisplay();\n  }\n\n  function handleNumber(value) {\n    if (currentInput === '0' || shouldResetDisplay) {\n      currentInput = value;\n      shouldResetDisplay = false;\n    } else {\n      currentInput += value;\n    }\n    updateDisplay();\n  }\n\n  function handleOperator(value) {\n    if (operator !== null && !shouldResetDisplay) {\n      evaluate();\n    }\n    firstOperand = parseFloat(currentInput);\n    operator = value;\n    shouldResetDisplay = true;\n  }\n\n  function evaluate() {\n    if (operator === null || shouldResetDisplay) {\n      return;\n    }\n\n    const secondOperand = parseFloat(currentInput);\n    let result = 0;\n\n    switch (operator) {\n      case '\/':\n        result = firstOperand \/ secondOperand;\n        break;\n      case '*':\n        result = firstOperand * secondOperand;\n        break;\n      case '-':\n        result = firstOperand - secondOperand;\n        break;\n      case '+':\n        result = firstOperand + secondOperand;\n        break;\n    }\n\n    currentInput = result.toString();\n    operator = null;\n    shouldResetDisplay = true;\n    updateDisplay();\n  }\n\n  function updateDisplay() {\n    display.textContent = currentInput;\n  }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Fonctionnalit\u00e9s Avanc\u00e9es<\/h3>\n\n\n\n<p>Pour rendre notre calculatrice encore plus puissante, ajoutons des fonctionnalit\u00e9s avanc\u00e9es telles que la gestion des d\u00e9cimales et des erreurs. Pour continuer \u00e0 explorer des concepts avanc\u00e9s, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-objet-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;objets en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajout des fonctionnalit\u00e9s suppl\u00e9mentaires dans script.js\ndocument.addEventListener('DOMContentLoaded', function() {\n  const buttons = document.querySelectorAll('.buttons button');\n  const display = document.querySelector('.display');\n  let currentInput = '0';\n  let firstOperand = null;\n  let operator = null;\n  let shouldResetDisplay = false;\n\n  buttons.forEach(button => {\n    button.addEventListener('click', () => {\n      const value = button.textContent;\n\n      if (value === 'C') {\n        resetCalculator();\n        return;\n      }\n\n      if (value === '=') {\n        evaluate();\n        return;\n      }\n\n      if (['\/', '*', '-', '+'].includes(value)) {\n        handleOperator(value);\n        return;\n      }\n\n      if (value === '.') {\n        handleDecimal();\n        return;\n      }\n\n      handleNumber(value);\n    });\n  });\n\n  function resetCalculator() {\n    currentInput = '0';\n    firstOperand = null;\n    operator = null;\n    shouldResetDisplay = false;\n    updateDisplay();\n  }\n\n  function handleNumber(value) {\n    if (currentInput === '0' || shouldResetDisplay) {\n      currentInput = value;\n      shouldResetDisplay = false;\n    } else {\n      currentInput += value;\n    }\n    updateDisplay();\n  }\n\n  function handleOperator(value) {\n    if (operator !== null && !shouldResetDisplay) {\n      evaluate();\n    }\n    firstOperand = parseFloat(currentInput);\n    operator = value;\n    shouldResetDisplay = true;\n  }\n\n  function handleDecimal() {\n    if (shouldResetDisplay) {\n      currentInput = '0.';\n      shouldResetDisplay = false;\n    } else if (!currentInput.includes('.')) {\n      currentInput += '.';\n    }\n    updateDisplay();\n  }\n\n  function evaluate() {\n    if (operator === null || shouldResetDisplay) {\n      return;\n    }\n\n    const secondOperand = parseFloat(currentInput);\n    let result;\n\n    switch (operator) {\n      case '\/':\n        if (secondOperand === 0) {\n          alert(\"Erreur : Division par z\u00e9ro\");\n          resetCalculator();\n          return;\n        }\n        result = firstOperand \/ secondOperand;\n        break;\n      case '*':\n        result = firstOperand * secondOperand;\n        break;\n      case '-':\n        result = firstOperand - secondOperand;\n        break;\n      case '+':\n        result = firstOperand + secondOperand;\n        break;\n      default:\n        return;\n    }\n\n    currentInput = result.toString();\n    operator = null;\n    shouldResetDisplay = true;\n    updateDisplay();\n  }\n\n  function updateDisplay() {\n    display.textContent = currentInput;\n  }\n});\n<\/code><\/pre>\n\n\n\n<p>Continuez \u00e0 am\u00e9liorer votre projet en personnalisant le design, en ajoutant des fonctionnalit\u00e9s comme un historique de calculs, ou en rendant votre calculatrice r\u00e9active pour une utilisation sur mobiles. Vous pourriez aussi explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-existantes-en-javascript\" target=\"_blank\" rel=\"noopener\">fonctions existantes en JavaScript<\/a> pour enrichir vos comp\u00e9tences.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Cr\u00e9er une <strong>Calculatrice JavaScript<\/strong> est un excellent moyen de pratiquer vos comp\u00e9tences en programmation et d&rsquo;approfondir votre compr\u00e9hension de JavaScript. En suivant ce tutoriel, vous avez appris \u00e0 structurer un projet, \u00e0 manipuler le DOM et \u00e0 g\u00e9rer des \u00e9v\u00e9nements. Continuez \u00e0 explorer et \u00e9tendre vos connaissances en JavaScript pour construire des projets encore plus ambitieux","protected":false},"excerpt":{"rendered":"<p>Calculatrice Projet JavaScript est une excellente opportunit\u00e9 pour renforcer vos comp\u00e9tences en programmation. En construisant votre propre calculatrice, vous apprendrez non seulement les bases de&#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-5590","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\/5590","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=5590"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5590\/revisions"}],"predecessor-version":[{"id":5591,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5590\/revisions\/5591"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}