JS формы логин и пароль

Создать html-страницу с формой для логина пользователя и
галочкой «Запомнить меня». После заполнения формы вывести на
экран: «Привет, Имя! Я тебя запомнил/не запомнил».
Подскажите код для такого задания

В чем именно сложность? Есть уже какой-то код?

1 симпатия

HTML

<div class="container">
  <div id="form">
    <div class="row">
      <input type="text" class="name" placeholder="your name" />
    </div>
    <div class="row"><input type="checkbox" id="remember" /> запомнить</div>
    <div class="row">
      <button class="btn" onclick="invisibleBlock()">login</button>
    </div>
  </div>
</div>

JS

const cont = document.querySelector(".container"),
  form = document.querySelector("#form"),
  text = document.querySelector(".name"),
  check = document.querySelector("#remember").checked;

function invisibleBlock() {
  let checked = "";
  
  check ? (checked = "запомнил") : (checked = "не запомнил");
  
  if (text !== "") {
    form.style.display = "none";
    cont.innerHTML = `
    <div class='row'>
      <h1>Привет, ${text.value}! Я тебя ${checked}</h1>
    </div>
    <button class='btn' onclick="reset()">Вернуться назад</button>
    `;
  }
}

function reset() {
  cont.innerHTML = `
  <div class="container">
  <div id="form">
        <div class="row" >
            <input type="text" class="name" placeholder="your name">
        </div>
        <div class="row">
            <input type="checkbox" id='remember'> запомнить
        </div>
        <div class="row">
            <button class="btn" onclick="invisibleBlock()">login</button>
        </div>
</div>
</div>
`;
}

codepen

1 симпатия

Отлично. Думаю автору поможет.

С реализацией есть нюансы.

  1. Не удобно иметь дубликат разметки формы и в reset и в исходном html. Читающий не поймет что изменив разметку в одном месте нужно менять ее и в другом. Для таких случаев лучше иметь разметку в одном месте (reset, ибо эта фунция незбежно нужна в реализации) и просто вызывать ее при старте приложения.

  2. Из-за того что ссылк на узлы чекбоса запоминаются в начале программы, а потом узлы перезаписываются reset-ом, то значения “запомнить меня” не будут корректными при последующих отправках формы. Поэтому ссылку на чекбокс нужно получать в самой функции обработки события.

Вот код с правками, описанными выше: https://codepen.io/podgorniy/pen/OJvvwQR?editors=1111

1 симпатия

да, что-то я не подумал о перезаписывании checkobox’a))
код и правду слаще стал)))