homework/hw-js-base-debug-and-vars/js/task-02.js

// Задание на синий пояс
// Сделайте форму логина и пароля, которая по кнопке 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;