Units Converter A Mobile web application. By: SHEHABELDEEN ABDALLA

Transcription

1 Units Converter A Mobile web application By: SHEHABELDEEN ABDALLA

2 Page 2 of 5 Units Converter App This application is about converting different types of units. Interface contents: The application interface has two select boxes and an input box. There is also a section below the boxes area contains 10 paragraphs to show conversion results. Select boxes: The first select box is in the top of the app page called Category Selection which has the following categories of units: Data Storage. Length / Distance. Temperature. Volume / Capacity. Weight. Then the second select box called Unit Selection, the contents of box changes according to the selected unit category in the Category Selection box. The first view of the app is: Category Selection box value is Data Storage; the Unit Selection box contents are: Bit. Byte. Gigabit. Gigabyte. Kilobit. Kilobyte. Megabit. Megabyte. Terabit. Terabyte.

3 Page 3 of 5 When Category Selection box value changes to Length / Distance; the Unit Centimeter. Decimeter. Foot. Inch. Kilometer. Meter. Mile. Millimeter. Yard. When Category Selection box value changes to Temperature; the Unit Celsius. Fahrenheit. Kelvin. When Category Selection box value changes to Volume / Capacity; the Unit Barrel (UK). Barrel (US). Cubic Foot. Cubic Inch. Cubic Meter.Gallon (UK). Gallon (US). Liter. When Category Selection box value changes to Weight; the Unit Selection box contents automatically changes to: Gram. Kilogram. Ounce. Pound. Ton.

4 Page 4 of 5 Input Box: Contain number of units to be converted. It accepts only numbers. Operation Description: According to the value of the Category Selection select box; the contents of the Unit Selection select box changes as described above. Then also according to the Category Selection select box value a certain JSON file is called as follows: If the value is Data Storage the loaded JSON file will be DataStorage.json (Contains only objects) If the value is Length / Distance the loaded JSON file will be Distance.json (Contains only objects) If the value is Volume / Capacity the loaded JSON file will be Volume.json (Contains only objects) If the value is Weight the loaded JSON file will be Weight.json (Contains only objects) Example of a calculation process: If the Unit Selection select box value is Gram ; then from the Weight.json the equivalent amounts to gram of other weight units will be read from Weight.json file, if the imported JSON file contents stored in a variable called data; then according to the input value the following will happen to the paragraphs: var amount = $( #input ID ).val(); (input field value amount) document.getelementbyid( #ID of the 1 st paragraph ).innerhtml = "Gram" span of the 1 st document.getelementbyid( #ID of the 2 nd span of the 1 st paragraph ).innerhtml = amount * data.gram.gram; (Span content is replaced by the result of multiplication of the value ofthe input field by the amount read from the JSON file whichis the equivalent amount of grams that equals gram which is 1gram) document.getelementbyid( #ID of the 1 st paragraph ).innerhtml = "Kilogram" span of the 2 nd

5 document.getelementbyid( #ID of the 2 nd span of the 2 nd paragraph ).innerhtml = amount * data.gram.kilogram; document.getelementbyid( #ID of the 1 st paragraph ).innerhtml = "Ounce" span of the 3 rd document.getelementbyid( #ID of the 2 nd span of the 3 rd paragraph ).innerhtml = amount * data.gram.ounce; (data.gram.ounce = ounce) document.getelementbyid( #ID of the 1 st paragraph ).innerhtml = "Pound" span of the 4 th document.getelementbyid( #ID of the 2 nd span of the 4 th paragraph ).innerhtml = amount * data.gram.pound; (data.gram.pound = pound) document.getelementbyid( #ID of the 1 st paragraph ).innerhtml = "Ton" span of the 5 th document.getelementbyid( #ID of the 2 nd span of the 5 th paragraph ).innerhtml = amount * data.gram.ton; (data.gram.ton = ton) $( #ID of 6 th paragraph ).hide(); (hide unused paragraphs) $( #ID of 7 th paragraph ).hide(); $( #ID of 8 th paragraph ).hide(); $( #ID of 9 th paragraph ).hide(); $( #ID of 10 th paragraph ).hide(); Page 5 of 5 (Span content is replaced by the result of multiplication of the value ofthe input field by the amount read from the JSON file whichis the equivalent amount of kilograms that equals gram whichis kilogram) Upon change of values of any of the select or input boxes (using.change() function) similar process like the one shown above is repeated. One exception in Temperature conversion that there is no JSON file needed, we use only the formulas for conversion.