Blog

salesforce data migration services

22

Jan

Crack the Code Workshop – A DIY Calculator, Web Apps and Loads of Fun!

Dazeworks,Web app,Code Workshop - posted by Thamaraikannan

In my earlier post on our ‘Crack the Code’ workshop, I had briefly mentioned how our training involved practice sessions where we had developed interactive games and web apps with HTML, Javascript etc.  Here, I have given a description of how we developed a Calculator and also how we worked on Form Validation using HTML, Bootstrap and Javascript.

Calculator

For designing Calculator, we used the following technologies:

  • HTML
  • Bootstrap
  • JavaScript

Contents of Calculator:

  • We had to create a table that contained numbers (1,2,3,4,5,6,7,8,9,0) and operators like(+,-,*,/,=), and left brace(, right brace ) and one clear button.

Things to Do in HTML:

  • Use the container class to create the form at the centre of the web page.
  • Create a table using Bootstrap such that everything inside table are as buttons.
  • Create five rows – first Row includes four buttons (7,8,9,+), second Row includes(4,5,6,-), third row includes(1,2,3,*), Fourth Row includes(.,0,C,/), Fifth Row includes((,),=).

Things to Do in JavaScript

  • Write separate functions for all buttons including numbers (1,2,3,4,5,6,7,8,9,0) and operators like(+,-,*,/,=), and left brace(, right brace ) and one Clear button.

For Example. if you click 7, this will check the DOM and return the value as 7. Likewise, the same is followed for all the values.

Functionality

  • The main aim of this calculator is to do all mathematical calculations (Addition, Subtraction, Multiplication and Division). In this we can use right brace and left brace as well.
  • If you press C button It will reset the value.

Codes for Calculator

Full Codes

Inputs

Functions

 

Result

cal 1

 Fig. 1:  Before calculating

cal 2

Fig 2:  Final result

Form Validation

For designing Form Validation we used following technologies:

  • HTML
  • Bootstrap
  • JavaScript

Content of Form validations:

  • First Name
  • Last Name
  • Age
  • Check Button

Things to Do in HTML:

  • Use the container class to create the form at the centre of the web page.
  • Initially create three text boxes(First Name, Last Name, Age)and one button(Check)
  • To make the page responsive, use class col-md, col-sm, col-xs with which you can view in any device.
  • For validation Check Button, use On-Click property that will check whether all the fields are filled or not.

Things to Do in JavaScript

  • For First Name, the first step is to get the value from DOM. If the DOM returns Null as the value, then nothing to displayed in the First Name box. Else whatever the DOM returns will be displayed as the content inside. A similar check has to be done for the Last Name.
  • For Age, there has to be a check on whether the user is typing numeric values and not characters. For checking  what the user has typed, we need to get the value from the DOM.
  • For Check button, a check has to be carried out for all the results of First name, Last name and  Age.

Functionality

  • The main aim of Form Validation is to verify that a user has filled in all the fields of the form (First name, Last name, Age). If all fields are filled, a Success pop-up is displayed using JavaScript. On the other hand, if any field is not filled, a Wrong pop-up will be displayed.

Codes for Form Validation

Full Codes

For checkFirstName

For checkLastName

For checkAge

For Validation

For Reset

Result:

valid 1

Fig 5: Valid inputs

valid 2

Fig 6: Invalid inputs

Why don’t you give it a try and let us know your thoughts  in the comments below!

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on Pinterest

Search

Stay in the loop with our Newsletter for the latest updates

* indicates required

Popular Tag's

Connect with Dazeworks