109 lines
3.9 KiB
HTML
109 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>
|