FULL FILE
HTML
<!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>Document</title>
</head> <body> <form method="POST"> <input id="a" class="edit" placeholder="ENTER NUMBER" type="number" name="info" required /> <input id="k" class="edit" placeholder="ENTER NUMBER" type="number" name="son" required /> <select name="opt" > <option value="add" value="add">ADD</option> <option value="sub">SUBTRACT</option> <option value="multiply">MULTIPLY</option> <option value="divide">DIVIDE</option> </select> <div class="class"> <input class="b" type="submit" name="fo" value="SUBMIT" /> <input class="b bcc" type="reset" value="RESET"></div> <pre id="az">CALCULATOR</pre>
PHP
NOTE = JUST AFTER HTML
<div id="flex"> <p> <?php if (isset($_POST['fo'])){ $fir = $_POST['info']; $sec = $_POST['son']; $opt = $_POST['opt']; switch ($opt) { case 'add': $sum = $fir+$sec; echo "Sum Of $fir and $sec Is {$sum}"; break; case 'sub': $sub = $fir-$sec; echo "Subtraction Of $fir and $sec Is {$sub}"; break; case 'multiply': $mul = $fir*$sec; echo "Multiplication Of $fir and $sec Is {$mul}"; break; case 'divide': $div = $fir/$sec; echo "Division Of $fir and $sec Is {$div}"; break; default : echo "error"; } } ?> </p> </div> </form>
CSS
* { margin: 2px; padding: 0; font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; font-weight: 400; font-style: oblique; font-size: large; } @keyframes shishant { 0% { font-size: 20px; } 100% { font-size: 30px; } } body { background: rgba(2, 251, 193, 0.932); height: 90vh; display: flex; justify-content: center; align-items: center; } form { width: 700px; height: 350px; display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(4, 1fr); background: rgb(29, 25, 25); } .edit { margin: 10px; border: 0px; background: rgb(29, 25, 25); margin-left: auto; color: white; border-bottom: 1px solid white; } select { margin: 10px; margin-left: auto; width: 35%; color: rgb(0, 0, 0); } .b { position: relative; left: 63%; width: 11%; } pre { color: white; } @keyframes shishant { 0% { font-size: 20px; } 100% { font-size: 30px; } } #az { position: relative; bottom: 130%; width: 100px; height: 70px; color: whitesmoke; background-color: rgb(29, 25, 25); animation-name: shishant; animation-duration: 1.2s; animation-iteration-count: infinite; } .class { display: flex; } .b { margin-right: 80px; } #flex { display: flex; justify-content: center; height: 35px; width: 100%; } p { color: white; } @media screen and (max-width: 600px) { form { display: grid; grid-template-columns: repeat(4); grid-template-rows: repeat(2); background: rgb(29, 25, 25); } .edit { margin: 0px; border: 0px; background: rgb(29, 25, 25); color: white; border-bottom: 1px solid white; width: 130px; height: 50px; } select { position: relative; bottom: 125px; } .b { position: relative; bottom: 105px; right: 20px; margin: 2px; width: 65px; } #az { position: relative; left: 30%; } } @media only screen and (min-width: 50px) and (max-width: 370px) { .bcc { display: none; } }
コメント