{"id":5845,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5845"},"modified":"2024-01-22T14:43:32","modified_gmt":"2024-01-22T09:43:32","slug":"simple-calculator-in-javascript-using-if-else","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/","title":{"rendered":"Simple Calculator in JavaScript using if else"},"content":{"rendered":"<p>This code snippet helps you to create a simple calculator with all basic calculations functions. It comes in a nice widget-style calculator app that can be easily integrated into any HTML webpage. This simple calculator program uses JavaScript if else statements to perform various\u00a0arithmetic operations.<\/p>\n<h2>How to Create Simple Calculator in JavaScript<\/h2>\n<p>1. First of all, create a div element with a class name and id &#8220;screen&#8221; and place a blank p tag inside it. Similarly, create a div element with a class and id &#8220;screen&#8221;. Create an unordered list of buttons and specify its class name &#8220;number-div&#8221;. Wrap all these elements into a div element and define its class name &#8220;main-div&#8221;. So, the complete HTML structure for a simple calculator is as follows:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class=\"main-div\"&gt;\r\n    &lt;div class=\"screen\" id=\"screen\"&gt;&lt;p&gt;&lt;\/p&gt;&lt;\/div&gt;\r\n    &lt;div class=\"clear\" id=\"clear\"&gt;C&lt;\/div&gt;\r\n       &lt;ul class=\"number-div\"&gt;\r\n                 &lt;li&gt;1&lt;\/li&gt;\r\n                 &lt;li&gt;2&lt;\/li&gt;\r\n                 &lt;li&gt;3&lt;\/li&gt;\r\n                 &lt;li&gt;+&lt;\/li&gt;\r\n                 &lt;li&gt;4&lt;\/li&gt;\r\n                 &lt;li&gt;5&lt;\/li&gt;\r\n                 &lt;li&gt;6&lt;\/li&gt;\r\n                 &lt;li&gt;x&lt;\/li&gt;\r\n                 &lt;li&gt;7&lt;\/li&gt;\r\n                 &lt;li&gt;8&lt;\/li&gt;\r\n                 &lt;li&gt;9&lt;\/li&gt;\r\n                 &lt;li&gt;-&lt;\/li&gt;\r\n                 &lt;li&gt;0&lt;\/li&gt;\r\n                 &lt;li&gt;.&lt;\/li&gt;\r\n                 &lt;li id=\"equals\"&gt;=&lt;\/li&gt;\r\n                 &lt;li&gt;\u00f7&lt;\/li&gt;\r\n       &lt;\/ul&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>2. In the second step, target each element in CSS and define their styles as follows. You can set the custom values for CSS properties in order to customize the calculator. Therefore, the following are the CSS styles for the calculator.<\/p>\n<pre class=\"prettyprint linenums lang-css\">.main-div{\r\n\t width:290px;\r\n\t margin:0 auto;\r\n\t background:#3F475B;\r\n\t height:310px;\r\n\t box-shadow:2px 2px 2px gray;\r\n\t padding:15px;\r\n\t border-bottom:5px solid #ED586C;\r\n     border-radius:4px;\t\r\n    position:relative;\t \r\n}\r\n.screen-div,.number-div{\r\n\t  padding:0;\r\n\t  margin:0;\r\n}\r\n.screen{\r\n\tlist-style:none;\r\n\tcolor:white;\r\n\theight:45px;\r\n\twidth:58px;\r\n  margin-left:8px;\r\n\tborder-radius:4px;\r\n\tborder-top:4px solid #828A9B;\r\n\ttext-align:center;\r\n\tfont-weight:bold;\r\n\tfont-family: 'Ubuntu', sans-serif;\r\n\tmargin-bottom:8px;\r\n  width:182px;\r\n\tbackground:#828A9B;\r\n   border-top:4px solid #ED586C;\r\n  overflow:hidden;\r\n}\r\n.clear{\r\n    width:60px;\r\n\tbackground:#7B8D8E;\r\n\tpadding:10px 17px;\r\n\tposition:absolute;\r\n\tborder-radius:3px;\r\n\tleft:215px;\r\n\ttop:18px;\r\n\tcolor:white;\r\n\tcursor:pointer;\r\n\ttext-align:center;\r\n}\r\n.screen{\r\n  p{\r\n    margin: 0;\r\n  }\r\n}\r\n.number-div li{\r\n\t list-style:none;\r\n\t float:left;\r\n     width:52px;\r\n    background:white;\r\n\tmargin:9px 5px;\r\n\tpadding:10px;\r\n\tborder-bottom:4px solid #828A9B;\r\n\tborder-radius:5px;\r\n\tcolor:#888888;\r\n\ttext-align:center;\r\n\ttransition:.2s;\r\n\tcursor:pointer;\r\n}\r\n\r\n.number-div li:hover{\r\n\tbackground: #44B3C2;\r\n\tborder-bottom: 4px solid #336699;\r\n\tcolor: white;\r\n}\r\n\r\n#equals{\r\n\tbackground:#F43341;\r\n\tcolor:white;\r\n}\r\n#equals:hover{\r\n\tbackground: #FE5E6A;\r\n\tborder-bottom: 4px solid #B3232E;\r\n\tcolor: white;\r\n}\r\n<\/pre>\n<p>3. Finally, add the following JavaScript program that uses if else statements to calculate integers and float values.<\/p>\n<pre class=\"prettyprint linenums lang-js\">window.onload = function (){\r\n\tvar elements = document.getElementsByTagName(\"li\");\r\n\tvar screen = document.querySelectorAll('#screen p')[0];\r\n\tvar clear =   document.getElementsByClassName('clear')[0];\r\n\t\r\n\tfor(var i=0;i&lt;elements.length;i+=1){\r\n\t\t  if(elements[i].innerHTML === '='){\r\n\t\t\t    elements[i].addEventListener(\"click\", calculate(i));\r\n\t\t  }else{\r\n\t\t\t   elements[i].addEventListener(\"click\", addtocurrentvalue(i));\r\n\t\t  }\r\n\t}\r\n\r\n\tfunction addtocurrentvalue (i){\r\n\t\treturn function(){\r\n\t\t\tif (elements[i].innerHTML === \"\u00f7\") {\r\n               screen.innerHTML  +=  \"\/ \" ;\r\n      }else if(elements[i].innerHTML === \"x\"){\r\n\t\t\t      screen.innerHTML += \"*\";\r\n\t\t   } else{\r\n\t\t\t   screen.innerHTML  += elements[i].innerHTML;\r\n\t\t   }\r\n\t  };\r\n   }\r\n   clear.onclick = function () {\r\n    screen.innerHTML = '';\r\n  }; \r\n\r\n function calculate(i) {\r\n    return function () {\r\n        screen.innerHTML = eval(screen.innerHTML);\r\n    };\r\n  }\r\n};\r\n<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created a simple Calculator in JavaScript using if else statements. If you have any questions or suggestions, let me know by comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code snippet helps you to create a simple calculator with all basic calculations functions. It comes in a nice&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5864,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[216],"class_list":["post-5845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3","tag-calculator"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Simple Calculator in JavaScript using if else &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a simple calculator in JavaScript using if else statements. You can view demo and download code for your projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Calculator in JavaScript using if else &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a simple calculator in JavaScript using if else statements. You can view demo and download code for your projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:43:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"962\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Simple Calculator in JavaScript using if else\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\"},\"wordCount\":218,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png\",\"keywords\":[\"Calculator\"],\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\",\"name\":\"Simple Calculator in JavaScript using if else &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:32+00:00\",\"description\":\"Here is a simple calculator in JavaScript using if else statements. You can view demo and download code for your projects.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png\",\"width\":1280,\"height\":962,\"caption\":\"Simple Calculator in JavaScript using if else\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple Calculator in JavaScript using if else\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Calculator in JavaScript using if else &#8212; CodeHim","description":"Here is a simple calculator in JavaScript using if else statements. You can view demo and download code for your projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/","og_locale":"en_US","og_type":"article","og_title":"Simple Calculator in JavaScript using if else &#8212; CodeHim","og_description":"Here is a simple calculator in JavaScript using if else statements. You can view demo and download code for your projects.","og_url":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:43:32+00:00","og_image":[{"width":1280,"height":962,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Simple Calculator in JavaScript using if else","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:32+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/"},"wordCount":218,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png","keywords":["Calculator"],"articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/","url":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/","name":"Simple Calculator in JavaScript using if else &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:32+00:00","description":"Here is a simple calculator in JavaScript using if else statements. You can view demo and download code for your projects.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/12\/simple-calculator-in-javascript-using-if-else-1.png","width":1280,"height":962,"caption":"Simple Calculator in JavaScript using if else"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/simple-calculator-in-javascript-using-if-else\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Simple Calculator in JavaScript using if else"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":15101,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=5845"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5845\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/5864"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=5845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=5845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=5845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}