Responsive design + history
This commit is contained in:
parent
80bec68a28
commit
796b458a4e
26
index.html
26
index.html
@ -18,9 +18,32 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="main-history">
|
||||||
|
|
||||||
|
<div class="delete-history-container">
|
||||||
|
|
||||||
|
<span>History</span>
|
||||||
|
<div id="delete-history">Delete</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="history-container"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expand-buttons">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path fill="white" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="calculator-container">
|
||||||
<div class="display-container">
|
<div class="display-container">
|
||||||
|
|
||||||
<div class="display">
|
<div class="display"></div>
|
||||||
|
|
||||||
|
<div class="clears-buttons-container">
|
||||||
|
<div id="sup">SUP</div>
|
||||||
|
<div id="ac">AC</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -92,6 +115,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,10 @@ body, html {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.button-input {
|
.button-input {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: white;
|
color: white;
|
||||||
@ -10,6 +14,7 @@ body, html {
|
|||||||
width: 33.333333333333333%;
|
width: 33.333333333333333%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 25%;
|
height: 25%;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons-operators .button-input {
|
.buttons-operators .button-input {
|
||||||
@ -46,6 +51,11 @@ body, html {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background: #1F1F1F;
|
background: #1F1F1F;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
max-width: none;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons-container {
|
.buttons-container {
|
||||||
@ -56,6 +66,7 @@ body, html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons-numbers {
|
.buttons-numbers {
|
||||||
@ -73,16 +84,12 @@ body, html {
|
|||||||
background: #232323;
|
background: #232323;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Affichage */
|
|
||||||
|
|
||||||
.display-container {
|
.display-container {
|
||||||
height: 40%;
|
height: 40%;
|
||||||
top: 0;
|
top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 20% 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.display {
|
.display {
|
||||||
@ -94,7 +101,13 @@ body, html {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
line-height: initial;
|
||||||
transform: translate(-50%, -50%);
|
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 {
|
.display.big {
|
||||||
@ -108,3 +121,192 @@ body, html {
|
|||||||
.display.small {
|
.display.small {
|
||||||
font-size: 40px;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -6,6 +6,12 @@ let operators = [
|
|||||||
'.'
|
'.'
|
||||||
];
|
];
|
||||||
let operation = "";
|
let operation = "";
|
||||||
|
let operations = [];
|
||||||
|
|
||||||
|
if ( localStorage.getItem( "operations" ) ) {
|
||||||
|
operations = JSON.parse( localStorage.getItem( "operations" ) );
|
||||||
|
setTimeout( () => insertHistory(), 10 );
|
||||||
|
}
|
||||||
|
|
||||||
function calculate() {
|
function calculate() {
|
||||||
let $display = $( ".display" );
|
let $display = $( ".display" );
|
||||||
@ -13,13 +19,137 @@ function calculate() {
|
|||||||
try {
|
try {
|
||||||
let result = eval( operation );
|
let result = eval( operation );
|
||||||
|
|
||||||
|
operations.unshift( {
|
||||||
|
calcul: operation,
|
||||||
|
result,
|
||||||
|
date: new Date().getTime()
|
||||||
|
} );
|
||||||
$display.text( result );
|
$display.text( result );
|
||||||
operation = result.toString();
|
operation = result.toString();
|
||||||
|
setFontSize( $display );
|
||||||
|
localStorage.setItem( "operations", JSON.stringify( operations ) );
|
||||||
|
insertHistory();
|
||||||
} catch (e) {
|
} 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 = $( "<div></div>" );
|
||||||
|
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(`
|
||||||
|
<div class="calcul-container">
|
||||||
|
<div class="operation">${ operation.calcul }</div>
|
||||||
|
<div class="result">${ operation.result }</div>
|
||||||
|
</div>` );
|
||||||
|
} 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(`
|
||||||
|
<div class="day-container" data-day="${ date.toDateString() }">
|
||||||
|
<div class="title">${ daysAgo }</div>
|
||||||
|
<div class="calcul-container">
|
||||||
|
<div class="operation">${ operation.calcul }</div>
|
||||||
|
<div class="result">${ operation.result }</div>
|
||||||
|
</div>
|
||||||
|
</div>` );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 ) {
|
$( document ).on( "keypress", "#main-input", function ( e ) {
|
||||||
let char = e.charCode;
|
let char = e.charCode;
|
||||||
let $this = $( this );
|
let $this = $( this );
|
||||||
@ -36,7 +166,6 @@ $( document ).on( "keypress", "#main-input", function ( e ) {
|
|||||||
} else {
|
} else {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
console.log( char );
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
$( document ).on( "click", ".button-input", function () {
|
$( document ).on( "click", ".button-input", function () {
|
||||||
@ -50,5 +179,15 @@ $( document ).on( "click", ".button-input", function () {
|
|||||||
operation += $elem.find( "span" ).html();
|
operation += $elem.find( "span" ).html();
|
||||||
$display.text( operation );
|
$display.text( operation );
|
||||||
$display.scrollLeft( 1000 );
|
$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();
|
||||||
|
} );
|
||||||
Loading…
Reference in New Issue
Block a user