diff --git a/Cronometro/IMC CALCULATOR/Calculator-BMI.gif b/Cronometro/IMC CALCULATOR/Calculator-BMI.gif new file mode 100644 index 0000000..44185bd Binary files /dev/null and b/Cronometro/IMC CALCULATOR/Calculator-BMI.gif differ diff --git a/Cronometro/IMC CALCULATOR/index.html b/Cronometro/IMC CALCULATOR/index.html new file mode 100644 index 0000000..4a78ab2 --- /dev/null +++ b/Cronometro/IMC CALCULATOR/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Calculadora de IMC + + + +
+
+ + 20kg +
+
+ + 100 cm +
+ +

20.0

+

Normal weight

+ +
+ + + + \ No newline at end of file diff --git a/Cronometro/IMC CALCULATOR/javascript.js b/Cronometro/IMC CALCULATOR/javascript.js new file mode 100644 index 0000000..79cd8df --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Cronometro/IMC CALCULATOR/readme.md b/Cronometro/IMC CALCULATOR/readme.md new file mode 100644 index 0000000..54993df --- /dev/null +++ b/Cronometro/IMC CALCULATOR/readme.md @@ -0,0 +1,4 @@ +

BMI Calculator

+

Project Description

+

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.

+demonstração do site diff --git a/Cronometro/IMC CALCULATOR/style.css b/Cronometro/IMC CALCULATOR/style.css new file mode 100644 index 0000000..e8b5b31 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Cronometro/img/demonstracao.gif b/Cronometro/img/demonstracao.gif new file mode 100644 index 0000000..4ba8840 Binary files /dev/null and b/Cronometro/img/demonstracao.gif differ diff --git a/Cronometro/index-cronometro.html b/Cronometro/index-cronometro.html new file mode 100644 index 0000000..7c50a66 --- /dev/null +++ b/Cronometro/index-cronometro.html @@ -0,0 +1,31 @@ + + + + + + + + + + Cronômetro + + + +
+
+ 00 : 00 : 00 : 000 +
+
+ + + +
+
+ + + + + \ No newline at end of file diff --git a/Cronometro/js.js b/Cronometro/js.js new file mode 100644 index 0000000..dfbe807 --- /dev/null +++ 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}`; + +} \ No newline at end of file diff --git a/Cronometro/style.css b/Cronometro/style.css new file mode 100644 index 0000000..37c6da1 --- /dev/null +++ b/Cronometro/style.css @@ -0,0 +1,57 @@ + *, + * ::before, + * :after { + padding: 0; + margin: 0; + box-sizing: border-box; + } + + body { + background-image: url(uraraka.gif); + background-size: cover + } + + .caixa { + background-color: #D98292; + padding: 60px 0; + width: 40%; + min-width: 500px; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + border-radius: 10px; + } + + .displaytempo { + position: relative; + width: 110%; + background-color: #591C16; + background: linear-gradient(#6A4243, #6D2E27, #805861); + left: -5%; + font-family: monospace; + font-size: 40px; + color: #fff; + padding: 40px 0; + display: flex; + align-items: center; + justify-content: space-around; + border-radius: 5px; + box-shadow: 0 0 20px #591C16; + } + + .botoes { + width: 80%; + margin: 60px auto 0 auto; + display: flex; + justify-content: space-around + } + + .botoes button { + padding: 10px 20px; + background-color: #D98292; + color: #591C16; + border-radius: 5px; + font-size: 18px; + cursor: pointer; + } \ No newline at end of file diff --git a/Cronometro/uraraka.gif b/Cronometro/uraraka.gif new file mode 100644 index 0000000..13a8be7 Binary files /dev/null and b/Cronometro/uraraka.gif differ