v1.0

author: lucashemi <lucasxberger@gmail.com> 2022-03-17 17:41:51 -0300
committer: lucashemi <lucasxberger@gmail.com> 2022-03-17 17:41:51 -0300
commit: 39da26bcc06c868cf01e4f308e722be7589c936d (patch)
tree: 8c5f40513e37481098169b2cf6d03275bbc8831b
5 files changed, 445 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..febfe7d
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# Js-Calculator
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f9b5e4d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,39 @@
+<!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">
+    <link rel="stylesheet" href="./reset.css">
+    <link rel="stylesheet" href="./style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="container">
+        <span class="resultado botao">0</span>
+        <button class="botao-c botao">C</button>
+        <button class="botao-ze botao num">0</button>
+
+        <button class="botao-X botao">X</button>
+
+        <button class="botao-div botao sp">/</button>
+        <button class="botao-vez botao sp">x</button>
+        <button class="botao-men botao sp">-</button>
+        <button class="botao-mai botao sp">+</button>
+        <button class="botao-eq botao sp">=</button>
+
+        <button class="botao-ponto botao">.</button>
+
+        <button class="botao-um botao num">1</button>
+        <button class="botao-dois botao num">2</button>
+        <button class="botao-tres botao num">3</button>
+        <button class="botao-quatro botao num">4</button>
+        <button class="botao-cinco botao num">5</button>
+        <button class="botao-seis botao num">6</button>
+        <button class="botao-sete botao num">7</button>
+        <button class="botao-oito botao num">8</button>
+        <button class="botao-nove botao num">9</button>
+    </div>
+</body>
+<script src="./index.js" defer></script>
+</html>
+\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..cad022f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,107 @@
+// Teclas
+
+let resultado = document.querySelector('.resultado')
+const c = document.querySelector('.botao-c')
+const X = document.querySelector('.botao-X')
+const ponto = document.querySelector('.botao-ponto')
+const num = document.querySelectorAll('.num')
+const op = document.querySelectorAll('.sp')
+
+// Resposta
+
+let resposta = '';
+
+
+//Numeros Para a resposta
+
+num[0].addEventListener('click', () => {
+    resposta += '0';
+    resultado.textContent = resposta;
+})
+
+num[1].addEventListener('click', () => {
+    resposta += '1';
+    resultado.textContent = resposta;
+})
+
+num[2].addEventListener('click', () => {
+    resposta += '2';
+    resultado.textContent = resposta;
+})
+
+num[3].addEventListener('click', () => {
+    resposta += '3';
+    resultado.textContent = resposta;
+})
+
+num[4].addEventListener('click', () => {
+    resposta += '4';
+    resultado.textContent = resposta;
+})
+
+num[5].addEventListener('click', () => {
+    resposta += '5';
+    resultado.textContent = resposta;
+})
+
+num[6].addEventListener('click', () => {
+    resposta += '6';
+    resultado.textContent = resposta;
+})
+
+num[7].addEventListener('click', () => {
+    resposta += '7';
+    resultado.textContent = resposta;
+})
+
+num[8].addEventListener('click', () => {
+    resposta += '8';
+    resultado.textContent = resposta;
+})
+
+num[9].addEventListener('click', () => {
+    resposta += '9';
+    resultado.textContent = resposta;
+})
+
+//Operacoes
+
+op[0].addEventListener('click', () => {
+    resposta += '/';
+    resultado.textContent = resposta;
+})
+
+op[1].addEventListener('click', () => {
+    resposta += '*';
+    resultado.textContent = resposta;
+})
+
+op[2].addEventListener('click', () => {
+    resposta += '-';
+    resultado.textContent = resposta;
+})
+
+op[3].addEventListener('click', () => {
+    resposta += '+';
+    resultado.textContent = resposta;
+})
+
+op[4].addEventListener('click', () => {
+    resposta = eval(resposta);
+    resultado.textContent = resposta;
+})
+
+ponto.addEventListener('click', () => {
+    resposta += '.';
+    resultado.textContent = resposta;
+})
+
+c.addEventListener('click', () => {
+    resposta = '';
+    resultado.textContent = resposta;
+})
+
+X.addEventListener('click', () => {
+    resposta = resposta.slice(0, -1);
+    resultado.textContent = resposta;
+})
+\ No newline at end of file
diff --git a/reset.css b/reset.css
new file mode 100644
index 0000000..61831c1
--- /dev/null
+++ b/reset.css
@@ -0,0 +1,86 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+img {
+	width: inherit;
+}
+
+button {
+	font-family: inherit;
+	font-size: inherit;
+	color: inherit;
+	font-weight: inherit;
+	padding: 0;
+	border: none;
+	background-color: unset;
+}
+
+input {
+	border: none;
+	color: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	font-family: inherit;
+}
+
+textarea {
+	border: none;
+	color: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	font-family: inherit;
+}
+
+select {
+	border: none;
+	color: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	font-family: inherit;
+}
+\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c1e7817
--- /dev/null
+++ b/style.css
@@ -0,0 +1,212 @@
+body {
+    background-color: slategray;
+}
+
+.container {
+    width: 30vw;
+    font-family: sans-serif;
+    color: white;
+    background-color: grey;
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    font-weight: 700;
+    display: grid;
+    grid-template-areas:
+    "resultado resultado resultado resultado" 
+    "C C X div"
+    "sete oito nove vez"
+    "quatro cinco seis men"
+    "um dois tres mai"
+    "ze ze ponto eq"
+}
+
+
+.botao {
+    padding: 2.5rem;
+    font-size: 26px;
+    background-color: #444;
+    border: 3px solid #666;
+}
+
+.botao:hover {
+    opacity: 0.8;;
+}
+
+.resultado {
+    grid-area: resultado;
+    border-top: 6px solid #666;
+    border-left: 6px solid #666;
+    border-right: 6px solid #666;
+}
+
+.resultado:hover {
+    opacity: 1;
+}
+
+.botao-c {
+    grid-area: C;
+    border-left: 6px solid #666;
+}
+
+.botao-ze {
+    grid-area: ze;
+    border-left: 6px solid #666;
+    border-bottom: 6px solid #666;
+}
+
+.botao-X {
+    grid-area: X;
+    color: lightcoral;
+}
+
+.sp {
+    background-color: orange;
+    border-right: 6px solid #666;
+}
+
+.botao-div {
+    grid-area: div;
+}
+
+.botao-vez {
+    grid-area: vez;
+}
+
+.botao-men {
+    grid-area: men;
+}
+
+.botao-mai {
+    grid-area: mai;
+}
+
+.botao-eq {
+    grid-area: eq;
+    border-bottom: 6px solid #666;
+}
+
+.botao-ponto {
+    grid-area: ponto;
+    border-bottom: 6px solid #666;
+}
+
+.botao-um {
+    grid-area: um;
+    border-left: 6px solid #666;
+}
+
+.botao-dois {
+    grid-area: dois;
+}
+
+.botao-tres {
+    grid-area: tres;
+}
+
+.botao-quatro {
+    grid-area: quatro;
+    border-left: 6px solid #666;
+}
+
+.botao-cinco {
+    grid-area: cinco;
+}
+
+.botao-seis {
+    grid-area: seis;
+}
+
+.botao-sete {
+    grid-area: sete;
+    border-left: 6px solid #666;
+}
+
+.botao-oito {
+    grid-area: oito;
+}
+
+.botao-nove {
+    grid-area: nove;
+}
+
+@media screen and (max-width: 375px){
+    .container {
+        width: 80vw;
+        top: 5%;
+    }
+
+    .resultado {
+        min-width: 230px;
+        min-height: 40px;
+    }
+
+    .botao {
+        padding: 0.5rem;
+        font-size: 28px;
+    }
+}
+
+@media screen and (min-width: 375px){
+    .container {
+        width: 80vw;
+        top: 5%;
+    }
+
+    .resultado {
+        min-width: 256px;
+        min-height: 40px;
+    }
+
+    .botao {
+        padding: 1rem;
+        font-size: 30px;
+    }
+}
+
+@media screen and (min-width: 425px){
+    .container {
+        width: 80vw;
+    }
+
+    .botao {
+        padding: 1rem;
+        font-size: 30px;
+    }
+}
+
+@media screen and (min-width: 768px){
+    .container {
+        width: 45vw;
+        left: 30%;
+    }
+
+    .botao {
+        padding: 1.5rem;
+        font-size: 30px;
+    }
+}
+
+@media screen and (min-width: 1024px){
+    .container {
+        width: 40vw;
+        left: 30%;
+    }
+
+    .botao {
+        padding: 1.5rem;
+        font-size: 30px;
+    }
+}
+
+@media screen and (min-width: 1440px){
+    .container {
+        width: 30vw;
+        left: 35%;
+    }
+
+    .botao {
+        padding: 1.5rem;
+        font-size: 30px;
+    }
+}
+\ No newline at end of file
author	lucashemi <lucasxberger@gmail.com>	2022-03-17 17:41:51 -0300
committer	lucashemi <lucasxberger@gmail.com>	2022-03-17 17:41:51 -0300
commit	39da26bcc06c868cf01e4f308e722be7589c936d (patch)
tree	8c5f40513e37481098169b2cf6d03275bbc8831b