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

In my earlier post on our ‘Crack the Code’ workshop, I had briefly mentioned how our training involved practice sessions where w e 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
https://gist.github.com/thams017/11c5786da46b90843bf8
Functions
https://gist.github.com/thams017/eca10db0807d37f5c047

Result

 Fig. 1:  Before calculating

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
https://gist.github.com/thams017/415e3c87ad6a9f99f95d
For checkLastName
https://gist.github.com/thams017/6d8478544a4ffb539f6e
For checkAge
https://gist.github.com/thams017/49d063fa3e2ebeccad8e
For Validation
https://gist.github.com/thams017/0706ae8151501519eb69
For Reset
https://gist.github.com/thams017/a47c11c8cc0aacb3019f
Result:

Fig 5: Valid inputs

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