├── LICENSE
├── README.md
├── assets
    ├── png
    │   ├── acimaPeso.png
    │   ├── dieta.png
    │   ├── ideal.png
    │   ├── logo.png
    │   ├── magro.png
    │   └── obeso.png
    └── toReadme
    │   └── IMCrm.gif
├── imc.css
├── imc.js
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Felipe Silva
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">📊 Índice de Massa Corporal 🍎</h1>
 2 | <p align="center">
 3 |   <img src="/assets/toReadme/IMCrm.gif">
 4 | </p>
 5 | 
 6 | <h2>:books: Informações</h2>
 7 | O objetivo do projeto foi utilizar o DOM (Document Object Model) em JavaScript para manipular os documentos quando o usuário escolhesse os valores. A animação foi inspirada na série Rick and Morty.
 8 | <br/><br/>
 9 | <ul>
10 |   <li>Para acessar o site: clique em <a href="https://felipe-cll.github.io/imc-js/" target="_blank">IMC</a></li>
11 | </ul>
12 | <h2>:pushpin: Tecnologias</h2>
13 | <ul>
14 |   <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript">JavaScript</a></li>
15 |   <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">HTML</a></li>
16 |   <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a></li>
17 | </ul>
18 | 
19 | ## :balance_scale: Licença
20 | Consulte o arquivo <a href="https://github.com/Felipe-Cll/imc-js/blob/master/LICENSE" target="_blank">LICENSE</a> para obter mais detalhes.
21 | 


--------------------------------------------------------------------------------
/assets/png/acimaPeso.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/png/acimaPeso.png


--------------------------------------------------------------------------------
/assets/png/dieta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/png/dieta.png


--------------------------------------------------------------------------------
/assets/png/ideal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/png/ideal.png


--------------------------------------------------------------------------------
/assets/png/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/png/logo.png


--------------------------------------------------------------------------------
/assets/png/magro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/png/magro.png


--------------------------------------------------------------------------------
/assets/png/obeso.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/png/obeso.png


--------------------------------------------------------------------------------
/assets/toReadme/IMCrm.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Felipe-Cll/imc-js/fb9fe134049916fd296025ba242dae167ffc8ef7/assets/toReadme/IMCrm.gif


--------------------------------------------------------------------------------
/imc.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:wght@300;400;500&family=Rubik:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap');
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Rubik';
  8 | }
  9 | 
 10 | .responsive {
 11 |     max-width: 1300px;
 12 |     margin: auto;
 13 |     padding: 190px 80px;
 14 | }
 15 | 
 16 | .container {
 17 |     display: flex;
 18 |     width: 100%;
 19 |     justify-content: center;
 20 |     align-items: center;
 21 | }
 22 | 
 23 | .box {
 24 |     display: flex;
 25 |     align-items: center;
 26 |     background-color: #92c84e;
 27 |     height: 60vh;
 28 |     border-radius: 20px;
 29 | }
 30 | 
 31 | .box .left {
 32 |     padding: 20px;
 33 | }
 34 | 
 35 | .box .left h1 {
 36 |     color: #fff;
 37 |     font-size: 3rem;
 38 |     margin-bottom: 30px;
 39 |     text-align: center;
 40 | }
 41 | 
 42 | .box .left p {
 43 |     color: #fff;
 44 |     font-size: 1.5rem;
 45 |     margin-left: 5px;
 46 | }
 47 | 
 48 | .box .left input {
 49 |     width: 100%;
 50 |     padding: 20px 15px;
 51 |     border-radius: 10px;
 52 |     border: none;
 53 |     margin-bottom: 20px;
 54 |     font-size: 1.2rem;
 55 |     outline: none;
 56 |     background-color: #e0e0e0;
 57 |     transition: 0.3s ease-in-out;
 58 | }
 59 | 
 60 | .box .left input:hover {
 61 |     background-color: #bebdbd;
 62 | }
 63 | 
 64 | input[type=number]::-webkit-inner-spin-button { 
 65 |     -webkit-appearance: none;   
 66 | }
 67 | 
 68 | .box .left button {
 69 |     background-color: #237a00;
 70 |     color: aliceblue;
 71 |     font-size: 1.6rem;
 72 |     letter-spacing: 1px;
 73 |     border: none;
 74 |     border-radius: 10px;
 75 |     padding: 15px 0;
 76 |     width: 100%;
 77 |     cursor: pointer;
 78 |     margin-top: 20px;
 79 |     transition: 0.3s ease-in-out;
 80 | }
 81 | 
 82 | .box .left button:hover {
 83 |     background-color: #1a5c00;
 84 | }
 85 | 
 86 | .box .right {
 87 |     width: 100%;
 88 |     justify-content: center;
 89 |     align-items: center;
 90 | }
 91 | 
 92 | .box .right .result {
 93 |     display: flex;
 94 |     align-items: center;
 95 | }
 96 | 
 97 | .box .right .result img {
 98 |     padding: 0 40px;
 99 |     width: 300px;
100 | }
101 | .box .right .resultSpan {
102 |     padding: 20px;
103 | }
104 | 
105 | .box .right .resultSpan .valor {
106 |     color: #fff;
107 |     text-align: right;
108 |     font-size: 6rem;
109 | }
110 | 
111 | .box .right p {
112 |     color: #fff;
113 |     font-size: 1.4rem;
114 |     padding: 15px;
115 | }
116 | 
117 | #resultado {
118 |     color: #fff;
119 |     font-size: 2rem;
120 | }
121 | 
122 | @media(max-width: 1040px) {
123 |     
124 |     .responsive {
125 |         padding: 40px 20px;
126 |     }
127 |     
128 |     .box {
129 |         flex-direction: column;
130 |         height: auto;
131 |     }
132 | 
133 |     .box .right {
134 |         display: flex;
135 |         flex-direction: column;
136 |     }
137 | 
138 |     .box .right .img {
139 |         width: 90%;
140 |         margin: 10px;
141 |     }
142 | 
143 |     .box .left h1 {
144 |         margin: 20px 0;
145 |     }
146 | 
147 |     .box .left input {
148 |         width: 100%;
149 |     }
150 | }
151 | 
152 | @media(max-width: 860px) {
153 |     
154 |     .result {
155 |         flex-direction: column;
156 |     }
157 | 
158 |     .resultSpan {
159 |         order: -1;
160 |     }
161 | }


--------------------------------------------------------------------------------
/imc.js:
--------------------------------------------------------------------------------
 1 | const calcularIMC = document.getElementById('send');
 2 | 
 3 | function imc() {
 4 |     const altura = document.getElementById('altura').value;
 5 |     const peso = document.getElementById('peso').value;
 6 |     const resultTxt = document.getElementById('resultTxt');
 7 |     const resultGrau = document.getElementById('resultGrau');
 8 |     
 9 |     if ( altura !== '' && peso !== '' ) {
10 |         
11 |         const resIMC = ( peso / (altura * altura)).toFixed(1);
12 | 
13 |         let classificacao = "";
14 |         let png = document.getElementById('png');
15 | 
16 |         if ( resIMC < 18.5 ) {
17 |             classificacao = 'abaixo do peso.';
18 |             png.src = 'assets/png/magro.png';
19 |             document.body.style.background = '#90dc90';
20 |         }
21 |         else if ( resIMC < 25 ) {
22 |             classificacao = 'com peso ideal.';
23 |             png.src = 'assets/png/ideal.png';
24 |             document.body.style.background = '#7acb26';
25 |         }
26 |         else if ( resIMC < 30 ) {
27 |             classificacao = 'levemente acima do peso.';
28 |             png.src = 'assets/png/acimaPeso.png';
29 |             document.body.style.background = '#f28f79';
30 |         }
31 |         else if ( resIMC >= 30 ) {
32 |             classificacao = 'com obesidade. Cuidado!';
33 |             png.src = 'assets/png/obeso.png';
34 |             document.body.style.background = '#B22222';
35 |         }
36 | 
37 |         resultTxt.textContent = `${resIMC}`;
38 |         resultGrau.textContent = `Você está ${classificacao}`;
39 | 
40 |     } else {
41 |         resultGrau.textContent = 'Preencha todos os campos!';
42 |     }
43 | }
44 | calcularIMC.addEventListener('click', imc);
45 | 
46 | document.addEventListener("keypress", function(e) {
47 |     if(e.key === "Enter") {
48 |         const btn = document.querySelector("#send");
49 |         btn.click();
50 |     }
51 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-BR">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="icon" type="image/x-icon" href="assets/png/logo.png"/>
 8 |     <title>IMC</title>
 9 |     <link rel="stylesheet" href="imc.css">
10 | </head>
11 | <body>
12 |     <main>
13 |         <div class="responsive">
14 |             <div class="container">
15 |                 <div class="box">
16 |                     <div class="left">
17 |                         <h1>Calcule seu IMC</h1>
18 |                         <p><strong>Altura</strong></p>
19 |                         <input type="number" placeholder="Ex: 1.60" id="altura" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==5) return false;">
20 |                         <p><strong>Peso</strong></p>
21 |                         <input type="number" placeholder="Ex: 60 Kg" id="peso" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;">
22 |                         <button id="send" onclick="Calcular()">Calcular</button>
23 |                     </div>
24 |                     <div class="right">
25 |                         <p>O índice de massa corporal é uma medida internacional usada para calcular se uma pessoa está no peso ideal.</p>
26 |                         <div class="result">
27 |                             <img src="assets/png/dieta.png" alt="" class="png" id="png">
28 |                             <div class="resultSpan" id="resultado">
29 |                                 <span id="resultTxt" class="valor"></span>
30 |                                 <br />
31 |                                 <span id="resultGrau"></span>
32 |                             </div>
33 |                         </div>
34 |                     </div>
35 |                 </div>
36 |             </div>
37 |         </div>
38 |     </main>
39 |     <script src="imc.js"></script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------