Skip to content

Instantly share code, notes, and snippets.

@adrientetar

adrientetar/Calculatrice.html

Last active November 20, 2022 09:58
Show Gist options
  • Save adrientetar/4353910 to your computer and use it in GitHub Desktop.
Save adrientetar/4353910 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calc.js
/*
* Calculatrice en Javascript.
*
* Copyright © 2012, Adrien Tétar.
*/
//================================== Var definitions. ======================================
/* Two numbers calc will work with. */
var nb1 = 0, nb2 = 0;
/* Operation type. */
var op = 'null';
var cpt = 0;
//============================== Add numbers on 'screen'.===================================
function ajouteChiffre(form,val)
{
form.texte.value += val;
}
//============== Test if a comma has already been appended or not. =========================
function ajoutePoint(form)
{
if (form.texte.value.length == 0)
{
form.texte.value = "0.";
}
else
{
var j = 0;
for (var i=0;i<form.texte.value.length;i++)
{
if (form.texte.value.charAt(i) == ".")
{
j = 1;
break;
}
}
(j == 0) ? (form.texte.value += ".") : (alert("D\351j\340 entr\351."));
}
}
//============================== Set operation type. ========================================
function setOp(opType)
{
if (op == 'null')
{
op = opType;
}
else
{
alert("Vous \352tes d\351j\340 en train de faire une " + op + ".");
form.texte.value = "";
}
}
//===================================== Reset. ===============================================
function raz(form)
{
form.texte.value = "";
form.affichage.value = "";
nb1 = 0, nb2 = 0;
op = 'null';
cpt = 0;
}
//=============================== Store variables. ===========================================
function store(form)
{
if ((form.texte.value != "") && (op == 'null') && (cpt == 0)) // op is set after first var storage
{
nb1 = form.texte.value;
form.texte.value = "";
cpt++;
}
else if ((form.texte.value != "") && (op != 'null') && (cpt == 1))
{
nb2 = form.texte.value;
form.texte.value = "";
cpt++;
}
/* else: do nothing. */
}
/*
* Workaround for unwanted behavior: when entering the first variable and clicking equal the var will get stored.
*/
function storeEq(form)
{
if (cpt == 1)
{
store(form);
}
}
//================================== Calculate. ===============================================
function calc(form)
{
/* Break if the user clicked on the equal button without entering 2 variables. */
if (cpt < 2) // We don't use (nbX == 0) check because 0 can be a user-entered value.
{
alert("Il faut deux nombres pour pouvoir faire un calcul.");
}
else
{
if (op == "somme")
{
form.affichage.value = parseInt(nb1) + parseInt(nb2);
}
else if (op == "soustraction")
{
form.affichage.value = parseInt(nb1) - parseInt(nb2);
}
else if (op == "multiplication")
{
form.affichage.value = nb1 * nb2;
}
else if (op == "division")
{
if (nb2 == 0)
{
alert("On ne peut pas diviser par z\351ro.");
}
else
{
form.affichage.value = nb1 / nb2;
}
}
}
}
Raw
Calculatrice.html
<!DOCTYPE html>
<html lang="fr-fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Calculatrice</title>
<meta name="author" content="Adrien TETAR" />
<meta name="description" content="Calculatrice en JavaScript" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
<h1>Calculatrice</h1>
<br>
<script src="calc.js"></script>
<noscript>Désolé, la calculatrice a besoin de JavaScript pour fonctionner!</noscript>
<form>
<table>
<tbody>
<tr>
<td colspan="4">
<input name="texte" size="20" type="text" readonly />
</td>
</tr>
<tr>
<td>
<input value="7" onclick="ajouteChiffre(this.form,'7')" type="button" class="mainbutton" />
</td>
<td>
<input value="8" onclick="ajouteChiffre(this.form,'8')" type="button" class="mainbutton" />
</td>
<td>
<input value="9" onclick="ajouteChiffre(this.form,'9')" type="button" class="mainbutton" />
</td>
<td>
<input value="+" onclick='store(this.form); setOp("somme")' type="button" />
</td>
</tr>
<tr>
<td>
<input value="4" onclick="ajouteChiffre(this.form,'4')" type="button" class="mainbutton" />
</td>
<td>
<input value="5" onclick="ajouteChiffre(this.form,'5')" type="button" class="mainbutton" />
</td>
<td>
<input value="6" onclick="ajouteChiffre(this.form,'6')" type="button" class="mainbutton" />
</td>
<td>
<input value="-" onclick='store(this.form); setOp("soustraction")' type="button" />
</td>
</tr>
<tr>
<td>
<input value="1" onclick="ajouteChiffre(this.form,'1')" type="button" class="mainbutton" />
</td>
<td>
<input value="2" onclick="ajouteChiffre(this.form,'2')" type="button" class="mainbutton" />
</td>
<td>
<input value="3" onclick="ajouteChiffre(this.form,'3')" type="button" class="mainbutton" />
</td>
<td>
<input value="*" onclick='store(this.form); setOp("multiplication")' type="button" />
</td>
</tr>
<tr>
<td>
<input value="0" onclick="ajouteChiffre(this.form,'0')" type="button" class="mainbutton" />
</td>
<td>
<input value="." onclick="ajoutePoint(this.form)" type="button" class="mainbutton" />
</td>
<td>
<input value="C" onclick='raz(this.form)' type="button" class="mainbutton" />
</td>
<td>
<input value="/" onclick='store(this.form); setOp("division")' type="button" />
</td>
</tr>
<tr>
<td colspan="3">
<input name="affichage" size="15" type="text" readonly />
</td>
<td>
<input value="=" onclick='storeEq(this.form); calc(this.form)' type="button" />
</td>
</tr>
</tbody>
</table>
<br>
</form>
<footer>
Copyright &copy; 2012, Adrien T&eacute;tar. All rights reserved.
</footer>
</body>
</html>
Raw
style.css
html {
background-color: #DEDEDE;
font-family: 'Calibri', Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: center;
}
table {
background-color: #ffffff;
border-color: #000000;
border-style: solid;
border-width: 2px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
td {
border-style: double;
border-width: 1px;
text-align: center;
}
input[readonly] {
text-align: right;
}
input[type="button"] {
padding: 0.2em;
}
.mainbutton {
width: 36px;
}
/* Select only the "op" buttons, on the right column. */
input:not(.mainbutton):not([type="text"]) {
width: 25px;
}
@MT-Sentissi
Copy link

Waw, Super!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment