In this tutorial I will share to you guys how to create a PHP program to ask the user to give a distance in centimeter, and convert it into meters, and kilometres. I hope you will find my work useful.I am currently accepting programming work, IT projects, school and application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me at the following email address for further details. If you want to advertise on my website kindly contact me also in my email address also. Thank you.
My email address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com
Program Listing
style.css
*,
html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Calibri", sans-serif;
background: #e2e1e0;
color: #111;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
main {
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
background: #fff;
border: 8px solid #2196f3;
border-radius: 20px 40px 20px 40px;
}
.container::before {
position: absolute;
}
.container {
-webkit-transform: skewY(-8deg);
transform: skewY(-8deg);
padding: 50px 40px;
min-width: 530px;
text-align: left;
}
h1 {
margin: 0;
line-height: 1.2;
text-align: center;
}
h2 {
margin: 0 0 30px;
font-size: 22px;
text-align: center;
}
.txtbox {
display: inline-block;
background: #eee;
width: 100%;
margin: 0 0 8px 0;
padding: 15px;
border: none;
font-size: 15px;
}
.txtbox:focus {
background: #f1f1f1;
outline: none;
}
.block {
display: block;
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
}
.block .radioblock {
width: 100px;
display: inline-block;
}
.block label {
cursor: pointer;
}
button {
display: block;
background: #2196f3;
color: #fff;
padding: 10px;
font-size: 15px;
width: 100%;
opacity: 0.9;
outline: none;
text-transform: uppercase;
border: none;
text-decoration: none;
text-align: center;
border: none;
margin-bottom: 10px;
}
button:hover {
opacity: 1;
}
.result {
padding: 10px;
font-size: 20px;
background: #eee;
text-align: center;
font-weight: bold;
}
index.php
<?php
if(isset($_POST['txtNumber'])) {
$num = $_POST['txtNumber'];
$rad = $_POST['txtRadio'];
switch ($rad) {
case "Meter":
$res = $num / 100;
$res .= " m";
break;
case "Kilometer":
$res = $num / 100000;
$res .= " km";
break;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Distance Converter in PHP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="container">
<h1>Simple Distance Converter in PHP</h1>
<h2>» Jake R. Pomperada, MAED-IT, MIT «</h2>
<div class="container-wrapper">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" class="frmSelect">
<label for="txtNumber" class="label">Distance in Centimeter:</label>
<input type="number" min="1" class="txtbox" name="txtNumber" id="txtNumber"
value="<?php if(isset($num)){echo $num;} ?>" required>
<div class="block">
<div class="radioblock">
<input type="radio" name="txtRadio" id="txtRadio1" value="Meter" required>
<label for="txtRadio1">Meter</label>
</div>
<div class="radioblock">
<input type="radio" name="txtRadio" id="txtRadio2" value="Kilometer" required>
<label for="txtRadio2">Kilometer</label>
</div>
</div>
<button type="submit">Convert</button>
</form>
<?php if(isset($res)) echo '<div class="result">'.$res.'</div>'; ?>
</div>
</div>
</main>
</body>
</html>
