Semantic.Moscow

document.addEventListener('click',function(z){
if(z.target.tagName==='A'){
let h=new URL(z.target.href).hash;
if(h !=''){
z.preventDefault();
let b=document.getElementById(h.replace('#','')); // убрал решётку
b.scrollIntoView({block:'center',behavior:'smooth'});}}}); // отправил к центру блока с ID который был после решётки

кружочки можно сделать множественными background`ами с inline SVG (circle)
позиционировать флексом удобно (поиграться) прямо в консоли браузера.

подложите фон "нет фото" под все картинки.
если картинка не загрузилась, то будет виден ваш фон

так в чём собственно проблема?
для начала определитесь - вы будете текущую дату брать с сервера, у клиента или с чужого сервера по API?

нагуглили как взять дату с сервера, по API или у клиента (у клиента дата может быть сбита!)?

хорошо, теперь возьмём нужный блок, у которого ID или атрибут 'data-что-то-тут' совпадают с полученной ранее датой.
... и что-то делаем (display:block)

может лучше эту часть формировать на сервере, например через PHP?

оффтоп: а не многовато ли кода для простого модального окна?

<style>div{display:none}</style>
<button data-m="modal" onclick="document.getElementById(this.dataset.m).style.display='block'">покажись</button><div id="modal">я окно</div>

чтобы упростить себе задачу, нужно использовать валидацию формы и на стороне клиента,
JS для этого не требуется!

1. используйте для input соответствующие типы!
type="email",
type="tel"
2. используйте maxlength для ограничения длины строки в поле
3. используйте атрибут placeholder для подсказок
4. используйте атрибут pattern для проверки введённых данных
4.1 для указания ошибки ввода есть псевдоклассы :valid, :invalid и :out-of-range
которые и нужно дёргать если pattern не совпал.
ну и конечно не забывать про атрибут required

ну нужно считать,
нужно просто спросить у браузера какая в данный момент у него получилась высота блока.
спрашивать через offsetHeight

это называется XHR
после отправки что и где отображать, это на ваш выбор, но то как меняется страница, это уже не XHR,
это обычный JS - работа с DOM

есть же документация по функции:
https://www.php.net/manual/ru/function.json-decode.php

через window.pageYOffset: console.log(window.pageYOffset);

а почему самому то не сверстать?
тем более, что сейчас во всех виджетах ссылка на вацап будет битая
и заменить её на whatsapp://send?phone=+71234567890 далеко не везде получится.

<div id="txt"></div><input type="text" oninput="typeit(this.value)"/>
<script>function typeit(text){
document.getElementById('txt').innerHTML=text;}</script>

не внимательно (наверное) прочитал.
если нужно в обратную сторону,
т.е. кликать по тексту, который должен вставляться в input, то так:

<div id="person">ВВП</div>
<input id="txt" type="text"/>
<script>
document.getElementById('person').addEventListener('click',(e)=>{
document.getElementById('txt').value=document.getElementById('person').innerHTML;});
</script>

Александр Гойник,

<button id="btn">click!</button>
<input id="txt" type="text">

<script>
document.getElementById('btn').addEventListener('click',(e)=>{
console.log(document.getElementById('txt').value);});
</script>

в document.getElementById('txt').value у вас попадает значение атрибута value,
ну а раз уж это текстовое поле, value, это как раз то самое содержимое текстового поля - заданное изначально,
или изменённое пользователем

робот сам никуда ничего не подставляет.

для каждого товара нужна отдельная страничка с отдельным описанием микроразметки.
т.е. генерировать микроразметку нужно точно так же, как и саму карточку товара.

background-image:(линия.png);
background-position:bottom left;
background-repeat:no-repeat;

линия.png - 1px
остальной бордер как обычно, с скруглением на нужный радиус.
вместо линия.png можно просто очень тонкий градиент нарисовать самим css