To design a dynamic website to perform mathematical calculations using Angular Framwork.
Requirement collection.
Creating the layout using HTML and CSS in component.html file .
Write typescript to perform the calculations.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
<style>
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #880cee
}
.container {
width: 1080px;
margin-left: auto;
margin-right: auto;
}
.contentrec {
display: block;
width: 100%;
background-color: rgb(85, 221, 126);
min-height: 500px;
margin-top:150px
}
.contentcy {
display: block;
width: 100%;
background-color: rgb(241, 232, 100);
min-height: 500px;
margin-top:150px
}
.contentcu {
display: block;
width: 100%;
background-color: #f49fff;
min-height: 500px;
margin-top:150px
}
h1{
text-align: center;
padding-top: 20px ;
}
.formelement{
text-align: center;
line-height: 200%;
margin: auto;
padding: 10px;
font-size: 20px;
}
.formelementV{
text-align: center;
margin: auto;
padding: 10px;
font-size: 20px;
line-height: 200%;
}
.footer {
display: block;
width: 100%;
height: 40px;
background-color: cyan;
text-align: center;
padding-top: 10px;
margin: 0px 0px 0px 0px;
color:purple;
}
</style>
<body>
<h1>MATHEMATICAL CALCULATIONS</h1>
<div class="container">
<div class="contentrec">
<Rectangle-Area class="formelement"></Rectangle-Area>
</div>
</div>
<div class="container">
<div class="contentcy">
<Cylinder-Volume class="formelementV"></Cylinder-Volume>
</div>
</div>
<div class="container">
<div class="contentcu">
<Cuboid-Volume class="formelementV"></Cuboid-Volume>
</div>
</div>
<div class="footer">
Developed by Sowmiya.
</div>
</body>
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CuboidComponent } from './cuboid/cuboid.component';
import { CylinderComponent } from './cylinder/cylinder.component';
import { RectangleComponent } from './rectangle/rectangle.component';
@NgModule({
declarations: [
AppComponent,RectangleComponent,CylinderComponent,CuboidComponent
],
imports: [
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<div>
<h2>Area of a Rectangle</h2>
Length = <input type="text" [(ngModel)]="length"> Meters<br/>
Breadth = <input type="text" [(ngModel)]="breadth"> Meters<br/>
<input type="button" (click)="onCalculation()" value="Calculate Area"><br/>
Area of Rectangle = <input type="text" [value]="area"> Meters<sup>2</sup>
</div>
import { Component } from "@angular/core";
@Component({
selector :" Rectangle-Area ",
templateUrl:"./rectangle.component.html"
})
export class RectangleComponent{
length:number;
breadth:number;
area:number;
constructor(){
this.length=10;
this.breadth=20;
this.area= this.length * this.breadth;
}
onCalculation()
{
this.area= this.length * this.breadth;
}
}
<div>
<h2>Volume of Cylinder</h2>
Radius = <input type="text" [(ngModel)]="radius" > Meters<br/>
Height = <input type="text" [(ngModel)]="height"> Meters<br/>
<input type="button" (click)="onCalculateVolume()" value="Calculate Volume"><br/>
Volume of Cylinder = <input type="text" [value]="volume"> Meters<sup>3</sup>
</div>
import { Component } from "@angular/core";
@Component({
selector :" Cylinder-Volume ",
templateUrl:"./cylinder.component.html"
})
export class CylinderComponent{
radius:number;
height:number;
volume:number;
constructor(){
this.radius=10;
this.height=20;
this.volume= 3.14*this.radius*this.radius * this.height;
}
onCalculateVolume()
{
this.volume= 3.14*this.radius*this.radius * this.height;
}
}
<div>
<h2>Volume of Cuboid</h2>
Length= <input type="text" [(ngModel)]="length" > Meters<br/>
Height = <input type="text" [(ngModel)]="height"> Meters<br/>
Width = <input type="text" [(ngModel)]="width"> Meters<br/>
<input type="button" (click)="onCalculateVolumecuboid()" value="Calculate Volume"><br/>
Volume of Cuboid = <input type="text" [value]="volume"> Meters<sup>3</sup>
</div>
import { Component } from "@angular/core";
@Component({
selector :" Cuboid-Volume ",
templateUrl:"./cuboid.component.html"
})
export class CuboidComponent{
length:number;
height:number;
width:number;
volume:number;
constructor(){
this.length=10;
this.height=20;
this.width=15;
this.volume= this.length*this.height*this.width
}
onCalculateVolumecuboid()
{
this.volume= this.length*this.height*this.width
}
}
A dynamic website to perform mathematical calculations using Angular Framwork is designed.