mathieu/CAU-Web-Fall-2018-Project-2
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First push

Browse Source
This commit is contained in:
Mathieu Sanchez 2018-10-31 13:14:18 +09:00
commit 80bec68a28
6 changed files with 285 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
index.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="ressources/materialize.min.css">
<script src="ressources/jquery-3.3.1.min.js"></script>
<script src="ressources/materialize.min.css"></script>
<link rel="stylesheet" type="text/css" href="ressources/index.css">
<script src="ressources/index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="display-container">
<div class="display">
</div>
</div>
<div class="buttons-container">
<div class="buttons-numbers">
<div class="button-input">
<span>9</span>
</div>
<div class="button-input">
<span>8</span>
</div>
<div class="button-input">
<span>7</span>
</div>
<div class="button-input">
<span>6</span>
</div>
<div class="button-input">
<span>5</span>
</div>
<div class="button-input">
<span>4</span>
</div>
<div class="button-input">
<span>3</span>
</div>
<div class="button-input">
<span>2</span>
</div>
<div class="button-input">
<span>1</span>
</div>
<div class="button-input">
<span>.</span>
</div>
<div class="button-input">
<span>0</span>
</div>
<div class="button-input" style="background-color: #d00506">
<span>=</span>
</div>
</div>
<div class="buttons-operators">
<div class="parenthesis">
<div class="button-input">
<span>(</span>
</div>
<div class="button-input">
<span>)</span>
</div>
</div>
<div class="button-input">
<span>/</span>
</div>
<div class="button-input">
<span>*</span>
</div>
<div class="button-input">
<span>-</span>
</div>
<div class="button-input">
<span>+</span>
</div>
</div>
</div>
</div>
</body>
</html>

110
ressources/index.css Normal file
View File

@ -0,0 +1,110 @@
body, html {
height: 100%;
}
.button-input {
position: relative;
color: white;
font-size: 40px;
display: inline-block;
width: 33.333333333333333%;
text-align: center;
height: 25%;
}
.buttons-operators .button-input {
width: 100%;
height: 20%;
}
.button-input span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parenthesis {
width: 100%;
height: 20%;
}
.parenthesis .button-input {
width: 50%;
height: 100%;
}
.button-input.parenthesis div {
display: inline-block;
width: 50%;
position: relative;
height: 100%;
font-size: 40px;
}
.container {
height: 100%;
background: #1F1F1F;
width: 100%;
}
.buttons-container {
position: absolute;
bottom: 0;
display: block;
font-size: 0;
width: 100%;
height: 60%;
line-height: 0;
}
.buttons-numbers {
display: inline-block;
width: 75%;
height: 100%;
background: #000;
vertical-align: top;
}
.buttons-operators {
display: inline-block;
width: 25%;
height: 100%;
background: #232323;
}
/* Affichage */
.display-container {
height: 40%;
top: 0;
position: absolute;
padding: 20% 0;
width: 100%;
}
.display {
text-align: right;
color: white;
font-size: 70px;
position: absolute;
width: 94%;
left: 50%;
top: 50%;
overflow: auto;
transform: translate(-50%, -50%);
}
.display.big {
font-size: 60px;
}
.display.medium {
font-size: 50px;
}
.display.small {
font-size: 40px;
}

54
ressources/index.js Normal file
View File

@ -0,0 +1,54 @@
let operators = [
'+',
'-',
'/',
'*',
'.'
];
let operation = "";
function calculate() {
let $display = $( ".display" );
try {
let result = eval( operation );
$display.text( result );
operation = result.toString();
} catch (e) {
}
}
$( document ).on( "keypress", "#main-input", function ( e ) {
let char = e.charCode;
let $this = $( this );
if ( char === 13 ) {
calculate( $this.val() );
} else if ( operators.indexOf( String.fromCharCode( char ) ) >= 0 ) {
// Operators
if ( operators.indexOf( $this.val().split("").pop() ) >= 0 ) {
e.preventDefault();
}
} else if ( ( char >= 48 && char <= 57 ) || char === 40 || char === 41 ) {
// Number
} else {
e.preventDefault();
}
console.log( char );
} );
$( document ).on( "click", ".button-input", function () {
let $elem = $( this );
let input = $elem.find( "span" ).html();
let $display = $( ".display" );
if ( input === "=" ) {
calculate();
} else {
operation += $elem.find( "span" ).html();
$display.text( operation );
$display.scrollLeft( 1000 );
}
} );

2
ressources/jquery-3.3.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
ressources/materialize.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
ressources/materialize.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long