Skip to content

Instantly share code, notes, and snippets.

@liketaurus

liketaurus/index.html

Created December 30, 2020 13:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save liketaurus/b61f87e80e5c44ff225684afb04350d2 to your computer and use it in GitHub Desktop.
Save liketaurus/b61f87e80e5c44ff225684afb04350d2 to your computer and use it in GitHub Desktop.
Download ZIP
A simple JS task - choosing a function to calculate
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css" integrity="sha384-5QFXyVb+lrCzdN228VS3HmzpiE7ZVwLQtkt+0d9W43LQMzz4HBnnqvVxKg6O+04d"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6">
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div class="container">
<br>
<h1>Choose a formula to calculate:</h1>
<form class="form">
<div class="form-check">
<input type="radio" id="var1" name="variant" value="1" class="form-check-input"/>
<label for="var1" class="form-check-label">\(F = x + 2y\)</label>
</div>
<div class="form-check">
<input type="radio" id="var2" name="variant" value="2" class="form-check-input"/>
<label for="var2" class="form-check-label">\(F = 2x - 3y^2\)</label>
</div>
<div class="form-check">
<input type="radio" id="var3" name="variant" value="3" class="form-check-input"/>
<label for="var3" class="form-check-label">\(F = (1- x^2)/y^3\)</label>
</div>
<div class="form-check">
<input type="radio" id="var4" name="variant" value="4" class="form-check-input"/>
<label for="var4" class="form-check-label">\(F = 2x + 3y - z\)</label>
</div>
<hr>
<input type="button" value="Calculate" class="btn btn-primary" onClick="calculation()">
</form>
<div id="result" class="alert alert-primary" role="alert" style="display:none;">
Result is...
</div>
</div>
<script language="JavaScript" src="script.js"></script>
</body>
</html>
Raw
script.js
function calculation() {
var x= 12;
var y= 5;
var z = 2;
var result;
var variant = 0;
variant = $('input[name=variant]:checked').val();
switch (variant){
case "1":
result=x + 2*y;
break;
case "2":
result=2*x - 3*y*y;
break;
case "3":
result=(1- x^2)/(y*y*y);
break;
case "4":
result=2*x + 3*y - z;
break;
default:
// alert ("Error! Select a formula first!");
$("#result").html("Error! Select a formula first!");
$("#result").removeClass("alert-primary");
$("#result").addClass("alert-danger");
$("#result").show();
return;
}
$("#result").removeClass("alert-danger");
$("#result").addClass("alert-primary");
$("#result").html("x = "+x+", y = "+y+", z = "+z+"<br>"+
"Variant <strong>"+variant+"</strong> choosen! Result is: <strong>"+result+"</strong>");
$("#result").show();
//alert(result);
}
Raw
style.css
label{
margin-top:4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment