+
diff --git a/ressources/index.css b/ressources/index.css
index 68ddf23..a0b3e10 100644
--- a/ressources/index.css
+++ b/ressources/index.css
@@ -2,6 +2,10 @@ body, html {
height: 100%;
}
+* {
+ box-sizing: border-box;
+}
+
.button-input {
position: relative;
color: white;
@@ -10,6 +14,7 @@ body, html {
width: 33.333333333333333%;
text-align: center;
height: 25%;
+ cursor: pointer;
}
.buttons-operators .button-input {
@@ -46,6 +51,11 @@ body, html {
height: 100%;
background: #1F1F1F;
width: 100%;
+ z-index: 0;
+ padding: 0;
+ margin: 0;
+ max-width: none;
+ display: block;
}
.buttons-container {
@@ -56,6 +66,7 @@ body, html {
width: 100%;
height: 60%;
line-height: 0;
+ z-index: 0;
}
.buttons-numbers {
@@ -73,16 +84,12 @@ body, html {
background: #232323;
}
-
-
-/* Affichage */
-
.display-container {
height: 40%;
top: 0;
position: absolute;
- padding: 20% 0;
width: 100%;
+ z-index: 0;
}
.display {
@@ -94,7 +101,13 @@ body, html {
left: 50%;
top: 50%;
overflow: auto;
+ line-height: initial;
transform: translate(-50%, -50%);
+ -webkit-transition: font 0.3s ease;
+ -moz-transition: font 0.3s ease;
+ -o-transition: font 0.3s ease;
+ -ms-transition: font 0.3s ease;
+ transition: font 0.3s ease;
}
.display.big {
@@ -107,4 +120,193 @@ body, html {
.display.small {
font-size: 40px;
+}
+
+.clears-buttons-container {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ height: 60px;
+ width: 130px;
+ display: block;
+ font-size: 0;
+ line-height: 0;
+}
+
+.clears-buttons-container div, .expand-buttons div {
+ width: 60px;
+ height: 60px;
+ display: inline-block;
+ border-radius: 50%;
+ vertical-align: top;
+ background: #424242;
+ font-size: 16px;
+ line-height: 60px;
+ text-align: center;
+ color: white;
+ font-weight: 600;
+ opacity: 0;
+ cursor: pointer;
+
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+.clears-buttons-container.show div {
+ opacity: 1;
+}
+
+#sup {
+ margin-right: 10px;
+}
+
+.expand-buttons {
+ position: absolute;
+ top: calc( 40% - 40px );
+ left: 50%;
+ transform: translateX( -50% );
+ width: 35px;
+ height: 35px;
+ z-index: 2;
+
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+.expand-buttons svg {
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+.container.history .expand-buttons {
+ top: calc( 100% - 40px );
+}
+
+.container.history .expand-buttons svg {
+ transform: rotate( 180deg );
+}
+
+.main-history {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: #1F1F1F;
+ z-index: 1;
+ top: -100%;
+
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+.container.history .main-history {
+ top: 0;
+}
+
+.day-container {
+ color: white;
+ border-bottom: 1px solid rgba(97,97,97,0.5);
+ padding: 10px;
+ line-height: initial;
+}
+
+.day-container:last-child {
+ border-bottom: none;
+}
+
+.day-container .title {
+ color: #ffc107;
+ font-weight: 600;
+ font-size: 12px;
+}
+
+.day-container .calcul-container {
+ text-align: right;
+ padding: 3px 0;
+ font-size: 25px;
+ color: white;
+ font-family: sans-serif;
+}
+
+.day-container .calcul-container .operation {
+ overflow: auto;
+}
+
+.day-container .calcul-container .result {
+ color: #9e9e9e;
+}
+
+.delete-history-container {
+ background: black;
+ height: 40px;
+ width: 100%;
+ font-size: 17px;
+ color: white;
+ text-align: center;
+ line-height: 40px;
+}
+
+.delete-history-container span {
+ font-size: 28px;
+}
+
+.delete-history-container #delete-history {
+ position: absolute;
+ right: 10px;
+ top: 0;
+ line-height: 40px;
+ color: #9e9e9e;
+ cursor: pointer;
+}
+
+.history-container {
+ height: calc( 100% - 40px );
+ overflow: auto;
+}
+
+@media screen and ( min-width: 1020px ) {
+
+ .calculator-container {
+ display: inline-block;
+ height: 100%;
+ width: 60%;
+ line-height: 0;
+ position: absolute;
+ font-size: 0;
+ }
+
+ .main-history {
+ display: inline-block;
+ position: relative;
+ width: 40%;
+ top: 0;
+ line-height: 0;
+ height: 100%;
+ vertical-align: top;
+ font-size: 0;
+ }
+
+ .history-container {
+ background-color: #161616;
+ }
+
+ .expand-buttons {
+ display: none;
+ }
+
+ .container {
+ overflow: hidden;
+ }
+
}
\ No newline at end of file
diff --git a/ressources/index.js b/ressources/index.js
index 7b47397..715b30d 100644
--- a/ressources/index.js
+++ b/ressources/index.js
@@ -6,6 +6,12 @@ let operators = [
'.'
];
let operation = "";
+let operations = [];
+
+if ( localStorage.getItem( "operations" ) ) {
+ operations = JSON.parse( localStorage.getItem( "operations" ) );
+ setTimeout( () => insertHistory(), 10 );
+}
function calculate() {
let $display = $( ".display" );
@@ -13,13 +19,137 @@ function calculate() {
try {
let result = eval( operation );
+ operations.unshift( {
+ calcul: operation,
+ result,
+ date: new Date().getTime()
+ } );
$display.text( result );
operation = result.toString();
+ setFontSize( $display );
+ localStorage.setItem( "operations", JSON.stringify( operations ) );
+ insertHistory();
} catch (e) {
}
}
+function setFontSize( $display ) {
+ let length = operation.length;
+ let clearsButtons = $( ".clears-buttons-container" );
+
+ if ( length > 0 ) {
+ clearsButtons.addClass( "show" );
+ } else {
+ clearsButtons.removeClass( "show" );
+ }
+ if ( length <= 10 ) {
+ $display.removeClass( "big" );
+ $display.removeClass( "medium" );
+ $display.removeClass( "small" );
+ } else if ( length <= 12 ) {
+ $display.addClass( "big" );
+ $display.removeClass( "medium" );
+ $display.removeClass( "small" );
+ } else if ( length <= 14 ) {
+ $display.addClass( "medium" );
+ $display.removeClass( "big" );
+ $display.removeClass( "small" );
+ } else if ( length <= 16 ) {
+ $display.addClass( "small" );
+ $display.removeClass( "big" );
+ $display.removeClass( "medium" );
+ }
+}
+
+function roundDate( date ) {
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+ return date;
+}
+
+function diff2Dates( date1, date2 ) {
+ let one_day = 1000 * 60 * 60 * 24;
+
+ let date1_ms = date1.getTime();
+ let date2_ms = date2.getTime();
+
+ let difference_ms = date2_ms - date1_ms;
+
+ return Math.round( difference_ms / one_day );
+}
+
+function insertHistory() {
+ let $html = $( "
" );
+ let now = roundDate( new Date() );
+ let historyContainer = $( ".history-container" );
+
+ if ( operations.length > 0 ) {
+ for ( let operation of operations ) {
+ let date = roundDate( new Date( operation.date ) );
+
+ if ( $html.find( `.day-container[data-day="${ date.toDateString() }"]` ).length > 0 ) {
+ $html.find( `.day-container[data-day="${ date.toDateString() }"] .title` ).after(`
+
+
${ operation.calcul }
+
${ operation.result }
+
` );
+ } else {
+ let daysAgo = "";
+ let diff = diff2Dates( date, now );
+
+ if ( diff === 0 ) {
+ daysAgo = "Today";
+ } else if ( diff === 1 ) {
+ daysAgo = "Yesterday";
+ } else {
+ daysAgo = diff + "days ago";
+ }
+ $html.prepend(`
+
+
${ daysAgo }
+
+
${ operation.calcul }
+
${ operation.result }
+
+
` );
+ }
+ }
+
+ historyContainer.html( $html.html() );
+ historyContainer.animate( { scrollTop: historyContainer[0].scrollHeight }, 300 );
+ // historyContainer.scrollTop( historyContainer[0].scrollHeight );
+ } else {
+ historyContainer.empty();
+ }
+}
+
+$( document ).on( "click", "#ac", function () {
+ if ( operation.length > 0 ) {
+ let $display = $( ".display" );
+
+ operation = "";
+ $display.text( operation );
+ $display.scrollLeft( 1000 );
+
+ setFontSize( $display );
+ }
+} );
+
+$( document ).on( "click", "#sup", function () {
+ if ( operation.length > 0 ) {
+ let $display = $( ".display" );
+
+ operation = operation.slice( 0, -1 );
+ $display.text( operation );
+ $display.scrollLeft( 1000 );
+
+ setFontSize( $display );
+ }
+} );
+
$( document ).on( "keypress", "#main-input", function ( e ) {
let char = e.charCode;
let $this = $( this );
@@ -36,7 +166,6 @@ $( document ).on( "keypress", "#main-input", function ( e ) {
} else {
e.preventDefault();
}
- console.log( char );
} );
$( document ).on( "click", ".button-input", function () {
@@ -50,5 +179,15 @@ $( document ).on( "click", ".button-input", function () {
operation += $elem.find( "span" ).html();
$display.text( operation );
$display.scrollLeft( 1000 );
+
+ setFontSize( $display );
}
+} );
+
+$( document ).on( "click", ".expand-buttons", () => $( ".container" ).toggleClass( "history" ) );
+
+$( document ).on( "click", "#delete-history", function () {
+ operations = [];
+ localStorage.setItem( "operations", JSON.stringify( operations ) );
+ insertHistory();
} );
\ No newline at end of file