Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 16, 2022. It is now read-only.

Commit 9111908

Browse files
feat(food-delivery): calories calculator added (#53)
* feat(food-delivery): calories calculator added affects: @practice/food-delivery ISSUES CLOSED: #50 * style(food-delivery): classes names changed affects: @practice/food-delivery ISSUES CLOSED: #50 * style(food-delivery): whitespace added affects: @practice/food-delivery ISSUES CLOSED: #50 
1 parent 0f79b5e commit 9111908

File tree

3 files changed

+155
-33
lines changed

3 files changed

+155
-33
lines changed

‎practice/food-delivery/public/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -134,41 +134,41 @@ <h2>Правильный рацион</h2>
134134
<div class="container">
135135
<h2 class="title">Рассчитаем вашу потребность в калориях?
136136
</h2>
137-
<div class="calculating__field">
138-
<div class="calculating__subtitle">
137+
<div class='calculatingField'>
138+
<div class='calculatingSubtitle'>
139139
Ваш пол
140140
</div>
141-
<div class="calculating__choose" id="gender">
142-
<div class="calculating__choose-item calculating__choose-item_active">Женщина</div>
143-
<div class="calculating__choose-item">Мужчина</div>
141+
<div class='calculatingChoose' id="gender">
142+
<div id = "female" class='calculatingChooseItem calculatingChooseItem-active'>Женщина</div>
143+
<div id = "male" class='calculatingChooseItem'>Мужчина</div>
144144
</div>
145145

146-
<div class="calculating__subtitle">
146+
<div class='calculatingSubtitle'>
147147
Ваша конституция
148148
</div>
149-
<div class="calculating__choose calculating__choose_medium">
150-
<input type="text" id="height" placeholder="Введите рост" class="calculating__choose-item">
151-
<input type="text" id="weight" placeholder="Введите вес" class="calculating__choose-item">
152-
<input type="text" id="age" placeholder="Введите возраст" class="calculating__choose-item">
149+
<div class='calculatingChoose calculatingChooseMedium'>
150+
<input type="text" id="height" placeholder="Введите рост" class='calculatingChooseItem'>
151+
<input type="text" id="weight" placeholder="Введите вес" class='calculatingChooseItem'>
152+
<input type="text" id="age" placeholder="Введите возраст" class='calculatingChooseItem'>
153153
</div>
154154

155-
<div class="calculating__subtitle">
155+
<div class='calculatingSubtitle'>
156156
Выберите вашу физическая активность
157157
</div>
158-
<div class="calculating__choose calculating__choose_big">
159-
<div id="low" class="calculating__choose-item">Низкая активность </div>
160-
<div id="small" class="calculating__choose-item calculating__choose-item_active">Невысокая активность</div>
161-
<div id="medium" class="calculating__choose-item">Умеренная активность</div>
162-
<div id="high" class="calculating__choose-item">Высокая активность</div>
158+
<div class='calculatingChoose calculatingChooseBig'>
159+
<div data-activityLevel="1.2" id="low" class='calculatingChooseItem'>Низкая активность </div>
160+
<div data-activityLevel="1.375" id="small" class='calculatingChooseItem calculatingChooseItem-active'>Невысокая активность</div>
161+
<div data-activityLevel="1.55" id="medium" class='calculatingChooseItem'>Умеренная активность</div>
162+
<div data-activityLevel="1.725" id="high" class='calculatingChooseItem'>Высокая активность</div>
163163
</div>
164164

165-
<div class="calculating__divider"></div>
165+
<div class='calculatingDivider'></div>
166166

167-
<div class="calculating__total">
168-
<div class="calculating__subtitle">
167+
<div class='calculatingTotal'>
168+
<div class='calculatingSubtitle'>
169169
Ваша суточная норма калорий:
170170
</div>
171-
<div class="calculating__result">
171+
<div class='calculatingResult'>
172172
<span>2700</span> ккал
173173
</div>
174174
</div>

‎practice/food-delivery/src/index.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -363,21 +363,21 @@ a {
363363
text-align: center
364364
}
365365

366-
.calculating__field {
366+
.calculatingField {
367367
width: 100%;
368368
margin-top: 50px;
369369
background: rgba(146, 242, 255, .15);
370370
padding: 30px 0 40px 0
371371
}
372372

373-
.calculating__subtitle {
373+
.calculatingSubtitle {
374374
text-align: center;
375375
font-size: 18px;
376376
font-weight: 700;
377377
margin-top: 30px
378378
}
379379

380-
.calculating__subtitle:first-child {
380+
.calculatingSubtitle:first-child {
381381
margin-top: 0
382382
}
383383

@@ -392,14 +392,14 @@ a {
392392
background: url(assets/icons/switch.svg) center center/cover no-repeat
393393
}
394394

395-
.calculating__choose {
395+
.calculatingChoose {
396396
position: relative;
397397
display: flex;
398398
margin-top: 30px;
399399
justify-content: center
400400
}
401401

402-
.calculating__choose-item {
402+
.calculatingChooseItem {
403403
display: flex;
404404
align-items: center;
405405
justify-content: center;
@@ -416,48 +416,48 @@ a {
416416
transition: .3s all
417417
}
418418

419-
.calculating__choose-item_active {
419+
.calculatingChooseItem-active {
420420
color: #ffffff;
421421
background-color: #54ed39
422422
}
423423

424-
.calculating__choose_medium {
424+
.calculatingChooseMedium {
425425
width: 743px;
426426
justify-content: space-between;
427427
margin: 30px auto 0 auto
428428
}
429429

430-
.calculating__choose_big {
430+
.calculatingChooseBig {
431431
width: 930px;
432432
justify-content: space-between;
433433
margin: 30px auto 0 auto
434434
}
435435

436-
.calculating__choose_big .calculating__choose-item {
436+
.calculatingChooseBig .calculatingChooseItem {
437437
width: 200px
438438
}
439439

440-
.calculating__divider {
440+
.calculatingDivider {
441441
width: 490px;
442442
height: 1px;
443443
margin: 40px auto;
444444
background-color: rgba(0, 0, 0, .2)
445445
}
446446

447-
.calculating__total {
447+
.calculatingTotal {
448448
width: 490px;
449449
margin: 0 auto;
450450
display: flex;
451451
justify-content: space-between;
452452
align-items: center
453453
}
454454

455-
.calculating__result {
455+
.calculatingResult {
456456
font-size: 18px;
457457
font-weight: 700
458458
}
459459

460-
.calculating__result span {
460+
.calculatingResult span {
461461
font-size: 42px
462462
}
463463

‎practice/food-delivery/src/index.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,4 +344,126 @@ document.addEventListener('DOMContentLoaded', () => {
344344
currentSlide.textContent = `0${i + 1}`
345345
})
346346
}
347+
/* calories calculator */
348+
349+
const calcResultValue: HTMLElement = document.querySelector('.calculatingResult span')
350+
let sex: string = 'female'
351+
let heightData: number
352+
let weightData: number
353+
let ageData: number
354+
let activityLevel: number = 1.375
355+
356+
if (localStorage.getItem('sex')) {
357+
sex = localStorage.getItem('sex')
358+
} else {
359+
sex = 'female'
360+
localStorage.setItem('sex', 'female')
361+
}
362+
363+
if (localStorage.getItem('activityLevel')) {
364+
activityLevel = Number(localStorage.getItem('activityLevel'))
365+
} else {
366+
activityLevel = 1.375
367+
localStorage.setItem('activityLevel', (1.375).toString())
368+
}
369+
370+
function initLocalSettings(selector: string, active: string) {
371+
const elements = document.querySelectorAll(selector)
372+
373+
elements.forEach((element) => {
374+
element.classList.remove(active)
375+
if (element.getAttribute('id') === localStorage.getItem('sex')) {
376+
element.classList.add(active)
377+
}
378+
379+
if (element.getAttribute('data-activityLevel') === localStorage.getItem('activityLevel')) {
380+
element.classList.add(active)
381+
}
382+
})
383+
}
384+
385+
initLocalSettings('#gender', 'calculatingChooseItem-active')
386+
initLocalSettings('.calculatingChooseBig', 'calculatingChooseItem-active')
387+
388+
function calculateTotal() {
389+
if (!sex || !heightData || !weightData || !ageData || !activityLevel) {
390+
calcResultValue.textContent = '___'
391+
return
392+
}
393+
394+
if (sex === 'female') {
395+
calcResultValue.textContent = Math.round(
396+
(447.6 + 9.2 * weightData + 3.1 * heightData - 4.3 * ageData) * activityLevel
397+
).toString()
398+
} else {
399+
calcResultValue.textContent = Math.round(
400+
(88.36 + 13.4 * weightData + 4.8 * heightData - 5.7 * ageData) * activityLevel
401+
).toString()
402+
}
403+
}
404+
405+
calculateTotal()
406+
407+
function getStaticInformation(selector: string, activeClass: string) {
408+
const elements = document.querySelectorAll(selector)
409+
410+
elements.forEach((element: HTMLElement) => {
411+
element.addEventListener('click', (e: Event) => {
412+
if ((e.target as HTMLElement).getAttribute('data-activityLevel')) {
413+
activityLevel = Number((e.target as HTMLElement).getAttribute('data-activityLevel'))
414+
localStorage.setItem(
415+
'activityLevel',
416+
(e.target as HTMLElement).getAttribute('data-activityLevel')
417+
)
418+
} else {
419+
sex = (e.target as HTMLElement).getAttribute('id')
420+
localStorage.setItem('sex', (e.target as HTMLElement).getAttribute('id'))
421+
}
422+
423+
elements.forEach((activeElement: HTMLElement) => {
424+
activeElement.classList.remove(activeClass)
425+
;(e.target as HTMLElement).classList.add(activeClass)
426+
})
427+
428+
calculateTotal()
429+
})
430+
})
431+
}
432+
433+
getStaticInformation('#gender div', 'calculatingChooseItem-active')
434+
getStaticInformation('.calculatingChooseBig div', 'calculatingChooseItem-active')
435+
436+
function getDynamicInformation(selector: string) {
437+
const inputField: HTMLInputElement = document.querySelector(selector)
438+
439+
inputField.addEventListener('input', () => {
440+
if (inputField.value.match(/\D/g)) {
441+
inputField.style.border = '2px solid red'
442+
} else {
443+
inputField.style.border = 'none'
444+
}
445+
446+
switch (inputField.getAttribute('id')) {
447+
case 'height':
448+
heightData = +inputField.value
449+
break
450+
case 'weight':
451+
weightData = +inputField.value
452+
break
453+
case 'age':
454+
ageData = +inputField.value
455+
break
456+
default:
457+
heightData = 0
458+
weightData = 0
459+
ageData = 0
460+
}
461+
})
462+
463+
calculateTotal()
464+
}
465+
466+
getDynamicInformation('#height')
467+
getDynamicInformation('#weight')
468+
getDynamicInformation('#age')
347469
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /