Публикуваме условието на третата курсова задача за курса по уеб програмиране (2014).
Срокът за предаване на задачата е 7.6.2014 г.. Решенията си изпращайте като архив на електронния адрес на академията. За да бъде приета за успешно изпълнена курсовата задача, решението ви трябва да покрива всички изисквания. Изпълнението на допълнителните задачи не е задължително.
Телесен калкулатор
Описание
Да се направи (валидна HTML 5) страница, която изчислява Индекса на телесната маса, Базовата метаболитна скорост и Дневната калорийна нужда изчислени на базата на въведени от потребителя данни.
Изисквания
- Страницата да дава възможност на потребителя да избере мерни едници за маса („килограми (kg)“ или „паунди (lb)„) от входен контрол (<input>) от тип радио бутон („radio„) с етикет (<label>) – „Мерни единици за маса„;
- Страницата да дава възможност на потребителя да посочи своята маса от 0 (min) до 635 (max) килограма (или техния аналог в паунди, ако са избрани паунди) от входен контрол (<input>) за число („number“) с етикет (<label>) – „Маса„;
- Страницата да дава възможност на потребителя да посочи своята възраст от 0 (min) до 123 (max) години от входен контрол (<input>) за диапазон („range“) с етикет – (<label>) „Възраст„;
- Страницата да дава възможност на потребителя да избере мерни едници за разстояние („сантиметри (cm)“ или „инчове (in)„) от входен контрол (<input>) от тип радио бутон („radio„) с етикет (<label>) – „Мерни единици за маса„;
- Страницата да дава възможност на потребителя да посочи своя ръст от 0 (min) до 272 (max) сантиметра (или техния аналог в инчове, ако са избрани инчове) от входен контрол (<input>) за диапазон („range“) с етикет – (<label>) „Ръст„;
- Страницата да дава възможност на потребителя да посочи своя пол („мъж“ или „жена„) от входен контрол (<input>) от тип радио бутон („radio„) с етикет (<label>) – „Пол“;
- Страницата да дава възможност на потребителя да посочи своята активност от падащо меню (<select>) с етикет (<label>) – „Активност“ (вж. видовете активност по-долу);
- При промяна на стойността на някой от горните контроли, да се изчислят и покажат Индексът на телесната маса, Базовата метаболитна скорост и Дневната калорийна нужда;
- Според изчисления индекс на телесната маса, покажете категорията, в която попада потребителя в кутийка (<div>), текстът в която е с бял цвят, а цветът на фон зависи от категорията (вж. таблицата на категориите по-долу);
- При първоначално зареждане на страницата, полетата не са попълнени, но да съдържат примерна стойност (placeholder);
- Използвайте HTML 5, за да укажете, че попълването на полетата е задължително (required);
- При първоначално зареждане на страницата, блокът с резултатът трябва да е скрит (display: none) и трябва да се покаже (display: block) едва след коректно въвеждане на данните и изчисление на резултата;
- За реализиране на горните функционалности може да използвате библиотеката jQuery.
Допълнителни условия (за ентусиасти)
- Страницата да дава възможност на потребителя да избере мерни единици за енергия („килокалории (kcal)“ или „джаули (J)„) от входен контрол(<input>) от тип радио бутон („radio„) с етикет (<label>) – „Мерни единици за енергия“ и да извежда резултата според направения избор;
- Реализирайте страницата използвайки jQuery Mobile.
Допълнителна информация
- За базовата метаболитна скорост използвайте формулата на Mifflin St Jeor;
- Таблца на физическата активност:
Активност Коефициент за активност Никакви или малко упражнения 1.200 Леки упражнения или спорт, 1-3 дни/седмично 1.375 Умерени упражнения или спорт, 1-5 дни/седмично 1.550 Висока активност с изморителни спортове или тежки тренировки, 6-7 дни/седмично 1.725 Високонатоварваща физическа работа или упражнения, 2 пъти/дневно 1.900 - Таблица на категориите тегло:
Категория Индекс на телесната маса Цвят Много силно поднормено тегло по-малко от 15 #FFBABA Значително поднормено тегло между 15 и 16 #FEEFB3 Поднормено тегло между 16 и 18.5 #DFF2BF Нормално тегло между 18.5 и 25 #BDE5F8 Наднормено тегло между 25 и 30 #DFF2BF Умерено пълно (клас I) между 30 и 35 #FEEFB3 Силно пълно (клас II) между 35 и 40 #FFBABA Много силно пълно (клас III) над 40 #D8000C - Материали от курса по уеб програмиране (2014);
- Ръководство по JavaScript на W3 Schools.