Responsive design + history
This commit is contained in:
parent
80bec68a28
commit
796b458a4e
146
index.html
146
index.html
@ -18,79 +18,103 @@
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="display-container">
|
||||
|
||||
<div class="display">
|
||||
<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="buttons-container">
|
||||
<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="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="calculator-container">
|
||||
<div class="display-container">
|
||||
|
||||
<div class="buttons-operators">
|
||||
<div class="display"></div>
|
||||
|
||||
<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 class="clears-buttons-container">
|
||||
<div id="sup">SUP</div>
|
||||
<div id="ac">AC</div>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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 = $( "<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 ) {
|
||||
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();
|
||||
} );
|
||||
Loading…
Reference in New Issue
Block a user