Скрипт для текстового поля

Дмитрий Соловей@solovey

Добавлено: 09.03.2023 18:02

ChatGPT @chatgpt

Добавлено: 09.03.2023 18:02

Character Counter

<div>Character count: <span id="output">0</span></div>
  </body>
</html></div></div></div></div>
  </div>
  </div>
</div>

<div> </div></div></div></div></div></div></div></div></div><div class="w-elements-container-bottom"><div class="cont"></div></div></div></div></div></div></div></div></div><div class="w-elements-container-bottom"><div class="cont"><div class="node widget-pagination widget css48"><div class="metahtml css76"><script data-name="1252372973" data-lazy="true" data-cdn="[""]" data-sequentially="false" data-static-params="{}" data-dynamic-params="{}" class="component-js-fn">function _component_js_1252372973(page, el, params) {

}</script></div></div></div></div></div></div>
</div></div></div></div></div></div></div><div class="padding_bottom"></div></div><div class="node ul58oy2af3c6n1kpj5fl section-variables section"></div><div class="node section section-helper css77"></div>

<script type="text/javascript" 
                            src="/assets/4.3/vendors-sync.js?v=1683320452"></script>

<div class="notifications"></div><script>
const notifications = document.querySelector(".notifications");
const toastDetails = {
    timer: 5000,
    success: {
        icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2Z" fill="#6ACF3B"/><path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="#6ACF3B"/></svg>',
        header: 'Успех',
        text: 'Все сохранил',
    },
    error: {
        icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#E77575"/><path d="M13.0594 12.0001L15.3594 9.70011C15.6494 9.41011 15.6494 8.93011 15.3594 8.64011C15.0694 8.35011 14.5894 8.35011 14.2994 8.64011L11.9994 10.9401L9.69937 8.64011C9.40937 8.35011 8.92937 8.35011 8.63938 8.64011C8.34938 8.93011 8.34938 9.41011 8.63938 9.70011L10.9394 12.0001L8.63938 14.3001C8.34938 14.5901 8.34938 15.0701 8.63938 15.3601C8.78938 15.5101 8.97937 15.5801 9.16937 15.5801C9.35937 15.5801 9.54937 15.5101 9.69937 15.3601L11.9994 13.0601L14.2994 15.3601C14.4494 15.5101 14.6394 15.5801 14.8294 15.5801C15.0194 15.5801 15.2094 15.5101 15.3594 15.3601C15.6494 15.0701 15.6494 14.5901 15.3594 14.3001L13.0594 12.0001Z" fill="#E77575"/></svg>',
        header: 'Ошибка',
        text: 'Все сломал',
    },
    warning: {
        icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M21.7605 15.92L15.3605 4.4C14.5005 2.85 13.3105 2 12.0005 2C10.6905 2 9.50047 2.85 8.64047 4.4L2.24047 15.92C1.43047 17.39 1.34047 18.8 1.99047 19.91C2.64047 21.02 3.92047 21.63 5.60047 21.63H18.4005C20.0805 21.63 21.3605 21.02 22.0105 19.91C22.6605 18.8 22.5705 17.38 21.7605 15.92Z" fill="#FE9902"/><path d="M12 14.75C11.59 14.75 11.25 14.41 11.25 14V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75Z" fill="#FE9902"/><path d="M12 18.0001C11.94 18.0001 11.87 17.9901 11.8 17.9801C11.74 17.9701 11.68 17.9501 11.62 17.9201C11.56 17.9001 11.5 17.8701 11.44 17.8301C11.39 17.7901 11.34 17.7501 11.29 17.7101C11.11 17.5201 11 17.2601 11 17.0001C11 16.7401 11.11 16.4801 11.29 16.2901C11.34 16.2501 11.39 16.2101 11.44 16.1701C11.5 16.1301 11.56 16.1001 11.62 16.0801C11.68 16.0501 11.74 16.0301 11.8 16.0201C11.93 15.9901 12.07 15.9901 12.19 16.0201C12.26 16.0301 12.32 16.0501 12.38 16.0801C12.44 16.1001 12.5 16.1301 12.56 16.1701C12.61 16.2101 12.66 16.2501 12.71 16.2901C12.89 16.4801 13 16.7401 13 17.0001C13 17.2601 12.89 17.5201 12.71 17.7101C12.66 17.7501 12.61 17.7901 12.56 17.8301C12.5 17.8701 12.44 17.9001 12.38 17.9201C12.32 17.9501 12.26 17.9701 12.19 17.9801C12.13 17.9901 12.06 18.0001 12 18.0001Z" fill="#FE9902"/></svg>',
        header: 'Предупреждение',
        text: 'Не делай это',
    },
    info: {
        icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.4" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" fill="#4EADFF"/><path d="M12 10.25C11.59 10.25 11.25 10.59 11.25 11V16C11.25 16.41 11.59 16.75 12 16.75C12.41 16.75 12.75 16.41 12.75 16V11C12.75 10.59 12.41 10.25 12 10.25Z" fill="#4EADFF"/><path d="M11.08 8.38012C11.13 8.50012 11.2 8.61012 11.29 8.71012C11.39 8.80012 11.5 8.87012 11.62 8.92012C11.86 9.02012 12.14 9.02012 12.38 8.92012C12.5 8.87012 12.61 8.80012 12.71 8.71012C12.8 8.61012 12.87 8.50012 12.92 8.38012C12.97 8.26012 13 8.13012 13 8.00012C13 7.87012 12.97 7.74012 12.92 7.62012C12.87 7.49012 12.8 7.39012 12.71 7.29012C12.61 7.20012 12.5 7.13012 12.38 7.08012C12.26 7.03012 12.13 7.00012 12 7.00012C11.87 7.00012 11.74 7.03012 11.62 7.08012C11.5 7.13012 11.39 7.20012 11.29 7.29012C11.2 7.39012 11.13 7.49012 11.08 7.62012C11.03 7.74012 11 7.87012 11 8.00012C11 8.13012 11.03 8.26012 11.08 8.38012Z" fill="#4EADFF"/></svg>',
        header: 'Информация',
        text: 'Для справки что то',
    }
}

const removeToast = (toast) => {
     toast.classList.add("hide");
     if(toast.timeoutId) clearTimeout(toast.timeoutId); 
    setTimeout(() => toast.remove(), 500); 
}

</script>

</div></body>
</html>