origami1024

К вопросу об оценке быстродействия.

Добавлять класс бутстрапа всегда короче по кол-ву символов ("flex" против "display: flex"), чем определять самому. Это влияет на размер файла - скорость загрузки.

Тебе нужно узнать ip своего pc в локальной сети роутера, вбивай его как адрес в браузер на смартфоне (у меня, например, http://192.168.0.105)

Припоминая мои первые опыты с svg, аттрибут preserveAspectRatio="none" мне показался очень полезным в подобных задачах, и я на него долго не мог наткнуться.

let tmpTimer = undefined;
$(document).on("click", ".test", function() {
    clearTimeout(tmpTimer)
    tmpTimer = setTimeout(() => {
      alert("2000 милисекунд спустя");
      tmpTimer = undefined
    }, 2000);
  console.log("click")
})

UPD: удалил ссылку на код на внешний ресурс из ответа.

Твой объект на самом деле просто элемент.
Ошибка в том, что ты обращаешься к нему по id, но hero он только как class...

вот так попробуй:

function levo(){
    ttt-=10; document.getElementsByClassName('hero')[0].style.left=ttt+'px';
  }

Создай переменную с состоянием коммуникации - на каком этапе сейчас общение и используй ее в условиях

Открою для тебя секрет, эти данные изначально есть на странице и их от тебя просто, сюрприз, скрывает браузер.

Если без ajax, то через websocket.

Это называется SPA. Приложение в браузере. Но скорее всего там ajax.

Нанять орангутанга-дизайнера и макаку-верстальщицу дешевле, чем одного образованного человека. А качество одинаковое, благодаря формализации процесса.

Когда скрываешь форму, сначала убери аттрибут required у user_name и user_phone, или сделай их disabled, потому что форму можно отправить, даже если она не видна. И хром пытается показать, что поле не заполнено, но не может получить фокус.

Добавь перед ...display= "none"

document.getElementById('name_1').setAttribute('disabled', true)
document.getElementById('phone_1').setAttribute('disabled', true)

Да у тебя там много ошибок:
1) правильное название функции getElementsByTagName и она выдает массив, так что нужно делать

height = document.getElementsByTagName("input")[0].value

2) getElementsByTagName тоже выдает массив, надо:
bar = document.getElementsByClassName("bar")[0]
3) чтобы указать height, надо через стили, и еще добавить в конце единицы измерения
bar.style.height = height + 'px';

https://codepen.io/origami1024/pen/JjPJGNx

1) Положи обе картинки во враппер, врапперу добавь класс position-relative.
2) Обеим картинкам добавь класс position-absolute.

https://codepen.io/origami1024/pen/KKPmQzb

Используй оператор остатка z = x % y.
Создай сначала массив со всеми перебранными Y в диапазоне, потом из него случайный элемент.

.element{
  opacity: 1;
  animation-name: a1;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@keyframes a1{
  from {opacity: 1;}
  to {opacity: 0;}	
}

Через js - используй getElementsByClassName

https://codepen.io/origami1024/pen/gOYLzqd

Через css - :nth-child(n+5):

.Content:nth-child(n+5){
  display: none;
}

родителю display: flex;
1му диву width: 40px;
2му диву flex: 1;

https://codepen.io/origami1024/pen/qBWarEq