Can you explain how this code (structure and styles) can be presented as a js file? in fact, you need to convert the html file to js objects, which in turn are converted to Dom elements. Without the use of libraries.

<!DOCTYPE html> <html> <head> <title>stopwatch</title> <meta charset="utf-8"> </head> <body> <button class="open-record-panel-btn">Открыть / скрыть панель</button> <div class="recordPanel hidden"> <svg id="mouse-circle"></svg> <div class="recordPanel__text"> Запишите: </div> <div class="recordPanel__start recordPanel__btn"> <img src="assets/images/start.png"> <span>Записать</span> </div> <div class="recordPanel__stop recordPanel__btn disabled"> <img src="assets/images/stop.png"> <span>Стоп</span> </div> <div class="recordPanel__timer recordPanel__text"> 00:00:00 </div> <div class="recordPanel__settings recordPanel__btn"> <img src=assets/images/settings.png> <span>Параметры</span> </div> <div class="recordPanel__settings-window"> <h3 style="margin: 0;"> Окно настроек </h3> <br> <div style="text-align: right;"> <label style="margin-right: 5px;"> Путь к файлу записи: </label> <input type="text"> <button>Обзор</button> <br><br> <button class="recordPanel__settings-window-ok"> Ок </button> <button class="recordPanel__settings-window-cancel"> Отмена </button> </div> </div> <div class="recordPanel__close">✖</div> </div> <div> Текст </div> </body> </html>

In html there should be only a button "open / hide panel" and simply connected js file in which everything is located. And here is such a css

 body { padding-top: 50px; } .recordPanel.hidden { display: none; } .recordPanel { display: flex; justify-content: flex-start; color: #0070C0; height: 30px; border-bottom: 1px solid #0070C0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; position: fixed; top: 0; left: 0; right: 0; padding: 5px; background: white; } .recordPanel__timer { display: flex; align-items: center; margin: 0 10px; } .recordPanel__btn img { margin-right: 6px; } .recordPanel__btn { margin: 0 5px; cursor: pointer; display: flex; align-items: center; color: black; padding-right: 5px; } .recordPanel__btn.disabled { color: grey; background: #ccc; border-radius: 20px; cursor: no-drop !important; } .recordPanel__btn:hover:not(.disabled) { background:gainsboro; border-radius: 15px; } .recordPanel__text { display: flex; align-items: center; margin: 0 10px; } .recordPanel__settings-window { display: none; position: relative; top: 35px; left: 190px; margin-left: -422px; border: 1px solid blue; background: white; width: 390px; height: 100px; padding: 15px; } .recordPanel__settings-window.visible { display: block !important; } .recordPanel__close { position: absolute; right: 20px; cursor: pointer; } #mouse-circle { width: 30px; height: 30px; border-radius: 100%; box-shadow: yellow; background: yellow; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0.4; } .recordPanel:not(.recording) #mouse-circle { display: none; } .recordPanel.recording #mouse-circle { display: block; }
  • why not even libraries? that little jquery that you can?) - Evgeny Nikolaev
  • A framework can be?)) In general, it depends on the further task, you can just insert all unnecessary html as a line in js and insert it by click - Artem Gorlachev
  • what is meant by js objects which are in turn converted into Dom elements. ? - Grundy
  • Why this may be needed? - Grundy
  • @Grundy, a new framework gash, as an option) - Dmytryk

1 answer 1

 <div id='test'></div> <script type='text/javascript'> var o=document.createElement('div') o.innerHTML = 'Привет!' document.getElementById('test').appendChild(o) </script>

Like so.

Make a button and hang onclick on it with the launch of the function that creates the elements.

But why such a bike? Isn't it easier to leave everything as it is and just remove the display:block property by event?

Narpimer so

 function myFunction() { var element = document.getElementsByClassName("hidden"); element[0].style.display = "block"; }