im-changing.ru
/
calories-counter-JS
mirror of https://github.com/YuShato/calories-counter-JS.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!DOCTYPE html>
<html lang="ru">

<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, viewport-fit=cover">
    <link rel="preload" href="fonts/pt-sans-caption-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/pt-sans-caption-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Счётчик калорий</title>
</head>

<body class="page">
    <main class="main">
        <div class="container">
            <article class="counter">
                <h1 class="counter__heading heading-main">
                    Счётчик калорий
                </h1>
                <form class="counter__form form" name="counter" action="#" method="post">
                    <div class="form__item">
                        <h2 class="heading">
                            Пол
                        </h2>
                        <ul class="switcher">
                            <li class="switcher__item">
                                <input id="gender-male" name="gender" value="male" type="radio" checked required>
                                <label for="gender-male">
                                    Мужчина
                                </label>
                            </li>
                            <li class="switcher__item">
                                <input id="gender-female" name="gender" value="female" type="radio" required>
                                <label for="gender-female">
                                    Женщина
                                </label>
                            </li>
                        </ul>
                    </div>
                    <fieldset class="form__item form__parameters" name="parameters">
                        <legend class="visually-hidden">
                            Физические параметры
                        </legend>
                        <div class="inputs-group">
                            <div class="input">
                                <div class="input__heading">
                                    <label class="heading" for="age">
                                        Возраст
                                    </label>
                                    <span class="input__heading-unit">
                                        лет
                                    </span>
                                </div>
                                <div class="input__wrapper">
                                    <input type="text" id="age" name="age" placeholder="0" inputmode="decimal"
                                        maxlength="3" required>
                                </div>
                            </div>
                            <div class="input">
                                <div class="input__heading">
                                    <label class="heading" for="height">
                                        Рост
                                    </label>
                                    <span class="input__heading-unit">
                                        см
                                    </span>
                                </div>
                                <div class="input__wrapper">
                                    <input type="text" id="height" name="height" placeholder="0" inputmode="decimal"
                                        maxlength="3" required>
                                </div>
                            </div>
                            <div class="input">
                                <div class="input__heading">
                                    <label class="heading" for="weight">
                                        Вес
                                    </label>
                                    <span class="input__heading-unit">
                                        кг
                                    </span>
                                </div>
                                <div class="input__wrapper">
                                    <input type="text" id="weight" name="weight" placeholder="0" inputmode="decimal"
                                        maxlength="3" required>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="form__item">
                        <legend class="heading">
                            Физическая активность
                        </legend>
                        <ul class="radios-group">
                            <li class="radio">
                                <div class="radio__wrapper">
                                    <input id="activity-minimal" name="activity" value="min" type="radio" checked
                                        required>
                                    <label for="activity-minimal">
                                        Минимальная
                                    </label>
                                </div>
                                <p class="radio__description">
                                    Сидячая работа и нет физических нагрузок
                                </p>
                            </li>
                            <li class="radio">
                                <div class="radio__wrapper">
                                    <input id="activity-low" name="activity" value="low" type="radio" required>
                                    <label for="activity-low">
                                        Низкая
                                    </label>
                                </div>
                                <p class="radio__description">
                                    Редкие, нерегулярные тренировки, активность в быту
                                </p>
                            </li>
                            <li class="radio">
                                <div class="radio__wrapper">
                                    <input id="activity-medium" name="activity" value="medium" type="radio" required>
                                    <label for="activity-medium">
                                        Средняя
                                    </label>
                                </div>
                                <p class="radio__description">
                                    Тренировки 3-5 раз в неделю
                                </p>
                            </li>
                            <li class="radio">
                                <div class="radio__wrapper">
                                    <input id="activity-high" name="activity" value="high" type="radio" required>
                                    <label for="activity-high">
                                        Высокая
                                    </label>
                                </div>
                                <p class="radio__description">
                                    Тренировки 6-7 раз в неделю
                                </p>
                            </li>
                            <li class="radio">
                                <div class="radio__wrapper">
                                    <input id="activity-maximal" name="activity" value="max" type="radio" required>
                                    <label for="activity-maximal">
                                        Очень высокая
                                    </label>
                                </div>
                                <p class="radio__description">
                                    Больше 6 тренировок в неделю и физическая работа
                                </p>
                            </li>
                        </ul>
                    </fieldset>
                    <div class="form__submit">
                        <button class="form__submit-button button" name="submit" type="submit" disabled>
                            Рассчитать
                        </button>
                        <button class="form__reset-button" name="reset" type="reset" disabled>
                            <svg width="24" height="24" viewbox="0 0 24 24" fill="#FD3636"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M13.4143 12.0002L18.7072 6.70725C19.0982 6.31625 19.0982 5.68425 18.7072 5.29325C18.3162 4.90225 17.6842 4.90225 17.2933 5.29325L12.0002 10.5862L6.70725 5.29325C6.31625 4.90225 5.68425 4.90225 5.29325 5.29325C4.90225 5.68425 4.90225 6.31625 5.29325 6.70725L10.5862 12.0002L5.29325 17.2933C4.90225 17.6842 4.90225 18.3162 5.29325 18.7072C5.48825 18.9022 5.74425 19.0002 6.00025 19.0002C6.25625 19.0002 6.51225 18.9022 6.70725 18.7072L12.0002 13.4143L17.2933 18.7072C17.4882 18.9022 17.7443 19.0002 18.0002 19.0002C18.2562 19.0002 18.5122 18.9022 18.7072 18.7072C19.0982 18.3162 19.0982 17.6842 18.7072 17.2933L13.4143 12.0002Z" />
                            </svg>
                            <span>
                                Очистить поля и расчёт
                            </span>
                        </button>
                    </div>
                </form>
                <section class="counter__result counter__result--hidden">
                    <h2 class="heading">
                        Ваша норма калорий
                    </h2>
                    <ul class="counter__result-list">
                        <li class="counter__result-item">
                            <h3>
                                <span id="calories-norm">3 800</span> ккал
                            </h3>
                            <p>
                                поддержание веса
                            </p>
                        </li>
                        <li class="counter__result-item">
                            <h3>
                                <span id="calories-minimal">3 300</span> ккал
                            </h3>
                            <p>
                                снижение веса
                            </p>
                        </li>
                        <li class="counter__result-item">
                            <h3>
                                <span id="calories-maximal">4 000</span> ккал
                            </h3>
                            <p>
                                набор веса
                            </p>
                        </li>
                    </ul>
                </section>
            </article>
        </div>
    </main>
    <script type="module" src="js/script.js"></script>
</body>

</html>