Module-Structuring-and-Testing-Data/Sprint-1/prep/percentage.html at 09eec6df44fe2f190a2fac8f8da1e95fe441ac97 · HadiVahidi20/Module-Structuring-and-Testing-Data · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta viewport="width=device-width, initial-scale=1.0">
    <title>Percentage Exercise</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body{
            text-align: center;
            font-family: Arial, sans-serif;
            margin-top: 10%;
        }
        .container{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            width:max-content;
            margin: auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            gap: 20px;
        }
        .container1{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            width: 50vw;
            margin: auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            background: linear-gradient(60deg, #f5f7fa, #90d0db);
            gap: 20px;
        }
        input{
            padding: 10px;
            font-size: 1rem;
            border-radius: 5px;
            border: 2px solid #ccc;
            width: 200px;
            text-align: center;
            margin: 10px;
        }
        button{
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
            border: none;
            background-color: #28a745;
            color: white;
            cursor: pointer;
            margin-left: 10px;
            transition:all 0.3s ease;
        }
        button:hover{
            background-color: #218838;
            transform: scale(1.05);
        }
        #result{
            margin-top: 20px;
            font-size: 1.5rem;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Percentage Exercise</h1>
    <div class="container">
    <div class="container1">
        <h2>Convert Decimal to Percentage</h2>
        <p>enter a decimal number and click the button to see the percentage:</p>
        <input type="number" id="decimal-input" placeholder="Enter a decimal number" step="0.001" min="0" max="1">
        <button id="convert-btn">Convert to Percentage</button>
    <h3 id="percentageResult"></h3>
  </div>

    <div class="container1">
        <h2>Calculate the area and perimeter</h2>
         <p>enter the width and height to calculate the area and perimeter</p>
            <label for="width-input">Width:

            <input type="number" id="width-input" placeholder="Enter the width" step="1" >
        </label>
            <label for="height-input">Height:
            <input type="number" id="height-input" placeholder="Enter the height" step="1" >
        </label>
            <button id="areaCal-btn">calculate the area and perimeter</button>
    <h3 id="areaResult"></h3>
</div>

</body>
<script>
    const percentageButton = document.getElementById('convert-btn');
    const decimalNumber=document.getElementById('decimal-input');
    const result=document.getElementById('percentageResult');

    percentageButton.addEventListener('click',()=>{
        if(decimalNumber.value > 1 || decimalNumber.value < 0){
            result.textContent = "Please enter a decimal number between 0 and 1";
        } else {
            const percentage = `${decimalNumber.value * 100} %`;
            result.textContent = `${percentage}`;
        }

    })

    const areaButton = document.getElementById('areaCal-btn');
    const widthInput=document.getElementById('width-input');
    const heightInput=document.getElementById('height-input');
    const areaResult=document.getElementById('areaResult');

    areaButton.addEventListener("click",()=>{
     const width= Number(widthInput.value);
     const height= Number(heightInput.value);
     if(width <=0 || height <=0){
        areaResult.textContent="Please enter positive numbers for width and height";
     } else {
        const area= width * height;
        const perimeter= 2 * (width + height);
        areaResult.textContent=`The area is ${area} and the perimeter is ${perimeter}`;
     }

    })

</script>