+
+
\ No newline at end of file
diff --git a/manual.txt b/manual.txt
new file mode 100644
index 0000000..e82d1b3
--- /dev/null
+++ b/manual.txt
@@ -0,0 +1,45 @@
+Antes de começar a utilizar as calculadoras é necessário saber qual a finalidade de cada uma, todas elas envolvem porcentagem.
+
+Obs 1.: No caso de números decimais, utilize ponto (.) ao invés de vírgula (,).
+
+1. Quantidade Equivalente:
+
+ ♦ Descrição: Calculadora para descobrir a quantidade/valor de determinado percentual.
+ ♦ Obs.: Caso tenha um valor inteiro digite no espaço da primeira porcentagem 100.
+ ♦ Ex 1.: Em um evento, estão presentes 150 pessoas, 45% delas são mulheres, qual a quantidade de mulheres nesse evento?
+ => Aqui você colocaria o 150 na 1ª caixa, 100 (de 100%, que é o total de pessoas em percentual) na 2ª, e, 45 na caixa debaixo.
+ ♦ Ex 2.: Em um evento, 250 pessoas presentes são pagantes, o que corresponde a 95% do público. Qual o público total desse evento?
+ => Nesse caso, colocaria 250 na 1ª, 95 na 2ª, e, 100 (o que corresponde em % o total) na caixa debaixo.
+
+2. Quantidade Aumentada:
+
+ ♦ Descrição: Calculadora para somar a quantidade dada ao percentual dado em cima dela.
+ ♦ Ex.: Você vai a um restaurante e seu consumo é de R$ 75, mas ainda falta incluir na conta os 10% do garçom. Qual valor da conta?
+ => Nesse caso, você colocaria o 75 na caixa de cima e o 10 na caixa debaixo.
+
+3. Quantidade Diminuída:
+
+ ♦ Descrição: Calculadora para descontar a quantidade dada pelo percentual dado em cima dela.
+ ♦ Ex.: Você vai a uma loja e suas compras deram R$ 105, mas você possui um desconto de 10% na sua compra. Qual o valor da compra?
+ => Nesse caso, você colocaria o 105 na caixa de cima e o 10 na caixa debaixo.
+
+4. Porcentagem Equivalente:
+
+ ♦ Descrição: Calculadora para descobrir o percentual de determinada quantidade.
+ ♦ Obs.: Caso tenha um valor inteiro digite no espaço da primeira porcentagem 100.
+ ♦ Ex 1.: Em um evento, estão presentes 150 pessoas, 65 são mulheres, qual a porcentagem de mulheres nesse evento?
+ => Aqui você colocaria o 150 na 1ª caixa, 100 (de 100%, que é o total de pessoas em percentual) na 2ª, e, 65 na caixa debaixo.
+ ♦ Ex 2.: Você está no posto de gasolina e pagou R$ 70 pra encher meio tanque. Quantos % do tanque você preencheria com R$ 20?
+ => Nesse caso, colocaria 70 na 1ª, 50 (já que representa metade do tanque) na 2ª, e, 20 na caixa debaixo.
+
+5. Aumento Percentual:
+
+ ♦ Descrição: Calculadora para definir quantos % de aumento teve de um caso pro outro.
+ ♦ Ex.: Você vai pagar uma conta de R$ 350 e percebe que no mês passado essa conta foi de R$ 285. Quantos % sua conta aumentou?
+ => Nesse caso, você colocaria o 285 na caixa de cima e o 350 na caixa debaixo.
+
+6. Desconto Percentual:
+
+ ♦ Descrição: Calculadora para definir quantos % de desconto teve de um caso pro outro.
+ ♦ Ex.: Você foi comprar um produto por R$ 80, ao passar no caixa, recebeu um desconto e seu produto custou R$ 55. Quantos % de desconto você teve?
+ => Nesse caso, você colocaria o 80 na caixa de cima e o 55 na caixa debaixo.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..55519b8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,83 @@
+function qtd_equivalente(){
+ let qtd = parseFloat(document.getElementById('input1').value);
+ let porcentagem1 = parseFloat(document.getElementById('input2').value);
+ let porcentagem2 = parseFloat(document.getElementById('input3').value);
+ let resultado = (porcentagem2*qtd/porcentagem1).toFixed(2);
+ if(isNaN(qtd) || isNaN(porcentagem1) || isNaN(porcentagem2)){
+ alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+ }
+ else{
+ document.getElementById('resultado1').innerHTML = resultado;
+ }
+};
+
+function qtd_aumentada(){
+ let qtd = parseFloat(document.getElementById('input4').value);
+ let porcentagem = parseFloat(document.getElementById('input5').value);
+ let resultado = (qtd + qtd*porcentagem/100).toFixed(2);
+ if(isNaN(qtd) || isNaN(porcentagem)){
+ alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+ }
+ else{
+ document.getElementById('resultado2').innerHTML = resultado;
+ }
+};
+
+function qtd_diminuida(){
+ let qtd = parseFloat(document.getElementById('input6').value);
+ let porcentagem = parseFloat(document.getElementById('input7').value);
+ let resultado = (qtd - qtd*porcentagem/100).toFixed(2);
+ if(isNaN(qtd) || isNaN(porcentagem)){
+ alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+ }
+ else{
+ document.getElementById('resultado3').innerHTML = resultado;
+ }
+};
+
+function porcentagem_equivalente(){
+ let qtd1 = parseFloat(document.getElementById('input8').value);
+ let porcentagem = parseFloat(document.getElementById('input9').value);
+ let qtd2 = parseFloat(document.getElementById('input10').value);
+ let resultado = (porcentagem*qtd2/qtd1).toFixed(2) + '%';
+ if(isNaN(qtd1) || isNaN(porcentagem) || isNaN(qtd2)){
+ alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+ }
+ else{
+ document.getElementById('resultado4').innerHTML = resultado;
+ }
+};
+
+function aumento_percentual(){
+ let qtd1 = parseFloat(document.getElementById('input11').value);
+ let qtd2 = parseFloat(document.getElementById('input12').value);
+ if(isNaN(qtd1) || isNaN(qtd2)){
+ alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+ }
+ else{
+ if(qtd2 >= qtd1){
+ let resultado = (qtd2*100/qtd1 - 100).toFixed(2) + '%';
+ document.getElementById('resultado5').innerHTML = resultado;
+ }
+ else{
+ alert('A quantidade 2 tem que ser maior que a quantidade 1.');
+ }
+ }
+};
+
+function desconto_percentual(){
+ let qtd1 = parseFloat(document.getElementById('input13').value);
+ let qtd2 = parseFloat(document.getElementById('input14').value);
+ if(isNaN(qtd1) || isNaN(qtd2)){
+ alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+ }
+ else{
+ if(qtd2 <= qtd1){
+ let resultado = (100 - qtd2*100/qtd1).toFixed(2) + '%';
+ document.getElementById('resultado6').innerHTML = resultado;
+ }
+ else{
+ alert('A quantidade 2 tem que ser menor que a quantidade 1.');
+ }
+ }
+};
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..70ad1fa
--- /dev/null
+++ b/style.css
@@ -0,0 +1,73 @@
+body{
+ background-color: black;
+}
+
+.container{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.box{
+ width: 50%;
+ margin: 25px auto;
+ border-radius: 20px;
+ line-height: 50px;
+ min-height: 300px;
+ align-self: center;
+ text-align: center;
+}
+
+#box1{
+ /*background-color: rgb(246, 178, 51);*/
+ background: rgb(255,46,0);
+ background: linear-gradient(90deg, rgba(255,46,0,1) 0%, rgba(237,159,12,1) 100%);
+}
+
+#box2{
+ /*background-color: rgb(245, 190, 89);*/
+ background: rgb(237,159,12);
+ background: linear-gradient(90deg, rgba(237,159,12,1) 0%, rgba(241,255,0,1) 100%);
+}
+
+#box3{
+ /*background-color: rgb(243, 243, 104);*/
+ background: rgb(241,255,0);
+ background: linear-gradient(90deg, rgba(241,255,0,1) 0%, rgba(21,200,44,1) 100%);
+}
+
+#box4{
+ /*background-color: rgb(74, 166, 252);*/
+ background: rgb(21,200,44);
+ background: linear-gradient(90deg, rgba(21,200,44,1) 0%, rgba(0,212,255,1) 100%);
+}
+
+#box5{
+ /*background-color: rgb(86, 214, 237);*/
+ background: rgb(0,212,255);
+ background: linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(9,9,121,1) 100%);
+}
+
+#box6{
+ /*background-color: rgb(108, 237, 237);*/
+ background: rgb(9,9,121);
+ background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(149,0,255,1) 50%);
+}
+
+input{
+ width: 15%;
+ font-size: large;
+ text-align: center;
+}
+
+button{
+ background-color: black;
+ color: white;
+ border-radius: 10%;
+ font-size: large;
+}
+
+span{
+ font-size: larger;
+ font-style: bold;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
\ No newline at end of file