Browse Source

HW-js-base done

Olga_Brekhuntsova 2 years ago
parent
commit
06b2157442

+ 3 - 0
hw-js-base-debug-and-vars/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

+ 14 - 0
hw-js-base-debug-and-vars/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>nix-js-base-debug-and-vars</title>
+</head>
+
+<body>
+     <script src="/js/task-01.js" type="module"></script>
+    <script src="/js/task-02.js" type="module"></script> 
+</body>
+
+</html>

+ 31 - 0
hw-js-base-debug-and-vars/js/task-01.js

@@ -0,0 +1,31 @@
+// Calc
+// Обратите внимание на те или иные расчеты, нужные вам в обычной жизни. 
+// Это может быть оплата за электричество, количество километров, пройденных за месяц
+//     (если вы, например, ходите по одному и тому же маршруту каждый день),
+//количество батонов, кофе, масла, всего чего угодно и так далее.
+//  Так же можете написать любую калькуляцию, нужную вам в работе.
+//     Представьте это в форме кода, подобного следующему:
+//     var firstParameter = 5; //смысл переменной
+// var secondParameter = 10; //иной комментарий, поясняющий переменную
+
+// var somePartialResult = firstParameter*5; //суть переменной и формулы
+// var someOtherPartialResult = secondParameter/100500; //
+
+// var result = somePartialResult + someOtherPartialResult; //суть результата и переменной
+// Для создания минимального пользовательского интерфейса можете использовать prompt и alert
+// То есть, напишите калькуляцию, которая из входных данных подсчитывает результат,
+//     с осмысленными названиями переменных и комментариями к ним и формулам,
+// использованным в калькуляции.
+
+const dayNorm= +prompt("Введи свою дневную норму калорий");
+const breakfastGr = +prompt("Введи сколько грамм ты съел на завтрак");
+const breakfastCal = +prompt("Введи калораж на 100 грамм завтрака");
+
+const dinnerGr = +prompt("Введи сколько грамм ты съел на обед");
+const dinnerCal = +prompt("Введи калораж на 100 грамм обеда");
+
+const supperGr = +prompt("Введи сколько грамм ты съел на ужин");
+const supperCal = +prompt("Введи калораж на 100 грамм ужина");
+
+let dayCallories = (breakfastGr * breakfastCal + dinnerGr * dinnerCal + supperGr * supperCal) / 100;
+dayCallories <= dayNorm ? alert("Герой! ты сегодня не пережрал") : alert("С таким аппетитом пора покупать леопардовые лосины");

+ 21 - 0
hw-js-base-debug-and-vars/js/task-02.js

@@ -0,0 +1,21 @@
+// Задание на синий пояс
+// Сделайте форму логина и пароля, которая по кнопке login будет сверять логин и пароль
+//  с ассоциативным массивом:
+ var credentials = {
+    login: 'admin',
+    password: 'qwerty',
+};
+// и отображать в случае успеха зеленый div с поздравлением или красный div с текстом ошибки.
+const checkFnc = () => {
+(loginId.value === credentials.login && passwordId.value === credentials.password) ? checkResult.innerHTML="<div style='background-color:green; color:white; text-align:center'>Correct data. Congrats!</div>" : checkResult.innerHTML="<div style='background-color:tomato; color:white; text-align:center'>Incorrect data. Try again.</div>";
+  
+};
+
+document.body.insertAdjacentHTML("afterbegin", "<section id=task02 style='display:inline-block'></section>");
+task02.insertAdjacentHTML("beforeend", "<form id=checkLoginForm style='display:inline-block;'></form>");
+checkLoginForm.insertAdjacentHTML("beforeend", "<h2 style='margin-left:auto; margin-right:auto'>Sigh in</h2>");
+checkLoginForm.insertAdjacentHTML("beforeend", "<input id=loginId placeholder='login'>");
+checkLoginForm.insertAdjacentHTML("beforeend", "<input id=passwordId style='margin-left:30px' placeholder='password'>");
+checkLoginForm.insertAdjacentHTML("beforeend", "<button id=checkLoginBtn type='button' style='display:block; margin-left:auto; margin-right:auto; margin-top:20px'>Login</button>");
+task02.insertAdjacentHTML("beforeend", "<div id=checkResult style='margin-top:20px'></div>")
+checkLoginBtn.onclick = checkFnc;

+ 2 - 0
hw-js-base-debug-and-vars/readme.md

@@ -0,0 +1,2 @@
+Каждая задача в отдельном скрипте, чтобы удобнее было проверять.
+Хостинг http://hw_js_base.olgapistryak.fe.a-level.com.ua

+ 1 - 1
hw-markup & git/readme.md

@@ -5,7 +5,7 @@ HW-01.1 ДЗ из учебника (http://doc.a-level.com.ua/markup__lesson01#h
 HW-01.2 Верстка Реакт (http://doc.a-level.com.ua/react-pre)
 Ссылка на репозиторий https://github.com/OlgaBrekhuntsova/nix-fe-hw_01.2_react-pre
 Ссылка на страницу на гитхабе https://olgabrekhuntsova.github.io/nix-fe-hw_01.2_react-pre/
-Ссілка на страницу на сервере a-level http://web_studio.olgapistryak.fe.a-level.com.ua/
+Ссылка на страницу на сервере a-level http://web_studio.olgapistryak.fe.a-level.com.ua/
 
 Переделывала этот исходник: https://github.com/OlgaBrekhuntsova/goit-markup-hw-08
 Что есть: