Skip to content

Commit ea0fca9

Browse files
HadiVahidi20HadiVahidi20
committed
Enhance percentage exercise layout and add area calculation functionality
1 parent c346f52 commit ea0fca9

File tree

1 file changed

+77
-7
lines changed

1 file changed

+77
-7
lines changed

‎Sprint-1/prep/percentage.html‎

Lines changed: 77 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,44 @@
55
<meta viewport="width=device-width, initial-scale=1.0">
66
<title>Percentage Exercise</title>
77
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
811
body{
912
text-align: center;
1013
font-family: Arial, sans-serif;
1114
margin-top: 10%;
1215
}
16+
.container{
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
border: 2px solid #ccc;
22+
border-radius: 10px;
23+
padding: 20px;
24+
width:max-content;
25+
margin: auto;
26+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
27+
overflow: hidden;
28+
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
29+
gap: 20px;
30+
}
31+
.container1{
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
justify-content: center;
36+
border: 2px solid #ccc;
37+
border-radius: 10px;
38+
padding: 20px;
39+
width: 50vw;
40+
margin: auto;
41+
box-shadow: 0 0 10px rgba(0,0,0,0.1);
42+
overflow: hidden;
43+
background: linear-gradient(60deg, #f5f7fa, #90d0db);
44+
gap: 20px;
45+
}
1346
input{
1447
padding: 10px;
1548
font-size: 1rem;
@@ -43,17 +76,36 @@
4376
</head>
4477
<body>
4578
<h1>Percentage Exercise</h1>
46-
<p>enter a decimal number and click the button to see the percentage:</p>
47-
<input type="number" id="decimal-input" placeholder="Enter a decimal number" step="0.001" min="0" max="1">
48-
<button id="convert-btn">Convert to Percentage</button>
49-
<h2 id="result"></h2>
79+
<div class="container">
80+
<div class="container1">
81+
<h2>Convert Decimal to Percentage</h2>
82+
<p>enter a decimal number and click the button to see the percentage:</p>
83+
<input type="number" id="decimal-input" placeholder="Enter a decimal number" step="0.001" min="0" max="1">
84+
<button id="convert-btn">Convert to Percentage</button>
85+
<h3 id="percentageResult"></h3>
86+
</div>
87+
88+
<div class="container1">
89+
<h2>Calculate the area and perimeter</h2>
90+
<p>enter the width and height to calculate the area and perimeter</p>
91+
<label for="width-input">Width:
92+
93+
<input type="number" id="width-input" placeholder="Enter the width" step="1" >
94+
</label>
95+
<label for="height-input">Height:
96+
<input type="number" id="height-input" placeholder="Enter the height" step="1" >
97+
</label>
98+
<button id="areaCal-btn">calculate the area and perimeter</button>
99+
<h3 id="areaResult"></h3>
100+
</div>
101+
50102
</body>
51103
<script>
52-
const button = document.getElementById('convert-btn');
104+
const percentageButton = document.getElementById('convert-btn');
53105
const decimalNumber=document.getElementById('decimal-input');
54-
const result=document.getElementById('result');
106+
const result=document.getElementById('percentageResult');
55107

56-
button.addEventListener('click',()=>{
108+
percentageButton.addEventListener('click',()=>{
57109
if(decimalNumber.value > 1 || decimalNumber.value < 0){
58110
result.textContent = "Please enter a decimal number between 0 and 1";
59111
} else {
@@ -63,4 +115,22 @@ <h2 id="result"></h2>
63115

64116
})
65117

118+
const areaButton = document.getElementById('areaCal-btn');
119+
const widthInput=document.getElementById('width-input');
120+
const heightInput=document.getElementById('height-input');
121+
const areaResult=document.getElementById('areaResult');
122+
123+
areaButton.addEventListener("click",()=>{
124+
const width= Number(widthInput.value);
125+
const height= Number(heightInput.value);
126+
if(width <=0 || height <=0){
127+
areaResult.textContent="Please enter positive numbers for width and height";
128+
} else {
129+
const area= width * height;
130+
const perimeter= 2 * (width + height);
131+
areaResult.textContent=`The area is ${area} and the perimeter is ${perimeter}`;
132+
}
133+
134+
})
135+
66136
</script>

0 commit comments

Comments
 (0)