{"id":21446,"date":"2022-11-21T14:13:58","date_gmt":"2022-11-21T08:43:58","guid":{"rendered":"https:\/\/copyassignment.com\/?p=21446"},"modified":"2022-11-21T14:14:01","modified_gmt":"2022-11-21T08:44:01","slug":"calculator-in-html-css-javascript","status":"publish","type":"post","link":"https:\/\/copyassignment.com\/calculator-in-html-css-javascript\/","title":{"rendered":"Calculator in HTML CSS JavaScript"},"content":{"rendered":"\n<p>Today, we will be making a simple Calculator in HTML CSS JavaScript, where we can use the app to do basic arithmetic calculations. We will be using simple HTML and some basic javascript to get the job done.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-9886351916045880\" data-ad-slot=\"2002566052\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p>We will use JavaScript to calculate and display the result.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Requirements<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Code Editor (VS Code Preferred)<\/li>\n\n\n\n<li>Chromium Browser (Chrome Preferred)<\/li>\n\n\n\n<li>Basic Knowledge of HTML, CSS, Javascript, and Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Performing simple mathematical calculations<\/li>\n\n\n\n<li>Error handling in case of wrong expressions<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Folder Structure<\/h2>\n\n\n\n<p>We will be using HTML, CSS, BootStrap, and JavaScript for developing\u00a0a simple Calculator. Check out this image for the folder structure of our project.<\/p>\n\n\n\n<p>The project will include three files, <strong>index.html,<\/strong> <strong>index.js<\/strong>, and <strong>style.css<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" data-src=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-21-133717.jpg\" alt=\"folder structure for project\" class=\"wp-image-21447 lazyload\" width=\"287\" height=\"132\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 287px; --smush-placeholder-aspect-ratio: 287\/132;\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p><strong>index.html contains our Html code.<\/strong><\/p>\n\n\n\n<p><strong>style.css has been used to style our web page.<\/strong><\/p>\n\n\n\n<p><strong>logic.js contains all the logic.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Coding Calculator in HTML CSS JavaScript<\/h2>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-9886351916045880\" data-ad-slot=\"2002566052\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\">HTML Code<\/h3>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"html\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">&lt;!DOCTYPE html>\r\n&lt;html lang=\"en\">\r\n \r\n&lt;head>\r\n    &lt;meta charset=\"UTF-8\">\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n    &lt;link rel=\"stylesheet\" href=\"style.css\">\r\n    &lt;title>Calculator&lt;\/title>\r\n&lt;\/head>\r\n \r\n&lt;body>\r\n    &lt;div class=\"container\">\r\n        &lt;h1>Simple Calculator&lt;\/h1>\r\n \r\n        &lt;div class=\"calculator\">\r\n            &lt;input type=\"text\" name=\"screen\" id=\"display\">\r\n            &lt;table>\r\n                &lt;tr>\r\n                    &lt;td>&lt;button>(&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>)&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>C&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>=&lt;\/button>&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td>&lt;button>9&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>8&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>7&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>+&lt;\/button>&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td>&lt;button>6&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>5&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>4&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>-&lt;\/button>&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td>&lt;button>3&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>2&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>1&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>X&lt;\/button>&lt;\/td>\r\n                &lt;\/tr>\r\n                &lt;tr>\r\n                    &lt;td>&lt;button>0&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>.&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>%&lt;\/button>&lt;\/td>\r\n                    &lt;td>&lt;button>\/&lt;\/button>&lt;\/td>\r\n                &lt;\/tr>\r\n            &lt;\/table>\r\n        &lt;\/div>\r\n    &lt;\/div>\r\n \r\n&lt;\/body>\r\n&lt;script src=\"index.js\">&lt;\/script>\r\n \r\n&lt;\/html><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\">JavaScript Code<\/h3>\n\n\n\n<p>To do most of the calculations and detect user input we will take help from this loop, also we will try to catch errors when using the eval function in js, so we used a try-catch block.<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"javascript\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">let screen = document.getElementById(\"display\");\r\nbuttons = document.querySelectorAll(\"button\");\r\nlet screenValue = \"\";\r\nfor (item of buttons) {\r\n  item.addEventListener(\"click\", (e) => {\r\n    buttonText = e.target.innerText;\r\n    if (buttonText == \"X\") {\r\n      buttonText = \"*\";\r\n      screenValue += buttonText;\r\n      screen.value = screenValue;\r\n    } else if (buttonText == \"C\") {\r\n      screenValue = \"\";\r\n      screen.value = screenValue;\r\n    } else if (buttonText == \"=\") {\r\n      var result;\r\n      try {\r\n        result = eval(screenValue);\r\n      } catch (error) {\r\n        result = \"Expression error\";\r\n      }\r\n      screen.value = result;\r\n    } else {\r\n      screenValue += buttonText;\r\n      screen.value = screenValue;\r\n    }\r\n  });\r\n}<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\">CSS code<\/h3>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"css\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">.container{\r\n    text-align: center;\r\n    margin-top:23px\r\n}\r\n \r\ntable{\r\n    margin: auto;\r\n}\r\n \r\ninput{\r\n    border-radius: 21px;\r\n    font-size:34px;\r\n    height: 65px;\r\n    width: 260px;\r\n    scroll-behavior: smooth;\r\n}\r\n \r\nbutton{\r\n    border-radius: 20px;\r\n    font-size: 20px;\r\n    background: #ffffff;\r\n    width: 60px;\r\n    height: 50px;\r\n    margin: 6px;\r\n}\r\n \r\n.calculator{\r\n    background-color: #161616;\r\n    padding: 23px;\r\n    border-radius: 53px;\r\n    display: inline-block;\r\n   \r\n}<\/pre><\/div>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-9886351916045880\" data-ad-slot=\"2002566052\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Output:<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" data-src=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-21-134836.jpg\" alt=\"output for Calculator in HTML CSS JavaScript\" class=\"wp-image-21449 lazyload\" width=\"496\" height=\"550\" data-srcset=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-21-134836.jpg 606w, https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-21-134836-271x300.jpg 271w\" data-sizes=\"(max-width: 496px) 100vw, 496px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 496px; --smush-placeholder-aspect-ratio: 496\/550;\" \/><\/figure>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-9886351916045880\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"autorelaxed\"\n     data-ad-client=\"ca-pub-9886351916045880\"\n     data-ad-slot=\"7933252109\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>I hope this was easy to understand Calculator in HTML CSS JavaScript and that you enjoyed building and learning this at the same time. Along the way, we did some basic dom-manipulation to change the text of the UI, and we also learned to handle exceptions in javascript.<\/p>\n\n\n\n<div style=\"text-align:center\" class=\"wp-block-atomic-blocks-ab-button ab-block-button\"><a href=\"https:\/\/copyassignment.com\/?s=javascript\" class=\"ab-button ab-button-shape-rounded ab-button-size-medium\" style=\"color:#ffffff;background-color:#3373dc\">JavaScript and web Projects<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Also Read:<\/strong><\/p>\n\n\n<ul class=\"wp-block-latest-posts__list is-grid columns-3 wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/what-is-web-development-for-beginners\/\">What is web development for beginners?<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/chat-app-with-nodejs-and-socket-io\/\">Chat App with Node.js and Socket.io<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/draw-doraemon-using-html-and-css\/\">Draw Doraemon using HTML and CSS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/draw-house-using-html-and-css\/\">Draw House using HTML and CSS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/draw-dog-using-css\/\">Draw Dog using CSS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/rock-paper-scissor-in-html-css-javascript\/\">Rock Paper Scissor in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/pong-game-in-html-and-javascript\/\">Pong Game in HTML and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/tip-calculator-in-html-and-javascript\/\">Tip Calculator in HTML and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/calculator-in-html-css-javascript\/\">Calculator in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/bmi-calculator-in-html-css-javascript\/\">BMI Calculator in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/color-picker-in-html-and-javascript\/\">Color picker in HTML and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/number-guessing-game-in-javascript\/\">Number Guessing Game in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/atm-in-javascript\/\">ATM in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/inventory-management-system-in-javascript\/\">Inventory Management System in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/courier-tracking-system-in-html-css-and-js\/\">Courier Tracking System in HTML CSS and JS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/word-count-app-in-javascript\/\">Word Count App in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/to-do-list-in-html-css-javascript\/\">To-Do List in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/tic-tac-toe-game-in-javascript\/\">Tic-Tac-Toe game in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/music-player-using-html-css-and-javascript\/\">Music player using HTML CSS and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/happy-diwali-in-javascript\/\">Happy Diwali in JavaSCript<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Today, we will be making a simple Calculator in HTML CSS JavaScript, where we can use the app to do basic arithmetic calculations. We will&#8230;<\/p>\n","protected":false},"author":62,"featured_media":21451,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,1939,1941],"tags":[],"class_list":["post-21446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allcategorites","category-html-css-javascript-project","category-web-projects","wpcat-22-id","wpcat-1939-id","wpcat-1941-id"],"_links":{"self":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/posts\/21446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/comments?post=21446"}],"version-history":[{"count":0,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/posts\/21446\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/media\/21451"}],"wp:attachment":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/media?parent=21446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/categories?post=21446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/tags?post=21446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}