select object type for calculating volume
cubecylinder
Temperature converter
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Solar system</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div>
<h2>select object type for calculating volume</h2>
<input type="radio" name="object_type" value="cube" onclick="object_type_selector()" />cube <br />
<input type="radio" name="object_type" value="cylinder" onclick="object_type_selector()" />cylinder <br />
</div>
<div id="cube_calculator" style="display:none">
<h2>Dimensions of a cube</h2>
<table>
<thead>
<tr>
<td>Length (ft)</td>
<td>Width (ft)</td>
<td>Height (ft)</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" id="cube_length" /></td>
<td><input type="number" id="cube_width" /></td>
<td><input type="number" id="cube_height" /></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="calculate volume" onclick="cube_cal()" style="width:100%" />
</td>
</tr>
<tr>
<td style="text-align:right">Volume = </td>
<td style="text-align:center"><span id="cube_volume" /></td>
<td>ft<sup>3</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="cylinder_calculator" style="display:none">
<h2>Dimensions of cylinder</h2>
<table>
<thead>
<tr>
<td>radius (ft)</td>
<td>height (ft)</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" id="cylinder_radius" /></td>
<td><input type="number" id="cylinder_height" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="calculate volume" onclick="cylinder_cal()" style="width:100%" />
</td>
</tr>
<tr>
<td style="text-align:center">Volume =</td>
<td style="text-align:center">
<span id="cylinder_volume"></span>
<span> ft<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div>
<h2>Temperature converter</h2>
<span><input type="number" id="temperature1" /></span>
<select id="select_method" onchange="temperature_convert()">
<option selected="selected">Choose coversion method</option>
<option value="c_f">Celsius to Fahrenheit</option>
<option value="f_c">Fahrenheit to Celsius</option>
</select>
<span id="temperature2"></span>
</div>
</body>
</html>
-------------------------------------------------------------------
//javascript.js
function object_type_selector() {
var types = document.getElementsByName("object_type");
var selected_type;
var cube_calculator = document.getElementById("cube_calculator");
var cylinder_calculator = document.getElementById("cylinder_calculator");
for (var i = 0; i < types.length; i++) {
if (types[i].checked) { selected_type = types[i].value; }
}
if (selected_type == "cylinder") {
cylinder_calculator.style.display = "block";
cube_calculator.style.display = "none";
}
else {
cylinder_calculator.style.display = "none";
cube_calculator.style.display = "block";
}
}
function cube_cal() {
var l = document.getElementById("cube_length").value;
var w = document.getElementById("cube_width").value;
var h = document.getElementById("cube_height").value;
var l = parseFloat(l);
var w = parseFloat(w);
var h = parseFloat(h);
document.getElementById("cube_volume").innerHTML = (l * w * h).toFixed(2);
}
function cylinder_cal() {
var r = document.getElementById("cylinder_radius").value;
var h1 = document.getElementById("cylinder_height").value;
var r = parseFloat(r);
var h1 = parseFloat(h1);
document.getElementById("cylinder_volume").innerHTML = (Math.PI * Math.pow(r, 2) * h1).toFixed(2);
}
function temperature_convert() {
var t = document.getElementById("temperature1").value;
var methods = document.getElementById("select_method");
var selected_method = methods.options[methods.selectedIndex].value;
var t = parseFloat(t);
if (selected_method == "c_f") {
document.getElementById("temperature2").innerHTML = (t * 9 / 5 + 32).toFixed(2);
}
if (selected_method == "f_c") {
document.getElementById("temperature2").innerHTML = (5 / 9 * (t - 32)).toFixed(2);
}
}
reference:
http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-with-javascript
http://stackoverflow.com/questions/6242976/javascript-hide-show-element
http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
http://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page
https://www.w3schools.com/jsref/jsref_pi.asp
http://chuanshuoge2.blogspot.ca/2017/03/add-html-to-blog.html
No comments:
Post a Comment