Document

From 39da26bcc06c868cf01e4f308e722be7589c936d Mon Sep 17 00:00:00 2001 From: lucashemi Date: Thu, 17 Mar 2022 17:41:51 -0300 Subject: v1.0 --- README.md | 1 + index.html | 39 ++++++++++++ index.js | 107 +++++++++++++++++++++++++++++++ reset.css | 86 +++++++++++++++++++++++++ style.css | 212 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 445 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 index.js create mode 100644 reset.css create mode 100644 style.css 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 @@ + + + + + + + + + Document + + +

+ 0 + + + + + + + + + + + + + + + + + + + + + + +

+ + + \ 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 -- cgit v1.2.3-18-g5258