Assignment $1$: Inch$-$To$-$Cm Converter

Description

Write an Angular mobile application $($using visual studio code$)$ to convert inches to centimetres and vice versa. Both values in the input text

fields should be automatically synchronized $($bi$-$directional data binding$)$ using Angular data binding technique. For

the inch $,$ it allows to enter a decimal or fractional number, for example, $"1\mathrm{.}25"$ or $"\frac{11}{4}".$ For centimeter

$,$ it only allows a decimal number, for example, $"1\mathrm{.}23".$

The application must be responsive to fit in any mobile device width $($e$.$g$.360$ pixels$)$ for either portrait or landscape

mode, and to place $2$ input boxes in a row without clipping.

Option A $($max $80$ points$)$

Must use Angular framework.

Must be responsive $($the page must fit in at least $360$ pixel$-$wide device width$).$

Must use Angular data bindings ngModel or signal to sync the values of both elements.

Must label clearly "inch" and $"$cm$"$ for the elements.

Must accept either a decimal or a fractional number, such as $"1\mathrm{.}23"$ or $"12/3"$ for the "inch" cinput$>$ element.

Must accept only decimal number, such as $"1\mathrm{.}23"$ for the $"$cm$"$ element.

Must define a constant for the conversion formula, for example FACT $=2\mathrm{.}54$

Must display the conversion with units, e$.$g$.\frac{11}{4}in=1\mathrm{.}25in*2\mathrm{.}54=3\mathrm{.}175cm$

Must define toDecimal$($fractionstring$)$ function to convert a fractional string to a decimal number $($up to $4-$

digit accuracy$).$

Must test your toDecimal$($froctionString$)$ in your constructor$()$ or ngOnInit$()$ with the following decimal inches

using console. $)$ or Logger. $).$

toDecimal$("1")1$

toDecimal$("1\mathrm{.}2")1\mathrm{.}2$

toDecimal$("1/2")0\mathrm{.}5$

toDecimal$("1/16")0\mathrm{.}0625$

toDecimal$("\{$:$\frac{3}{2^{\text{'}\text{'}}})1\mathrm{.}5$

toDecimal$("12/3"),,1\mathrm{.}6667$