{"id":58,"date":"2017-02-19T21:55:08","date_gmt":"2017-02-19T16:25:08","guid":{"rendered":"http:\/\/designedbyashw.in\/blog\/?p=58"},"modified":"2017-05-04T19:35:19","modified_gmt":"2017-05-04T19:35:19","slug":"get-your-first-webpage-online-for-free-part-1","status":"publish","type":"post","link":"https:\/\/designedbyashw.in\/blog\/blog\/2017\/02\/19\/get-your-first-webpage-online-for-free-part-1\/","title":{"rendered":"Build your first Web App and get it online for free! Part 1"},"content":{"rendered":"<p>This article is part one of \u00a0a two part article series on how to get your first web app up and running online for the world to see!!<\/p>\n<p>In <strong>part one<\/strong> we will look at how to first build the app that we want to publish online, and in <strong>part two<\/strong> we will look at the various ways we can get this article online and how to actually do it and share it with the world. If you already know how to build apps and only have a need for how to get them online, skip part one and directly refer to the next article. So lets get started. This is the app we will be building&#8230;<\/p>\n<p class='codepen'  data-height='565' data-theme-id='dark' data-slug-hash='apgbXO' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen <a href=\u2019http:\/\/codepen.io\/Werty7098\/pen\/apgbXO\/\u2019>Material Design Calculator<\/a> by Ashwin P Chandran (<a href=\u2019http:\/\/codepen.io\/Werty7098\u2032>@Werty7098<\/a>) on <a href=\u2019http:\/\/codepen.io\u2019>CodePen<\/a>.dark<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<p><!--more--><\/p>\n<p>&nbsp;<\/p>\n<p>We will be building the very simple calculator app as seen above. These are the steps involved:<\/p>\n<ol>\n<li>Create Files<\/li>\n<li>Create Basic HTML Markup<\/li>\n<li>Style it with a lil CSS<\/li>\n<li>Add functionality to it with Javascript<\/li>\n<li>Go to part 2 to get the app live online for the world to see<\/li>\n<\/ol>\n<h2>Step 1: Create Files<\/h2>\n<p>So to create files lets first <strong>create a folder<\/strong> named &#8220;calc&#8221;\u00a0on our desktop. In it we will create <strong>3 files<\/strong> needed to get our app to work. They are:<\/p>\n<ol>\n<li>index.html &#8211; To hold together our markup or app structure<\/li>\n<li>style.css &#8211; To maintain all styling rules<\/li>\n<li>calc.js &#8211; To program our app functionality<\/li>\n<\/ol>\n<p>Now only\u00a0index.html has to be named exactly the same as this is what our solution to go online will look for as the starting point, the other two maybe names any other name but for the purpose of simplicity, lets stick to the naming convention.<\/p>\n<p>Now the entire process will be much easier if you have a text editing app such as Atom or Sublime Text, but nevertheless if you are stuck with text edit, follow the steps below to create the files.<\/p>\n<p><strong>On Windows:<\/strong><br \/>\n1. Right click anywhere inside the empty folder, and click on the &#8220;New&#8221; option. \u00a0 \u00a0 2. Under this option, click the &#8220;Text Document&#8221; option but rename it to match our filenames and extensions.<\/p>\n<p><strong>On the Mac<\/strong>, its slightly harder as it does not provide such a straightforward way to create a new file.<br \/>\n1. Open Text Edit and click &#8220;New Document&#8221;<br \/>\n2. Save the document in the &#8220;calc&#8221; folder with correct filename and extension as mentioned above<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-111\" src=\"http:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-19-at-10.19.45-PM-300x170.png\" alt=\"\" width=\"300\" height=\"170\" srcset=\"https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-19-at-10.19.45-PM-300x170.png 300w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-19-at-10.19.45-PM-768x436.png 768w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-19-at-10.19.45-PM-1024x582.png 1024w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-19-at-10.19.45-PM.png 1542w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<h2>Step 2: Make the structure (HTML)<\/h2>\n<p>Now lets work on our first file. Open\u00a0<span class=\"lang:default decode:true crayon-inline\">index.html<\/span><strong>\u00a0<\/strong>with any text editor such as notepad, atom, visual studio code, sublime text, etc. Here we will start to write our first code!<\/p>\n<p>Now HTML is a markup language. It is used to define how the structure of the page should be. It uses tags to differentiate between the apps various components. Below is a basic layout of a HTML5 page. Type\/Copy the code below into the <span class=\"lang:default decode:true crayon-inline\">index.html<\/span>\u00a0 file.<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Basic HTML5 Markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;Document&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    \r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Now lets breakdown the above code:<\/p>\n<ul>\n<li>The first line is\u00a0used to indicate to the browser that the file is of HTML5 specifications.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline\">&lt;head&gt;<\/span>\u00a0tag is not rendered on the screen. It is used to store the pages metadata and load various external files for the page.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">&lt;body&gt;<\/span>\u00a0\u00a0tag will contain all the components to be rendered on the page.<\/li>\n<li>Both the body and head tag must always be enclosed by a <span class=\"lang:default decode:true crayon-inline \">&lt;html&gt;<\/span>\u00a0 tag and all tags must either be closed with a closing tag such as <span class=\"lang:default decode:true crayon-inline \">&lt;\/html&gt;<\/span>\u00a0 with the <span class=\"lang:default decode:true crayon-inline \">\/<\/span>\u00a0 symbol, or be self closing like in the case of the input tag.<\/li>\n<\/ul>\n<p>For more information on HTML look at the references at the end of this article.<\/p>\n<p>Now lets populate the\u00a0<span class=\"lang:default decode:true crayon-inline\">index.html<\/span>\u00a0file with content:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"calculator markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"&gt;\r\n    &lt;title&gt;Calculator&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;div id=\"calculator\"&gt;\r\n        &lt;div id=\"screen\"&gt;\r\n            &lt;div id=\"expression\"&gt;&lt;\/div&gt;\r\n            &lt;div id=\"answer\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"number-container\"&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('7')\"&gt;7&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('8')\"&gt;8&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('9')\"&gt;9&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('4')\"&gt;4&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('5')\"&gt;5&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('6')\"&gt;6&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('1')\"&gt;1&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('2')\"&gt;2&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('3')\"&gt;3&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('.')\"&gt;.&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertDigit('0')\"&gt;0&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"calc()\"&gt;=&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"operation-container\"&gt;\r\n            &lt;div class=\"button\" onclick=\"clearScreen()\"&gt;DEL&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertOperation('+')\"&gt;+&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertOperation('-')\"&gt;-&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertOperation('*')\"&gt;x&lt;\/div&gt;\r\n            &lt;div class=\"button\" onclick=\"insertOperation('\/')\"&gt;\u00f7&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;script src=\"calc.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Now we have added the structural components to realise our calculator app. Lets breakdown what we have added to our\u00a0<span class=\"lang:default decode:true crayon-inline\">index.html<\/span>\u00a0\u00a0file:<\/p>\n<ul>\n<li><span class=\"lang:xhtml decode:true crayon-inline\">&lt;meta name=&#8221;viewport&#8221;\u00a0&#8230;.<\/span> is used to make the app compatible with mobile devices as they have a different measurement for the width of the device.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline\">&lt;title&gt;<\/span>\u00a0 tag defines what text will appear on the tab when the page is opened.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">&lt;link&gt;<\/span>\u00a0 tag is used to load our stylesheet the <span class=\"lang:default decode:true crayon-inline \">style.css<\/span>\u00a0 file. This is done for better code separation and though the styles can be placed in the same document, best practices are to keep them separately to ensure better code readability.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">&lt;div&gt;<\/span>\u00a0 tag is type of tag used to define containers in HTML. They are used here to define the various buttons and components that will make up the calculator.<\/li>\n<li>All tags can have certain attributes that give it certain properties. In the attributes we use here for the div tags are <span class=\"lang:default decode:true crayon-inline \">class<\/span>\u00a0, <span class=\"lang:default decode:true crayon-inline \">id<\/span>\u00a0 and <span class=\"lang:default decode:true crayon-inline \">onclick<\/span>\u00a0.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">class<\/span>\u00a0 attribute groups similar elements by the same class name e.g.&#8221;button&#8221;.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">id<\/span>\u00a0 attribute is used to give a unique id to the element e.g.&#8221;calculator&#8221;.<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">onclick<\/span>\u00a0 attribute is used to define which function is called when the element is clicked. We will see this function later in on.<\/li>\n<li>we use the <span class=\"lang:default decode:true crayon-inline \">&lt;script&gt;<\/span>\u00a0 tag to load the third file into our page, <span class=\"lang:default decode:true crayon-inline \">calc.js\u00a0<\/span><\/li>\n<\/ul>\n<p>If this much is there in the file <span class=\"lang:default decode:true crayon-inline \">index.html<\/span>\u00a0 we should see the following if we open the file in a web browser.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-112\" src=\"http:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-1.06.04-AM-300x214.png\" alt=\"\" width=\"300\" height=\"214\" srcset=\"https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-1.06.04-AM-300x214.png 300w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-1.06.04-AM-768x547.png 768w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-1.06.04-AM-1024x729.png 1024w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-1.06.04-AM.png 1210w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Hurray! we have completed the second step in the building of the app. Now we ca proceed to style the calculator components.<\/p>\n<h2>Step 3: Styling the app (CSS)<\/h2>\n<p>Now lets open the second file that we had created, <span class=\"lang:default decode:true crayon-inline\">style.css<\/span>. CSS is a language that describes the style of an HTML document. All CSS files end with the extension <span class=\"lang:default decode:true crayon-inline \">.css<\/span><\/p>\n<p>Into style.css lets add some styling syntax. This syntax will only cover the properties needed to achieve the look of the calculator app shown above, and for further references in the various style properties and techniques refer to the links at the end of the article.<\/p>\n<p>First lets add some base style rules to the body, html and universal selector.<\/p>\n<pre class=\"lang:css decode:true\" title=\"base style rules\">* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n    height: 100%;\r\n}\r\n\r\nbody {\r\n    height: 100%;\r\n    margin: 0px;\r\n    background: #FF4E50; \/* fallback for old browsers *\/\r\n    background: -webkit-linear-gradient(to left, #FF4E50 , #F9D423); \/* Chrome 10-25, Safari 5.1-6 *\/\r\n    background: linear-gradient(to left, #FF4E50 , #F9D423); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\r\n}<\/pre>\n<p>If you refresh the page, you will only see the background change color to a smooth orange gradient. The <a href=\"https:\/\/www.w3schools.com\/Css\/css_background.asp\">background<\/a> property is responsible for that. The <span class=\"lang:default decode:true crayon-inline \">*<\/span>\u00a0also known as the universal selector is defining how the <a href=\"https:\/\/www.w3schools.com\/Css\/css3_box-sizing.asp\">box size<\/a> of the elements should be calculated based on the <a href=\"https:\/\/www.w3schools.com\/css\/css_boxmodel.asp\">box model<\/a>.<\/p>\n<p>To make our calculator look more real, lets add some id specific and class specific styles. If you remember in <strong>Step 2<\/strong>, we had grouped similar elements with a <span class=\"lang:default decode:true crayon-inline \">class<\/span>\u00a0 name and given certain elements <span class=\"lang:default decode:true crayon-inline \">id&#8217;s<\/span><\/p>\n<pre class=\"lang:css decode:true\" title=\"calculator element styles\">#calculator {\r\n    width: 100%;\r\n    max-width:360px;\r\n    margin: auto;\r\n    margin-top: 100px;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    box-shadow: 0px -5px 9px 0 rgba(0, 0, 0, 0.17);\r\n}\r\n\r\n<\/pre>\n<p>This defines that the calculator element will be selected and the following styles will be added.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/Css\/css_dimension.asp\">width<\/a> equal to 100% the with of the parent container. In this case the body element, but only until a maximum width of 360px.<\/li>\n<li>the <a href=\"https:\/\/www.w3schools.com\/Css\/css_margin.asp\">margin<\/a> properties are used to center align the calculator element and push it down 100 pixels from the top of the screen to give it a floating effect.<\/li>\n<li>the <a href=\"https:\/\/www.w3schools.com\/Css\/css_font.asp\">font-family<\/a> is used define the fonts used, the fonts are rendered in priority from left to right with the next being used if one is not available.<\/li>\n<li>the <a href=\"https:\/\/www.w3schools.com\/Css\/css3_shadows.asp\">box-shadow<\/a> property is used to give the element a shadow so that it appears raised<\/li>\n<\/ul>\n<p>Now lets style the screen element and the button class<\/p>\n<pre class=\"lang:css decode:true\" title=\"screen and button styles\">#screen {\r\n    min-height: 136px;\r\n    padding: 30px 20px;\r\n    text-align: right;\r\n    font-size: 30pt;\r\n    color: #3a3939;\r\n    background-color: white;\r\n}\r\n\r\n.button {\r\n    display: inline-block;\r\n    width: 33.3%;\r\n    padding: 30px;\r\n    font-size: 22pt;\r\n    text-align: center;\r\n    color: #ededed;\r\n    background-color: transparent;\r\n    float: left;\r\n    cursor: pointer;\r\n}<\/pre>\n<p>Lets look at the styles used in the screen element:<\/p>\n<ul>\n<li>min-height specifies the minimum height the screen should be of. This was determined so that even when there are no numbers on the screen, the screen element doesn&#8217;t collapse.<\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/Css\/css_dimension.asp\">padding<\/a>, <a href=\"https:\/\/www.w3schools.com\/Css\/css_align.asp\">text-align<\/a>, <a href=\"https:\/\/www.w3schools.com\/Css\/css_font.asp\">font-size<\/a>, <a href=\"https:\/\/www.w3schools.com\/Css\/css_colors.asp\">color<\/a>, <a href=\"https:\/\/www.w3schools.com\/Css\/css_background.asp\">background-color<\/a> are all similar properties that define how a screen of the calculator should behave.<\/li>\n<\/ul>\n<p>Now the buttons:<\/p>\n<ul>\n<li><span class=\"lang:default decode:true crayon-inline \">display: inline-block<\/span>\u00a0 is needed as div elements are by default of type block, and block elements occupy the entire row, therefore to accomodate multiple buttons per row, we have to display\u00a0it as an inline block element<\/li>\n<li>we define its width as 33% of its parent container as there must be only 3 digits per row, the 4th operand digit is part of a different parent container.<\/li>\n<li><span class=\"lang:default decode:true crayon-inline \">float: left<\/span>\u00a0 is a CSS hack needed as div elements add a small margin between themselves without this property and we cant get the look we want.<\/li>\n<li><span class=\"lang:default decode:true crayon-inline \">cursor: pointer<\/span>\u00a0 is needed to define the div element as a clickable object and change the look of the cursor to that of a pointer.<\/li>\n<\/ul>\n<p>By the end of this we should be able see the following screen.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-115\" src=\"http:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-23-at-11.01.37-PM-1-300x188.png\" alt=\"\" width=\"300\" height=\"188\" srcset=\"https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-23-at-11.01.37-PM-1-300x188.png 300w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-23-at-11.01.37-PM-1-768x480.png 768w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-23-at-11.01.37-PM-1-1024x640.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Now our app is starting to take shape. Lets add the remaining styles that make it take shape.<\/p>\n<p>The screen is made of two parts, the expression to evaluate and the instantaneous result section. Lets style these two parts,<\/p>\n<pre class=\"lang:css decode:true\">#screen #expression {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n#screen #answer {\r\n    font-size: 20pt;\r\n    color: #ababab;\r\n}<\/pre>\n<p>here we are just ensuring that any overflow of the text in the expression section is taken care of and the color and font size of the answer section is altered to match the design.<\/p>\n<pre class=\"lang:css decode:true\">.button:hover {\r\n    background-color: #404040 !important;\r\n}<\/pre>\n<p>This defines that happens when we hover over a <span class=\"lang:default decode:true crayon-inline \">button<\/span>\u00a0 class element. In this case, we change the buttons background color and make it slightly darker.<\/p>\n<pre class=\"lang:css decode:true\">\/* --- Number and Operation Container styles --- *\/\r\n.number-container {\r\n    display:inline-block;\r\n    width: 75%;\r\n    background-color: #434343;\r\n}\r\n.number-container::after {\r\n    content: \" \";\r\n    display: block;\r\n    clear: both;\r\n}\r\n.operation-container {\r\n    padding-top: 1px;\r\n    display: inline-block;\r\n    width: 25%;\r\n    float: right;\r\n    background-color: #636363;\r\n}\r\n.operation-container .button {\r\n    width: 100%;\r\n    padding: 27px 0px;\r\n    font-size: 13pt;\r\n    background-color: #636363;\r\n}<\/pre>\n<p>These set of styles define how buttons should be contained within them.<\/p>\n<ul>\n<li>The <span class=\"lang:default decode:true crayon-inline \">number-container<\/span>\u00a0 gives itself 75% of the width of the calculator and displays itself inline with the other container<\/li>\n<li>The <span class=\"lang:default decode:true crayon-inline \">operation-container<\/span>\u00a0 gives itself the remaining 25% of the calculators width and also displays\u00a0itself inline. The background-color, padding-top and float properties are to fix certain styling issues the app had faced with alignment and beyond the scope of this article.<\/li>\n<li><span class=\"lang:default decode:true crayon-inline\">::after<\/span>\u00a0is a <a href=\"https:\/\/www.w3schools.com\/Css\/css_pseudo_elements.asp\">pseudo\u00a0element<\/a>\u00a0that is used to overcome a style issue where the parent element collapses when the child elements are floated.<\/li>\n<li>Finally, the <span class=\"lang:default decode:true crayon-inline \">buttons<\/span>\u00a0 in the <span class=\"lang:default decode:true crayon-inline \">operation-container<\/span>\u00a0 have to be styled slightly differently.<\/li>\n<\/ul>\n<p>Finally we add a rule to remove the top margin in the calculator on devices with smaller screens<\/p>\n<pre class=\"lang:css decode:true\">@media only screen and (max-width : 400px) {\r\n    #calculator {\r\n        margin-top: 0px;\r\n    }\r\n}<\/pre>\n<p>This defines that upto a maximum width of 400px, there will be no top margin for the calculator.<\/p>\n<p>Totally our style.css file should resemble as follows<\/p>\n<pre class=\"lang:css decode:true\" title=\"style.css\">* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n    height: 100%;\r\n}\r\n\r\nbody {\r\n    height: 100%;\r\n    margin: 0px;\r\n    background: #FF4E50; \/* fallback for old browsers *\/\r\n    background: -webkit-linear-gradient(to left, #FF4E50 , #F9D423); \/* Chrome 10-25, Safari 5.1-6 *\/\r\n    background: linear-gradient(to left, #FF4E50 , #F9D423); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\r\n}\r\n\r\n#calculator {\r\n    width: 100%;\r\n    max-width:360px;\r\n    margin: auto;\r\n    margin-top: 100px;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    box-shadow: 0px -5px 9px 0 rgba(0, 0, 0, 0.17);\r\n}\r\n\r\n\/* --- Calc Screen Styles --- *\/\r\n#screen {\r\n    min-height: 136px;\r\n    padding: 30px 20px;\r\n    text-align: right;\r\n    font-size: 30pt;\r\n    color: #3a3939;\r\n    background-color: white;\r\n}\r\n\r\n#screen #expression {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n#screen #answer {\r\n    font-size: 20pt;\r\n    color: #ababab;\r\n}\r\n\r\n\/* --- Calc Button Styles --- *\/\r\n.button {\r\n    display: inline-block;\r\n    width: 33.3%;\r\n    padding: 30px;\r\n    font-size: 22pt;\r\n    text-align: center;\r\n    color: #ededed;\r\n    background-color: transparent;\r\n    float: left;\r\n    cursor: pointer;\r\n}\r\n.button:hover {\r\n    background-color: #404040 !important;\r\n}\r\n\r\n\/* --- Number and Operation Container styles --- *\/\r\n.number-container {\r\n    display:inline-block;\r\n    width: 75%;\r\n    background-color: #434343;\r\n}\r\n.number-container::after {\r\n    content: \" \";\r\n    display: block;\r\n    clear: both;\r\n}\r\n.operation-container {\r\n    padding-top: 1px;\r\n    display: inline-block;\r\n    width: 25%;\r\n    float: right;\r\n    background-color: #636363;\r\n}\r\n.operation-container .button {\r\n    width: 100%;\r\n    padding: 27px 0px;\r\n    font-size: 13pt;\r\n    background-color: #636363;\r\n}\r\n\r\n@media only screen and (max-width : 400px) {\r\n    #calculator {\r\n        margin-top: 0px;\r\n    }\r\n}<\/pre>\n<p>and the page should look as follows<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-114\" src=\"http:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-2.16.16-AM-300x199.png\" alt=\"\" width=\"300\" height=\"199\" srcset=\"https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-2.16.16-AM-300x199.png 300w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-2.16.16-AM-768x511.png 768w, https:\/\/designedbyashw.in\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-20-at-2.16.16-AM-1024x681.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>And now to our final step in the app. Giving it functionality!!<\/p>\n<h2>Step 4: Giving it functionality! (Javascript)<\/h2>\n<p>Now that we have made our page display a calculator, lets make it also behave like one! for that we will need to open our last file <span class=\"lang:default decode:true crayon-inline \">calc.js<\/span><\/p>\n<p>This is the file where will describe how our onclick functions will work. First in the file we will have to describe certain values that we will need for our functions.<\/p>\n<pre class=\"lang:js decode:true \">var num = '';\r\nvar expString = document.getElementById(\"expression\");\r\nvar answer = document.getElementById(\"answer\");<\/pre>\n<ol>\n<li>num will keep track of the expression to evaluate<\/li>\n<li>expString is a reference to the expression element in the HTML<\/li>\n<li>answer\u00a0is a reference to the answer\u00a0element in the HTML<\/li>\n<\/ol>\n<p>Now lets write the function where we insert a digit or the <span class=\"lang:default decode:true crayon-inline \">insertDigit<\/span>\u00a0 function defined in our HTML<\/p>\n<pre class=\"lang:js decode:true \">function insertDigit(digit) {\r\n    num = (answer.innerHTML === '') ? digit : num + digit;\r\n    expString.innerHTML = prettify(num);\r\n    answer.innerHTML = eval(num);\r\n}<\/pre>\n<p>num will be equal to the digit if the text inside the answer element is empty. Else the digit\u00a0will be concatenated with the previous num value. This is to ensure that when the answer element is empty, a new calculation begins, else the old calculation continues.<\/p>\n<p>The expression element will display a prettified version of the expression and the answer element will display the evaluated version of the expression. (Note: eval() is a default javascript function to evaluate a mathematical expression e.g. &#8220;3 + 4 * 5&#8221;)<\/p>\n<p>Next the <span class=\"lang:default decode:true crayon-inline \">insertOperation<\/span>\u00a0 function or the function to call when an operand such as +\/- is clicked.<\/p>\n<pre class=\"lang:js decode:true \">function insertOperation(digit) {\r\n    answer.innerHTML = (answer.innerHTML === '') ? num : answer.innerHTML;\r\n    num += digit;\r\n    expString.innerHTML = prettify(num);\r\n}<\/pre>\n<p>here the value of answer depends on whether it is already empty or not. If it is, its value will be equal to num, else its value will be itself. This is because when the answer element is empty and an operand is pressed, it signifies that the previous operation should continue and so repopulate its contents with the previous value.<\/p>\n<p>The num adds the operand to its expression and the expression element displays a prettified version of it.<\/p>\n<p>The <span class=\"lang:default decode:true crayon-inline \">calc<\/span>\u00a0 function is in comparison much simpler.<\/p>\n<pre class=\"lang:js decode:true \">function calc() {\r\n    num = answer.innerHTML;\r\n    answer.innerHTML = '';\r\n    expString.innerHTML = prettify(num);\r\n}<\/pre>\n<p>it just moves the value from the answer element to the expression element to either continue or start a new calculation, and clears the answer element.<\/p>\n<pre class=\"lang:js decode:true \">function clearScreen() {\r\n    num = '';\r\n    expString.innerHTML = num;\r\n    answer.innerHTML = num;\r\n}<\/pre>\n<p>The <span class=\"lang:default decode:true crayon-inline \">clearScreen<\/span>\u00a0 function just resets all values and screen elements text.<\/p>\n<pre class=\"lang:js decode:true \">\/\/ convert * and \/ signs to x and \u00f7\r\nfunction prettify(string) {\r\n    string = string.replace(\"*\", \"x\");\r\n    string = string.replace(\"\/\", \"\u00f7\");\r\n    return string;\r\n}<\/pre>\n<p>finally the prettify function is used to replace * and \/, the symbols used by computers to multiply and divide respectively with the symbols we are more accustomed to using such as x and \u00f7.<\/p>\n<p>Now our <span class=\"lang:default decode:true crayon-inline \">calc.js<\/span>\u00a0 file should look as follows:<\/p>\n<pre class=\"lang:js decode:true \">var num = '';\r\nvar expString = document.getElementById(\"expression\");\r\nvar answer = document.getElementById(\"answer\");\r\n\r\nfunction insertDigit(digit) {\r\n    num = (answer.innerHTML === '') ? digit : num + digit;\r\n    expString.innerHTML = prettify(num);\r\n    answer.innerHTML = eval(num);\r\n}\r\n\r\nfunction insertOperation(digit) {\r\n    answer.innerHTML = (answer.innerHTML === '') ? num : answer.innerHTML;\r\n    num += digit;\r\n    expString.innerHTML = prettify(num);\r\n}\r\n\r\nfunction calc() {\r\n    num = answer.innerHTML;\r\n    answer.innerHTML = '';\r\n    expString.innerHTML = prettify(num);\r\n}\r\n\r\nfunction clearScreen() {\r\n    num = '';\r\n    expString.innerHTML = num;\r\n    answer.innerHTML = num;\r\n}\r\n\r\n\/\/ convert * and \/ signs to x and \u00f7\r\nfunction prettify(string) {\r\n    string = string.replace(\"*\", \"x\");\r\n    string = string.replace(\"\/\", \"\u00f7\");\r\n    return string;\r\n}<\/pre>\n<p>And thats it! Now if you open index.html in a web browser, you will have a fully functional calculator app as the one displayed in the beginning of the article.<\/p>\n<h2>Conclusion<\/h2>\n<p>We have seen in this article, how to build a beautiful calculator app based on the Android Nougat default calculator app. We built it using 3 files, with\u00a03 different purposes. Now that we have this beautiful app, the only thing remaining is to share it&#8230;..<\/p>\n<p>In Part 2 we will look at the different avenues we can use to share our app with the world for <strong>FREE,\u00a0<\/strong>so that we can show the rest of the world our beautiful creations!<\/p>\n<p>Stay tuned for Part 2<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is part one of \u00a0a two part article series on how to get your first web app up and running online for the&hellip;<\/p>\n","protected":false},"author":1,"featured_media":106,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts\/58"}],"collection":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":13,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/posts\/58\/revisions\/223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/media\/106"}],"wp:attachment":[{"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designedbyashw.in\/blog\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}