temperatureconversion.github.io/index.php at main · Mark-218/temperatureconversion.github.io · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

<html>
<head>
	<style>

*{box-sizing: border-box;
margin:0;
padding:0;}

h1{color:#4298f5;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
line-height: 20vh;}

.maindiv{
    width:100%;
    height:80vh;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.leftdiv{
    width:50%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;

}

.leftdiv img{
    max-width: 300px;
    height:300px;
    background-color:#c7bfbf ;
    border-radius: 28% 72% 52% 48% / 63% 25% 75% 37%  ;
}

.rightdiv{
    width:50%;
    float:auto;
}


.form{
    width:400px;
    height: 300px;
    background-color: #dfe6e9;
    border-radius: 15px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#va{
width:250px;
height: 40px;
padding:5px;
outline:none;
border-radius:5px;

}

.selection{
  width:100%;
  margin:20 0;


}

.btn{
    padding:10 16;
    border-radius: 5px;
    outline:none;
    border: none;
    background-color: #6c63ff;
    color:white;
    font-size: 0.9rem;
}

P{
    margin:20px 0 0 0;
}


</style>
</head>
<body>
<h1>Temperature Conversion</h1>
<div class="maindiv">

	<div class="leftdiv">
  <img src="sun.png">
	</div>

    <div class="rightdiv">

    <div class="form">
    <form method="POST">
    <input type="text" placeholder="find tamprature value" name="value" id="va"><br/>
    <div class="selection">
   <lebel>Celc</lebel>
    <input type="radio" name="units" value="cel">
    <lebel>Faren</lebel>
        <input type="radio" name="units" value="farn">
    </div>

        <input type="submit" name="submit" value="Convert Now " class="btn">

    </form>

<div>
    <p>
        <?php
         if(isset($_POST['submit'])){
             $num= $_POST['value'];
             $temp=$_POST['units'];

             if($temp =="cel"){
                $result= $num * 9 / 5 + 32;
                echo "the Conversion value of cel in faren is ".$result;
             }
             else{
                $result= ($num - 32) * 5 / 9;
                echo "the Conversion value of faren in cel is ".$result;
             }

         }

        ?>

    </p>

</div>


    </form>

    </div>
</div>
<!--this information use to create this temprature calculator:Design an HTML form to accept input data from the user.

The user should be able to enter:

● temperature ● select from oC or oF

This data will be sent to a PHP script where you will then convert the temperature from oC to oF or vice-versa.

The formula to convert from oF to oC is:
 C = (F - 32) * 5 / 9


The formula to convert from oC to oF is:
 F = C * 9 / 5 + 32-->

</body>
</html>