I created this calculator with two pages. The first page contains a registration form, the second page contains the calculator
html for first page :
<!DOCTYPE html>
<html>
<head>
<title>js assigment 1 _ omar azzazy</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">
<h1>Registration form</h1>
<form action="calc.html">
First Name: <input type="text"/><br><br>
Last Name: <input type="text"/><br>
Gender:
<input id="m" type="radio" name="gender" value="male"/> Male <br>
<input id="f" type="radio" name="gender" value="female"/>Female <br>
<input type="submit" onclick="go()" value="Go to calculator">
</form>
</div>
<script src="js/plugin.js"></script>
</body>
html for second page :
<!DOCTYPE html>
<html>
<head>
<title>js assigment 1 _ omar azzazy</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">
<h1>calculator</h1>
<input id="operator1" type="number" value=""/>
<select id="operatorx">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">x</option>
<option value="3">/</option>
</select>
<input id="operator2" type="number" value=""/>
<button onclick="calc()">=</button>
<input id="result" type="text" value=""/>
</div>
<script src="js/plugin.js"></script>
</body>
</html>
javascript code:
function plus(a, b) {
return (a + b);
}
function minus(a, b) {
return (a - b);
}
function multiply(a, b) {
return (a * b);
}
function divide(a, b) {
return (a / b);
}
function calc() {
var x = parseFloat( document.getElementById("operator1").value );
var y = document.getElementById("operatorx").value;
var z = parseFloat( document.getElementById("operator2").value );
switch (y) {
case '0':
w = plus(x, z);
break;
case '1':
w = minus(x, z);
break;
case '2':
w = multiply(x, z);
break;
case '3':
w = divide(x, z);
break;
default:
w = "Don't really know..";
}
document.getElementById("result").value = w;
}
I need if the user selected "Male" in radio button the page and calculator buttons will be in colors suitable for Men mood.
If the user selected "Female" the page and calculator buttons will be in colors suitable for Women mood.
