anishcode19 · ibtriz · Oct 17, 2021
diff --git a/Cronometro/IMC CALCULATOR/Calculator-BMI.gif b/Cronometro/IMC CALCULATOR/Calculator-BMI.gif
diff --git a/Cronometro/IMC CALCULATOR/index.html b/Cronometro/IMC CALCULATOR/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<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="style.css">
+
+    <title>Calculadora de IMC</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
+            <span id="weight-val">20kg</span>
+        </div>
+        <div class="row">
+            <input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
+            <span id="height-val">100 cm</span>
+        </div>
+
+        <p id="result">20.0</p>
+        <p id="category">Normal weight</p>
+
+    </div>
+    <script src="javascript.js"></script>
+</body>
+
+</html>
diff --git a/Cronometro/IMC CALCULATOR/javascript.js b/Cronometro/IMC CALCULATOR/javascript.js
@@ -0,0 +1,35 @@
+function calculate() {
+    var bmi;
+    var result = document.getElementById("result");
+
+    var weight = parseInt(document.getElementById("weight").value);
+    document.getElementById("weight-val").textContent = weight + "kg";
+
+    var height = parseInt(document.getElementById("height").value);
+    document.getElementById("height-val").textContent = height + "cm";
+
+    bmi = (weight / Math.pow((height / 100), 2)).toFixed(1);
+    result.textContent = bmi;
+
+    if (bmi < 18.5) {
+        category = "underweight";
+        result.style.color = "#ffc11c";
+    } else if (bmi >= 18.5 && bmi <= 24.9) {
+        category = "Normal Weight";
+        result.style.color = "#007100";
+    } else if (bmi >= 25 && bmi <= 29.9) {
+        category = "Overweight";
+        result.style.color = "#ff0000";
+    } else if (bmi >= 30 && imc <= 34.9) {
+        category = "Obese 1"
+        resultado.style.color = "#990000"
+    } else if (bmi > 35 && imc <= 39.9) {
+        category = "Obese 2"
+        resultado.style.color = "#440000"
+    } else {
+        category = "Obese 3 or Morbid"
+        resultado.style.color = "#220000"
+
+    }
+    document.getElementById("category").textContent = category;
+}
diff --git a/Cronometro/IMC CALCULATOR/readme.md b/Cronometro/IMC CALCULATOR/readme.md
@@ -0,0 +1,4 @@
+<h1>BMI Calculator</h1>
+<h2>Project Description</h2>
+<p align="center">Second Project used as an introduction to JavaScript, also using HTML5 and CSS3. Applying knowledge acquired in the Web (Java) programming course at Instituto PROA.</p>
+<img src="Calculator-BMI.gif" alt="demonstração do site">
diff --git a/Cronometro/IMC CALCULATOR/style.css b/Cronometro/IMC CALCULATOR/style.css
@@ -0,0 +1,77 @@
+*,
+*:before,
+*:after {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    background: linear-gradient(315deg, #9e8fb2 0%, #a7acd9 74%);
+    ;
+}
+
+.container {
+    background-color: #fff;
+    padding: 40px 30px;
+    width: 50%;
+    min-width: 400px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    border-radius: 7px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 500;
+    box-shadow: 25px 25px 30px rgb(#9e8fb2 #a7acd9);
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 40px;
+}
+
+.row span {
+    font-weight: 500;
+}
+
+input[type="range"] {
+    width: 80%;
+    height: 3.5px;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #a7acd9;
+    border-radius: 3px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 15px;
+    width: 15px;
+    background-color: #9e8fb2;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+#result {
+    font-size: 35px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-align: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: rgb(95, 95, 196);
+}
+
+#category {
+    font-size: 18px;
+    text-align: center;
+    letter-spacing: 1px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    margin-top: 10px;
+    margin-bottom: -15px;
+}
diff --git a/Cronometro/img/demonstracao.gif b/Cronometro/img/demonstracao.gif
diff --git a/Cronometro/index-cronometro.html b/Cronometro/index-cronometro.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<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=style.css>
+
+    <title>Cronômetro</title>
+</head>
+
+<body>
+    <div class="caixa">
+        <div class="displaytempo">
+            00 : 00 : 00 : 000
+        </div>
+        <div class="botoes">
+            <button id="start">Iniciar
+            </button>
+            <button id="pause">Pausar
+            </button>
+            <button id="reset">Reset
+            </button>
+        </div>
+    </div>
+
+    <script src="js.js"></script>
+</body>
+
+</html>
diff --git a/Cronometro/js.js b/Cronometro/js.js
@@ -0,0 +1,40 @@
+let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
+let timerRef = document.querySelector('.displaytempo');
+let int;
+document.getElementById('start').addEventListener('click', () => {
+    int = setInterval(displaytempo, 10);
+});
+document.getElementById('pause').addEventListener('click', () => {
+    clearInterval(int);
+});
+document.getElementById('reset').addEventListener('click', () => {
+    clearInterval(int);
+    [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
+    timerRef.innerHTML = '00 : 00 : 00 : 000';
+});
+
+function displaytempo() {
+    milliseconds += 10;
+    if (milliseconds == 1000) {
+        milliseconds = 0;
+        seconds++;
+        if (seconds == 60) {
+            seconds = 0;
+            minutes++;
+            if (minutes == 60) {
+                minutes = 0;
+                hours++;
+            }
+
+        }
+    }
+
+    let h = hours < 10 ? "0" + hours : hours;
+    let m = minutes < 10 ? "0" + minutes : minutes;
+    let s = seconds < 10 ? "0" + seconds : seconds;
+    let ms = milliseconds < 10 ? "00" + milliseconds :
+        milliseconds < 100 ? "0" + milliseconds : milliseconds;
+
+    timerRef.innerHTML = `${h} : ${m} : ${s}: ${ms}`;
+
+}
diff --git a/Cronometro/style.css b/Cronometro/style.css
diff --git a/Cronometro/uraraka.gif b/Cronometro/uraraka.gif