Я только начинаю заниматься фронтенд-разработкой. Я попытался сделать довольно простое уведомление о согласии на использование файлов cookie. Я до сих пор не совсем понимаю flexbox и позиционирование, поэтому код запутан.

HTML:

    <button id="shownotice">Click to ask</button>
<div id="consent_elem" class="consent_notice" hidden="true">
    <p>Are you fine with cookies?</p>
    <div id="buttons">
        <button class="consent_button" id="yes">Yes</button>
        <button class="consent_button" id="no">No</button>
</div>

CSS:

#shownotice {
    background-color: cyan;
    border:0;
    padding: 5px;
}


[hidden] { display: none !important; }

.consent_notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    background-color: red;
    bottom:0px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

#buttons {
    display: flex;
    margin-right: 10px;
    flex-direction: column;
    padding: 5px;
}

.consent_button {
    margin: 5px;
    background-color: gray;
    border: 0;
    padding: 3px;
}

JS:

show_button = document.querySelector("#shownotice");
consent_elem = document.getElementById("consent_elem");

show_button.onclick = (e) => {
    consent_elem.hidden = consent_elem.hidden ? false : true;
}

ID

Избегайте использования идентификаторов для стилизации. Их можно использовать для идентификации элементов с помощью JavaScript, но специфичность в CSS может усложнить структурирование стилей.

Такие имена, как buttons, yes и no являются очень общими, и они могут легко понадобиться в документе более одного раза.

Также постарайтесь быть более последовательным со стилем классов / имен / идентификаторов. Например, shownotice без подчеркивания, но consent_notice делает. Попробуйте использовать дефисы вместо подчеркивания, чтобы соответствовать общему стилю CSS, в котором дефисы используются, как в background-color.

HTML

"true" не является допустимым значением атрибута для атрибута hidden. Как логический атрибут hidden либо присутствует без значения (или, если вы предпочитаете использовать значение "hidden" как в hidden="hidden") или нет. hidden="false", например, все равно скроет элемент.

JavaScript

Объявите свои переменные с помощью const или же let (или же var если вам нужно поддерживать очень старые браузеры).

В JavaScript принято писать имена переменных в camelCase, а не с подчеркиванием.

Вы могли бы быть более последовательными при получении элементов по идентификатору и использовать либо querySelector или же getElementById, но не то и другое одновременно.

Не использовать on... свойства для назначения обработчиков событий. Использовать addEventListener.

Используйте логический отрицатель ! для переключения логических значений:

consent_elem.hidden = !consent_elem.hidden;