fouroperations/index.html
buzz-lightsnack-2007 52aad94550 initial commit
2022-10-12 22:28:55 +08:00

108 lines
3.9 KiB
HTML

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Four Operations</title>
<meta name="generator" content="LibreOffice 7.4.1.2 (Windows)"/>
<meta name="author" content="buzz-lightsnack-2007"/>
<!-- styles -->
<link href="node_modules/@materializecss/materialize/dist/css/materialize.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="styles/interface.css" rel="stylesheet" />
<!-- scripts -->
<script src="node_modules/@materializecss/materialize/dist/js/materialize.js"></script>
<script src="scripts/fouroperations.js"></script>
</head>
<body lang="en-PH" dir="ltr">
<nav>
<top class="nav-wrapper">
<a class="brand-logo">FourOperations</a>
<ul id="nav-mobile" class="right">
<li><a id="button_submit" class="waves-effect waves-light" type="submit" onclick="displayAnswers()">Solve</a></li>
</ul>
</top>
</nav>
<main>
<section class="container">
<div class="row">
<div class="col s12 m6">
<section class="card">
<div class="card-content">
<div class="input-field">
<label for="input_number_1">1<sup>st</sup> Number</label>
<input type="number" id="input_number_1" required></input>
</div>
</div>
</section>
</div>
<div class="col s12 m6">
<section class="card">
<div class="card-content">
<div class="input-field">
<label for="input_number_2">2<sup>nd</sup> Number</label>
<input type="number" id="input_number_2" required></input>
</div>
</div>
</section>
</div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col s12 m4">
<section class="card green white-text">
<div class="card-content">
<div class="input-field">
<label for="output_number_sum" class="white-text"><i class="mdi mdi-plus"></i> Sum</label>
<input type="number" id="output_number_sum" placeholder="-" class="white-text" readonly></input>
</div>
</div>
</section>
</div>
<div class="col s12 m4">
<section class="card red white-text">
<div class="card-content">
<div class="input-field">
<label for="output_number_difference" class="white-text"><i class="mdi mdi-minus"></i> Difference</label>
<input type="number" id="output_number_difference" placeholder="-" class="white-text" readonly></input>
</div>
</div>
</section>
</div>
<div class="col s12 m4">
<section class="card purple white-text">
<div class="card-content">
<div class="input-field">
<label for="output_number_quotient" class="white-text"><i class="mdi mdi-division"></i> Quotient</label>
<input type="number" id="output_number_quotient" placeholder="-" class="white-text" readonly></input>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col s12 m6">
<section class="card orange white-text">
<div class="card-content">
<div class="input-field">
<label for="output_number_product" class="white-text"><i class="mdi mdi-close-thick"></i> Product</label>
<input type="number" id="output_number_product" placeholder="-" class="white-text" readonly></input>
</div>
</div>
</section>
</div>
<div class="col s12 m6">
<section class="card blue white-text">
<div class="card-content">
<div class="input-field">
<label for="output_number_exponential" class="white-text"><i class="mdi mdi-exponent"></i> Exponential</label>
<input type="number" id="output_number_exponential" placeholder="-" class="white-text" readonly></input>
</div>
</div>
</section>
</div>
</div>
</section>
</main>
</body></html>