-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 5d2f9b2
Showing
3 changed files
with
454 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| *{ | ||
| padding: 0; | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| color: white; | ||
| font-size: 16px; | ||
| } | ||
| body{ | ||
| display: grid; | ||
| place-items: center; | ||
| height: 100vh; | ||
| width: 100vw; | ||
| background-color: #121212; | ||
| } | ||
| main{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 350px; | ||
| height: 500px; | ||
| background: #1597ad; | ||
| align-items: center; | ||
| border-radius: 20px; | ||
| border: 3px solid #00859c; | ||
| padding-top:30px; | ||
| gap: 20px; | ||
| box-shadow: 8px 4px 15px #107385; | ||
| position: relative; | ||
| } | ||
| #view-area{ | ||
| display: flex; | ||
| flex-direction: column-reverse; | ||
| width: 100%; | ||
| } | ||
|
|
||
| #current-operation{ | ||
| width: 100%; | ||
| height: 100px; | ||
| background:#30829b; | ||
| position: relative; | ||
| font-size: 3rem; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: end; | ||
| overflow: auto; | ||
| } | ||
| #previus-operation-area{ | ||
| width: 100%; | ||
| height: 50px; | ||
| background:#30829b; | ||
| display: flex; | ||
| font-size: 1.5rem; | ||
| justify-content: end; | ||
| gap: 5px; | ||
| } | ||
|
|
||
| #result, #op-number{ | ||
| width: max-content; | ||
| height: 100%; | ||
| } | ||
|
|
||
| #previus-operation #op-type{ | ||
| height: 100%; | ||
| width: max-content; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| #buttons-area{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 5px; | ||
| } | ||
|
|
||
| .row{ | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| gap: 5px; | ||
| } | ||
|
|
||
| .buttons{ | ||
| display: grid; | ||
| place-items: center; | ||
| background: #1c8d71; | ||
| width: 80px; | ||
| height: 40px; | ||
| border: 1px solid #003d2e; | ||
| box-shadow: 1px 1px 0px #043b2e; | ||
| user-select:none | ||
| } | ||
| .buttons:hover{ | ||
| background:#095f4a; | ||
| } | ||
| .buttons:active{ | ||
| background: linear-gradient(45deg,#066951 30%,#1c8d71 65%,#066951 70%); | ||
| border: none; | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| #equal{ | ||
| background: #1c568d; | ||
| border: 1px solid #00183d; | ||
| box-shadow: 1px 1px 0px #040e3b; | ||
| } | ||
|
|
||
| #equal:hover{ | ||
| background: #04093b;; | ||
| } | ||
|
|
||
| #equal:active{ | ||
| background: linear-gradient(45deg,#00183d 30%,#1c568d 65%,#00183d 70%); | ||
| border: none; | ||
| box-shadow: none; | ||
| } | ||
| #historic{ | ||
| position: absolute; | ||
| font-size: 16px; | ||
| bottom: 94.5%; | ||
| left:88%; | ||
| background:#1597ad; | ||
| border: none; | ||
| width: 25px; | ||
| height: 25px; | ||
| display: grid; | ||
| place-items: center; | ||
| border-radius: 5px; | ||
| } | ||
| #historic:hover{ | ||
| background:#18abc5; | ||
| } | ||
| #historic:active{ | ||
| background:#117a8d; | ||
| } | ||
| i{ | ||
| color: #2415ad; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Calculadora</title> | ||
| <link rel="stylesheet" href="calc.css"> | ||
| <script src="https://kit.fontawesome.com/b794b89d66.js" crossorigin="anonymous"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <main> | ||
| <button id="historic"><i class="fa-solid fa-clock-rotate-left"></i></button> | ||
| <section id="view-area"> | ||
| <div id="current-operation"></div> | ||
| <div id="previus-operation-area"> | ||
| <div id="op-number"></div> | ||
| <div id="op-type"></div> | ||
| <div id="result"></div> | ||
| </div> | ||
| </section> | ||
| <section id="buttons-area"> | ||
| <div class="row"> | ||
| <button class="buttons operation-del" id="Backspace">Backspace</button> | ||
| <button class="buttons operation-del" id="Delete">C</button> | ||
| <button class="buttons operation-del" id="Escape">CE</button> | ||
| <button class="buttons operation">%</button> | ||
| </div> | ||
| <div class="row"> | ||
| <button class="buttons operation" id="R">1/x</button> | ||
| <button class="buttons operation" id="²">x²</button> | ||
| <button class="buttons operation" id="@">√x</button> | ||
| <button class="buttons simple-operation" id="/">÷</button> | ||
| </div> | ||
| <div class="row"> | ||
| <button class="buttons simple-operation" id="*">×</button> | ||
| <button class="buttons number">9</button> | ||
| <button class="buttons number">8</button> | ||
| <button class="buttons number">7</button> | ||
| </div> | ||
| <div class="row"> | ||
| <button class="buttons simple-operation">-</button> | ||
| <button class="buttons number">6</button> | ||
| <button class="buttons number">5</button> | ||
| <button class="buttons number">4</button> | ||
| </div> | ||
| <div class="row"> | ||
| <button class="buttons simple-operation">+</button> | ||
| <button class="buttons number">3</button> | ||
| <button class="buttons number">2</button> | ||
| <button class="buttons number">1</button> | ||
| </div> | ||
| <div class="row"> | ||
| <button class="buttons" id="equal">=</button> | ||
| <button class="buttons number">.</button> | ||
| <button class="buttons number">0</button> | ||
| <button class="buttons operation" id="F9">+/-</button> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| <script src="script2.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.