Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add area calculator #273

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

add area calculator #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9178ff
add area calculator
Ashish4321-hub Apr 27, 2022
9c70aee
change in readme file
Ashish4321-hub Apr 30, 2022
8b50165
add readme file
Ashish4321-hub Apr 30, 2022
53af5b5
adding new feature in area calculator
Ashish4321-hub May 7, 2022
77559c5
changes in html files
Ashish4321-hub May 9, 2022
2488a40
add all require things
Ashish4321-hub May 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions Calculators/Area_Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<h1>Area Calculator</h1>




<h3>Functionalities :-</h3>
- Calculate the area of rectangle,circle and square



<h3>Area :-</h3>
area of rectangle = length * breadth
area of circle = 3.14 *(radius)^2
area of square = side^2



<h3>Inputs :-</h3>
-Take length,breadth,radius and side as an input in metres



<h3>Built With :-</h3>
- Html, Css, Javascript



<h3>Screenshot :-</h3>


![image](https://user-images.githubusercontent.com/88235823/167483881-bc2d9094-a8bc-4f56-b26b-9e4be040b31c.png)
55 changes: 55 additions & 0 deletions Calculators/Area_Calculator/area.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
body {
display: grid;
justify-content: center;
text-align: center;
height: 100vh;

background: #222;
font-family: 'Roboto', sans-serif;
background-image: url('https://source.unsplash.com/1600x900/?landscape');
font-size: 100%;
}
h1{
background: #000000d0;
text-align: center;
color: white;
}
.area{
background: #000000d0;
padding: 1em;
border-radius: 30px;
color: white;
width: 100%;
max-width: 320px;
margin: 20px;
}

button{
margin: 0.4em;
border-radius: 50%;
border: none;
height: 50px;
width: 50px;
outline: none;
background: #7c7;
color: white;
cursor: pointer;
transition: 0.2s;
text-align: center;
}
input{
border: none;
outline: none;
padding: 0.4em 1em;
border-radius:15px;
background: #7c7c7c2b;
color: white;
font-family: inherit;
font-size: 100%;
width: calc(100%-100px);
}
button:hover{
background: #7c7c7c6b;
}


71 changes: 71 additions & 0 deletions Calculators/Area_Calculator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@


function rec(){
var d1=document.querySelector(".len").value;
var e1=document.querySelector(".brea").value;
document.querySelector(".recans").innerHTML="Area of rectangle is " + d1*e1 +"m^2";
}
function cir(){

var fg=document.querySelector(".radc").value;
document.querySelector(".cirans").innerHTML="Area of circle is " + 3.14*fg*fg+"m^2";
}
function sq(){

var o=document.querySelector(".side").value;
document.querySelector(".sqans").innerHTML="Area of square is " + o*o+"m^2";
}
function cylinder(){
var dy=document.querySelector(".heightcy").value;
var ey=document.querySelector(".radcy").value;
document.querySelector(".cylans").innerHTML="Area of Cylinder is " + 2*3.14*ey*(ey+ dy) +"m^2";
}
function cone(){
var d2=document.querySelector(".radon").value;
var e2=document.querySelector(".heighton").value;
document.querySelector(".coneans").innerHTML="Area of cone is " + 3.14*d2*(d2 + e2) +"m^2";
}
function cube(){
var dx=document.querySelector(".lencu").value;

document.querySelector(".cubeans").innerHTML="Area of cube is " + 6*dx*dx+"m^2";
}
function ellipse(){
var d4=document.querySelector(".lenx").value;
var e4=document.querySelector(".breax").value;
document.querySelector(".ellipseans").innerHTML="Area of ellipse is " + 3.14*d4*e4 +"m^2";
}
function hemisphere(){
var fo=document.querySelector(".radmi").value;

document.querySelector(".hemians").innerHTML="Area of Hemisphere is " + 3*3.14*fo*fo +"m^2";
}
function parallelogram(){
var d5=document.querySelector(".heightp").value;
var e5=document.querySelector(".basep").value;
document.querySelector(".paraans").innerHTML="Area of parallelogram is " + d5*e5 +"m^2";
}
function rectangularprism(){
var d6=document.querySelector(".lenpri").value;
var e6=document.querySelector(".breapri").value;

var f6=document.querySelector(".heightpri").value;
document.querySelector(".recprians").innerHTML="Area of rectangularprism is " +2*( d6*e6 +e6*f6+ f6*d6) +"m^2";
}
function sphere(){
var fi=document.querySelector(".radsp").value;

document.querySelector(".sphans").innerHTML="Area of sphere is " + 4*3.14*fi*fi +"m^2";
}
function trapezium(){
var dt=document.querySelector(".lena").value;
var et=document.querySelector(".lenb").value;
var ft=document.querySelector(".heightt").value;
var iy=(dt+et)
document.querySelector(".trapans").innerHTML="Area of trapezium is " + (0.5*iy*ft) +"m^2";
}
function triangle(){
var dl=document.querySelector(".heighttri").value;
var el=document.querySelector(".basetri").value;
document.querySelector(".trians").innerHTML="Area of trianglris " + 0.5*dl*el +"m^2";
}
159 changes: 159 additions & 0 deletions Calculators/Area_Calculator/shape.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Area Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link href="area.css" rel="stylesheet">
</head>
<body>
<h1>Area Calculator</h1>


<div class="row">


<div class="area col-6 col-md-4">

<h3>Circle</h3>
<h4>Radius</h4><input class="radc" type="text" placeholder="in m">
<button onclick="cir()">Area</button><br>
<textarea class="cirans" placeholder="Output"></textarea>
</div>
<div class="area col-6 col-md-4">

<h3>Cylinder</h3>
<h4>Height</h4><input class="heightcy"type="text" placeholder="in m">
<h4>Radius</h4><input class="radcy"type="text" placeholder="in m">
<button onclick="cylinder()">Area</button><br>
<textarea class="cylans" placeholder="Output"></textarea>

</div>
<div class="area col-6 col-md-4">

<h3>Cone</h3>
<h4>Radius</h4><input class="radon"type="text" placeholder="in m">
<h4>Slant height</h4><input class="heighton"type="text" placeholder="in m">
<button onclick="cone()">Area</button><br>
<textarea class="coneans" placeholder="Output"></textarea>

</div>

<div class="area col-6 col-md-4">

<h3>Cube</h3>
<h4>Length</h4><input class="lencu"type="text" placeholder="in m">

<button onclick="cube()">Area</button><br>
<textarea class="cubeans" placeholder="Output"></textarea>
</div>

</div>
<div class="row">
<div class="area col-6 col-md-4">

<h3>Ellipse</h3>
<h4>Major axis</h4><input class="lenx"type="text" placeholder="in m">
<h4>minor axis</h4><input class="breax"type="text" placeholder="in m">
<button onclick="ellipse()">Area</button><br>
<textarea class="ellipseans" placeholder="Output"></textarea>

</div>


<div class="area col-6 col-md-4">

<h3>Hemisphere</h3>
<h4>Radius</h4><input class="radmi"type="text" placeholder="in m">

<button onclick="hemisphere()">Area</button><br>
<textarea class="hemians" placeholder="Output"></textarea>

</div>

<div class="area col-6 col-md-4">

<h3>Parallelogram</h3>
<h4>base</h4><input class="basep"type="text" placeholder="in m">
<h4>Height</h4><input class="heightp"type="text" placeholder="in m">
<button onclick="parallelogram()">Area</button><br>
<textarea class="paraans" placeholder="Output"></textarea>

</div>

<div class="area col-6 col-md-4">

<h3>Rectangular-prism</h3>
<h4>Length</h4><input class="lenpri"type="text" placeholder="in m">
<h4>Breadth</h4><input class="breapri"type="text" placeholder="in m">
<h4>Height</h4><input class="heightpri"type="text" placeholder="in m">

<button onclick="rectangularprism()">Area</button><br>
<textarea class="recprians" placeholder="Output"></textarea>

</div>
</div>
<div class="row">
<div class="area col-6 col-md-4">

<h3>Rectangle</h3>
<h4>Length</h4><input class="len"type="text" placeholder="in m">
<h4>Breadth</h4><input class="brea"type="text" placeholder="in m">
<button onclick="rec()">Area</button><br>
<textarea class="recans" placeholder="Output"></textarea>

</div>


<div class="area col-6 col-md-4">

<h3>Sphere</h3>
<h4>Radius</h4><input class="radsp"type="text" placeholder="in m">

<button onclick="sphere()">Area</button><br>
<textarea class="sphans" placeholder="Output"></textarea>

</div>


<div class="area col-6 col-md-4">


<h3>Square</h3>
<h4>Side</h4>
<input type="text" class="side"placeholder="in m">
<button onclick="sq()">Area</button><br>
<textarea class="sqans" placeholder="Output"></textarea>
</div>

<div class="area col-6 col-md-4">

<h3>Trapezium</h3>
<h4>Length a</h4><input class="lena"type="text" placeholder="in m">
<h4>Length b</h4><input class="lenb"type="text" placeholder="in m">

<h4>Height</h4><input class="heightt"type="text" placeholder="in m">
<button onclick="trapezium()">Area</button><br>
<textarea class="trapans" placeholder="Output"></textarea>

</div>

<div class="row ">
<div class="area col-6 col-md-4">

<h3>Triangle</h3>
<h4>base</h4><input class="basetri"type="text" placeholder="in m">
<h4>Height</h4><input class="heighttri"type="text" placeholder="in m">
<button onclick="triangle()">Area</button><br>
<textarea class="trians" placeholder="Output"></textarea>
</div>

</div>
<script src="index.js"></script>

</body>
</html>
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
| 41 | [VAT_Calculator](./Calculators/VAT_Calculator/) |
| 42 | [Wind_Chill_Calculator](./Calculators/Wind_Chill_Calculator/) |
| 43 | [Resonant frequency calculator](./Calculators/Resonant_frequency_calculator/) |
|44 | [Area calculator](./Calculators/Area_Calculator/) |

<h1> Project Maintainer ⚡ </h1>
<a href="https://github.com/vasu-1"><img src="https://avatars.githubusercontent.com/u/76911582?s=40&v=4"/></a>
Expand Down