Responsive design + history

This commit is contained in:
2018-11-01 18:14:56 +09:00
parent 80bec68a28
commit 796b458a4e
3 changed files with 432 additions and 67 deletions

View File

@ -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>