Add files via upload

danya1733 · Jul 12, 2023 · a4da7dd · a4da7dd
commit a4da7dd
Show file tree

Hide file tree

Showing 3 changed files with 289 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Document</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class="now">
+ <h1>УЖЕ СКОКА</h1>
+ <br>
+ <div class="bzu">
+ <div class="nutrients">
+ <p>Белки</p>
+ <input type="number" class="protein" value="0">
+ </div>
+ <div class="nutrients">
+ <p>Жиры</p>
+ <input type="number" class="fats" value="0">
+ </div>
+ <div class="nutrients">
+ <p>Углеводы</p>
+ <input type="number" class="carbs" value="0">
+ </div>
+ <div class="nutrients">
+ <p>Калории</p>
+ <input type="number" class="calories" value="0">
+ </div>
+ </div>
+ </div>
+ <div class="now">
+ <h1>ДАБАВИТЬ</h1>
+ <br>
+ <div class="bzu">
+ <div class="nutrients">
+ <p>К белкам</p>
+ <input type="number" class="toProtein" value="0">
+ </div>
+ <div class="nutrients">
+ <p>К жирам</p>
+ <input type="number" class="toFats" value="0">
+ </div>
+ <div class="nutrients">
+ <p>К углеводам</p>
+ <input type="number" class="toCarbs" value="0">
+ </div>
+ <div class="nutrients">
+ <p>К калориям</p>
+ <input type="number" class="toCalories" value="0">
+ </div>
+ </div>
+ <div class="btn add-btn">Добавить к основным КБЖУ</div>
+ </div>
+ <div class="now">
+ <h1>СКОКА ЕСЧЕ НАДА</h1>
+ <br>
+ <div class="bzu">
+ <div class="first">
+ <div class="nutrients">
+ <p>Норма белков : 130гр</p>
+ <p>До суточной нормы: <span class="proteinPercent">0</span>гр</p>
+ </div>
+ <div class="nutrients">
+ <p>Норма жиров : 80гр</p>
+ <p>До суточной нормы: <span class="fatsPercent">0</span>гр</p>
+ </div>
+ </div>
+ <div class="second">
+ <div class="nutrients">
+ <p>Норма углеводов : 275гр</p>
+ <p>До суточной нормы: <span class="carbsPercent">0</span>гр</p>
+ </div>
+ <div class="nutrients">
+ <p>Норма калорий : 2300гр</p>
+ <p>До суточной нормы: <span class="caloriesPercent">0</span>гр</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,88 @@
+let calories = 2300,
+ carbs = 275,
+ fats = 80,
+ proteins = 130;
+
+let carbsNow = document.querySelector(".carbs"),
+ fatsNow = document.querySelector(".fats"),
+ proteinsNow = document.querySelector(".protein"),
+ caloriesNow = document.querySelector(".calories");
+
+let proteinPercent = document.querySelector(".proteinPercent"),
+ fatsPercent = document.querySelector(".fatsPercent"),
+ carbsPercent = document.querySelector(".carbsPercent"),
+ caloriesPercent = document.querySelector(".caloriesPercent");
+
+// Load values from localStorage if available
+if (localStorage.getItem("carbsNow")) {
+ carbsNow.value = localStorage.getItem("carbsNow");
+ carbsPercent.textContent = carbs - carbsNow.value;
+}
+if (localStorage.getItem("fatsNow")) {
+ fatsNow.value = localStorage.getItem("fatsNow");
+ fatsPercent.textContent = fats - fatsNow.value;
+}
+if (localStorage.getItem("proteinsNow")) {
+ proteinsNow.value = localStorage.getItem("proteinsNow");
+ proteinPercent.textContent = proteins - proteinsNow.value;
+}
+if (localStorage.getItem("caloriesNow")) {
+ caloriesNow.value = localStorage.getItem("caloriesNow");
+ caloriesPercent.textContent = calories - caloriesNow.value;
+}
+
+proteinsNow.addEventListener("input", () => {
+ proteinPercent.textContent = proteins - proteinsNow.value;
+ localStorage.setItem("proteinsNow", proteinsNow.value);
+});
+
+fatsNow.addEventListener("input", () => {
+ fatsPercent.textContent = fats - fatsNow.value;
+ localStorage.setItem("fatsNow", fatsNow.value);
+});
+
+carbsNow.addEventListener("input", () => {
+ carbsPercent.textContent = carbs - carbsNow.value;
+ localStorage.setItem("carbsNow", carbsNow.value);
+});
+
+caloriesNow.addEventListener("input", () => {
+ caloriesPercent.textContent = calories - caloriesNow.value;
+ localStorage.setItem("caloriesNow", caloriesNow.value);
+});
+
+let toProtein = document.querySelector(".toProtein"),
+ toFats = document.querySelector(".toFats"),
+ toCrabs = document.querySelector(".toCarbs"),
+ toCalories = document.querySelector(".toCalories"),
+ addBtn = document.querySelector(".add-btn");
+
+addBtn.addEventListener("click",()=>{
+ if(toProtein.value != 0 && toCalories.value != 0 && toCrabs.value != 0 && toFats.value != 0){
+ proteinsNow.value = parseInt(proteinsNow.value) + parseInt(toProtein.value);
+ toProtein.value = 0;
+ proteinPercent.textContent = proteins - proteinsNow.value;
+ localStorage.setItem("proteinsNow", proteinsNow.value);
+
+
+ fatsNow.value = parseInt(fatsNow.value) + parseInt(toFats.value);
+ toFats.value = 0;
+ fatsPercent.textContent = fats - fatsNow.value;
+ localStorage.setItem("fatsNow", fatsNow.value);
+
+ carbsNow.value = parseInt(carbsNow.value) + parseInt(toCrabs.value);
+ toCrabs.value = 0;
+ carbsPercent.textContent = carbs - carbsNow.value;
+ localStorage.setItem("carbsNow", carbsNow.value);
+
+ caloriesNow.value = parseInt(caloriesNow.value) + parseInt(toCalories.value);
+ toCalories.value = 0;
+ caloriesPercent.textContent = calories - caloriesNow.value;
+ localStorage.setItem("caloriesNow", caloriesNow.value);
+ }else{
+ alert("Добавьте значения!!!!!!!!!!!!!!")
+ }
+
+})
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,114 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 300;
+
+}
+
+body {
+ background: linear-gradient(270deg, #6c94e4, #b865f0);
+ background-size: 400% 400%;
+
+ -webkit-animation: gradient 30s ease infinite;
+ -moz-animation: gradient 30s ease infinite;
+ animation: gradient 30s ease infinite;
+}
+
+@-webkit-keyframes gradient {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+@-moz-keyframes gradient {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+@keyframes gradient {
+ 0%{background-position:0% 50%}
+ 50%{background-position:100% 50%}
+ 100%{background-position:0% 50%}
+}
+.now{
+ background-color: rgba(255, 199, 115, 0.69);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 80vw;
+ padding: 10px;
+ margin: 10px auto 0;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 10px;
+}
+.bzu{
+ width: 100%;
+ display: flex;
+ justify-content:space-around;
+}
+
+.nutrients{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 10px 0 10px 0;
+}
+p{
+ font-size: 21px;
+}
+
+.btn{
+ padding: 10px;
+ border: 1px solid black;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 5px;
+ -webkit-transition: ease-in-out 0.2s;
+ -moz-transition: ease-in-out 0.2s;
+ -ms-transition: ease-in-out 0.2s;
+ -o-transition: ease-in-out 0.2s;
+ transition: ease-in-out 0.2s;
+ cursor: pointer;
+}
+.btn:hover{
+ background-color: #82eee5;
+ color: #383030;
+ transform: scale(1.05);
+}
+input{
+ margin: 2px;
+ background-color: rgba(239, 138, 25, 0.56);
+ color: #fff;
+ border: 0;
+ padding: 5px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-transition: ease-in-out 0.2s;
+ -moz-transition: ease-in-out 0.2s;
+ -ms-transition: ease-in-out 0.2s;
+ -o-transition: ease-in-out 0.2s;
+ transition: ease-in-out 0.2s;
+ cursor: pointer;
+}
+input:hover{
+ background-color: rgba(130, 238, 229, 0.79);
+ transform: scale(1.05);
+}
+input:focus{
+ outline:none;
+ background-color: rgba(130, 238, 229, 0.79);
+ color: #000;
+ transform: scale(1.05);
+}
+@media (max-width: 800px) {
+ .now{
+ width: 85vw;
+ }
+ .bzu{
+ flex-direction: column;
+ }
+}