Skip to content

Commit

Permalink
Calculadora do Chat
Browse files Browse the repository at this point in the history
  • Loading branch information
@FelipeHODiniz
FelipeHODiniz committed Jun 17, 2024
1 parent a72b32d commit d7dd83a
Show file tree
Hide file tree
Showing 4 changed files with 326 additions and 0 deletions.
90 changes: 90 additions & 0 deletions codigo/Calculadora/calculatorindex.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Calculadora</title>
<link rel="stylesheet" href="calculatorstyle.css">
</head>
<body>

<div class="wrapper">
<section class="screen">
0
</section>

<section class="calc-buttons">
<div class="calc-button-row">
<button class="calc-button double">
C
</button>
<button class="calc-button">
&larr;
</button>
<button class="calc-button">
&divide;
</button>
</div>

<div class="calc-button-row">
<button class="calc-button">
7
</button>
<button class="calc-button">
8
</button>
<button class="calc-button">
9
</button>
<button class="calc-button">
&times;
</button>
</div>
<div class="calc-button-row">
<button class="calc-button">
4
</button>
<button class="calc-button">
5
</button>
<button class="calc-button">
6
</button>
<button class="calc-button">
&minus;
</button>
</div>
<div class="calc-button-row">
<button class="calc-button">
1
</button>
<button class="calc-button">
2
</button>
<button class="calc-button">
3
</button>
<button class="calc-button">
&plus;
</button>
</div>
<div class="calc-button-row">
<button class="calc-button double">
0
</button>
<button class="calc-button">
.
</button>
<button class="calc-button">
&equals;
</button>
</div>



</section>
</div>

<script src="calculatorscript.js"></script>
</body>
</html>
95 changes: 95 additions & 0 deletions codigo/Calculadora/calculatorscript.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
let runningTotal = 0;
let buffer = "0";
let previousOperator;

const screen = document.querySelector('.screen');

function buttonClick(value){
if(isNaN(value)){
handSymbol(value);
}else{
handleNumber(value);
}
screen.innerText = buffer;
}

function handSymbol(symbol){
switch(symbol){
case 'C':
buffer = '0';
runningTotal = 0;
break;

case '=':
if(previousOperator === null){
return;
}
flushOperation(parseFloat(buffer));
previousOperator = null;
buffer = runningTotal;
runningTotal = 0;
break;
case '←':
if(buffer.length === 1){
buffer = '0';
}else{
buffer = buffer.substring(0, buffer.length - 1);
}
break;
case '.':
if(!buffer.includes('.')){
buffer += '.';
}
break;
case '−':
case '×':
case '÷':
case '+':
handleMath(symbol);
break;
    }
}

function handleMath(symbol){
if(buffer === '0'){
return;
}

const floatBuffer = parseFloat(buffer);

if(runningTotal === 0){
runningTotal = floatBuffer;
}else{
flushOperation(floatBuffer);
}
previousOperator = symbol;
buffer = '0';
}

function flushOperation(floatBuffer){
if(previousOperator === '+'){
runningTotal += floatBuffer;
}else if(previousOperator === '−'){
runningTotal -= floatBuffer;
}else if(previousOperator === '×'){
runningTotal *= floatBuffer;
}else if(previousOperator === '÷'){
runningTotal /= floatBuffer;
}
}

function handleNumber(numberString){
if(buffer === "0"){
buffer = numberString;
}else{
buffer += numberString;
}
}

function init(){
document.querySelector('.calc-buttons').addEventListener('click', function(event){
buttonClick(event.target.innerText);
});
}

init();
102 changes: 102 additions & 0 deletions codigo/Calculadora/calculatorstyle.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
html{
box-sizing: border-box;
height: 100%;
}

*,
*::before,
*::after{
box-sizing: inherit;
margin: 0;
padding: 0;
}

body{
align-items: center;
background: linear-gradient(320deg, #F3A606, #C45F74ff, #9517E1ff);
display: flex;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-display: swap;
height: inherit;
justify-content: center;
}

.wrapper{
backdrop-filter: blur(5.5px);
-webkit-backdrop-filter: blur(5.5px);
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgb(red, green, blue, 0.01);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
color: #232323;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.30);
border: 1px solid rgba(255, 255, 255, 0.34);
flex-basis: 400px;
height: 540px;
padding: 20px 35px;
}

.screen{
backdrop-filter: blur(5.5px);
-webkit-backdrop-filter: blur(5.5px);
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgb(red, green, blue, 0.01);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
color: #232323;
font-size: 35px;
overflow: auto;
padding: 20px;
text-align: right;
width: 326px;
}

.calc-button-row{
display: flex;
justify-content: space-between;
margin: 5% 0;
}

.calc-button{
backdrop-filter: blur(5.5px);
-webkit-backdrop-filter: blur(5.5px);
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgb(255, 255, 255, 0.01);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
color: #232323;
flex-basis: 20%;
font-family: inherit;
font-size: 24px;
height: 65px;
}

.calc-button:last-child{
backdrop-filter: blur(5.5px);
-webkit-backdrop-filter: blur(5.5px);
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgb(255, 255, 255, 0.01);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(35, 35, 35, 0.1);
color: #fff;
background: #9517E1;
}

.calc-button:last-child:hover{
background-color: inherit;
color: inherit;
}

.calc-button:hover{
background-color: inherit;
}
.calc-button:active{
background-color: #F3A606;
}

.double{
flex-basis: 47%;
}

39 changes: 39 additions & 0 deletions codigo/Calculadora/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora Pop-up</title>
<link href='https://fonts.googleapis.com/css?family=KoHo' rel='stylesheet'>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
button {
font-family: KoHo;
background-color: #9517E1;
color: #F3A606;
border-color: #9517E1;
border-radius: 16px;

padding: 10px 20px;
font-size: 1.5em;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="openCalculator()">Calculadora</button>

<script>
function openCalculator() {
window.open('calculator.html', 'Calculadora', 'width=400,height=550');
}
</script>
</body>
</html>

0 comments on commit d7dd83a

Please sign in to comment.