Javascript

#comment_338783468

Решил я тут вечерок скрасить занимательной фантастикой, желательно про космос, и чтобы хоть кого-то из актёров я знал. Смотрю, читаю аннотации и тут ВАУ, фильм 2024 года, Лоренс Фишбёрн, который Морфеус, Миллер и прочее и прочее, Томер Капон, который Французик из Пацанов, да ещё про космос! Надо смотреть.

Вместо аннотации: Будущее, космический корабль летит к Титану — крупнейшему спутнику Сатурна. Фильм Ускорение (Slingshot) 2024

Фильм, красивый, тут спору нет. Там по сюжету, я больше спойлерить не буду, честно, надо перезагрузить операционку корабля. Мелькают кадры, я думаю, что мне привидилось, отматываю, ловлю паузой и вижу это...

Собственно, оказалось, что при помощи запроса к твитам, причём по старому домену (даже на момент выпуска фильма, Маск его уже на X.com перетащил), на JavaScript с библиотекой jQuery, да ещё с устаревшим объявлением переменных через var пишутся.

Или может кто-то знатно пошутил? Я смеялся, да. Но фильм потом полностью серьёзно смотреть не мог.

Всем привет!

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

У меня была мечта попасть в IT.

Дано:
- у меня нет никаких подходящих навыков
- образование электрика
- 3 года стажа на заводе
- умею разговаривать
- из техники есть мобилка Samsung серии А и динозавр ACER, который при установке Windows 8 просил убить его.

Очередное утро, чувствую, что хватит тянуть лямку на заводе, и все-таки пора попробовать воплотить в жизнь мечту. Решение нужно было принимать срочно, иначе - еще годик, еще три, еще 10 и потом и до пенсии немного останется.
Увольняюсь с завода, устраиваюсь в IT- компанию в службу поддержки оператором в чатах и звонках. Правда со второго раза, первый решил списать тестовое для спокойствия, поймали, устно ответил как будто работал там год, поняли, что просто перестраховывался и не валенок. Переработки, нервные клиенты и партнеры добивали, но перспектива завода обратно не особо привлекала. Через полгода получилось пойти на повышение до старшего смены.

Еще через пол года пришло сообщение из головного офиса компании, что требуется маркетолог. Я, немного успокоив своего внутреннего паникера, который думал, что ничего не знает и над ним HR просто поржет, решил откликнуться. Каким-то чудом, скорее всего бог понял, что я не самый сильный его воин, этот отклик совместно с "умею разговаривать" запустили механизм и меня взяли.

Но стояла цель попасть в IT отдел, а чтобы до него достучаться (до небес было бы проще конечно и быстрее) нужно было начать что-то изучать.

Был выбран не самый простой путь - самообразование (какие-то уроки, задания мудрые книги и куча всего) ну и конечно ролики на You-Tube. Выбрал для себя Frontend, очень нравилось смотреть на круто сделанные сайты, и всегда хотелось начать их делать самому.

После нескольких месяцев начал уже сам писать какие-то простенькие сайты(лендинги).

Получился вот такой лендинг. Начинал с HTML, CSS. До GULP и JS в принципе еще даже не доходил, знаю много знакомых которые посвящали время только JS, а базовый HTML особо не трогали. Постепенно начал погружаться в JS. На проектах начал добавлять формы сообщений, бургер меню.

После нескольких тренировочных лендингов, я решил сделать что-то серьезнее. А именно одностраничный, или многостраничный сайт. Тут как раз подсуетилась жена, у которой знакомый искал разработчика для сайта. Таким образом был взят в работу еще один проект, который был еще интереснее и уже гораздо серьезнее.
Получилось реализовать много идей через JS, принять какие-то нестандартные решения, чтобы при этом сделать удобоваримый код и сохранить красивый фронт.

Но это еще далеко не верхушка айсберга. Взял плотно в обучение GULP, REACT. В будущем планирую перейти на VUE.

Пока что я в верстке, беру небольшие проекты, кодю для себя что-то что на сайтах вижу и обучаюсь и расту дальше.

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

И если есть желающие посмотреть код, я буду рад его закинуть посоветоваться, если так можно здесь :)

Всем хорошего времени суток!

Привет, это мой первый пост, поэтому не судите строго.

Не думал сначала, что вообще буду что то публиковать, но потом подумал, что может быть кому то будет это полезно.

Итак начнем, для начала создаем файл с названием index.html, открываем через любой доступный вам редактор и делаем ctrl+c -> ctrl+v в него следующее содержимое:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Стена с эмоджи</title>

<link rel="stylesheet" href="css/style.css"/>

</head>

<body>

<div class="container" style="height: 500px">

<div id="emojiHistory"></div> <!-- Контейнер для истории смайлов -->

<div class="wallcontainer">

<div class="emoji-container">

<button id="emojiButton">😊</button>

<div class="emoji-menu" id="emojiMenu" style="overflow-y: auto; height: 200px; width: 450px;">

<div class="emoji">Эмоции</div><br/>

<div class="emoji">😀</div>

<div class="emoji">😁</div>

<div class="emoji">😂</div>

<div class="emoji">🤣</div>

<div class="emoji">😃</div>

<div class="emoji">😄</div>

<div class="emoji">😅</div>

<div class="emoji">😆</div>

<div class="emoji">😉</div>

<div class="emoji">😊</div>

<div class="emoji">😇</div>

<div class="emoji">🥰</div>

<div class="emoji">😍</div>

<div class="emoji">🤩</div>

<div class="emoji">😘</div>

<div class="emoji">😗</div>

<div class="emoji">😙</div>

<div class="emoji">😚</div>

<div class="emoji">😋</div>

<div class="emoji">😜</div>

<div class="emoji">😝</div>

<div class="emoji">😛</div>

<div class="emoji">🧐</div>

<div class="emoji">🤓</div>

<div class="emoji">😎</div>

<div class="emoji">🥸</div>

<div class="emoji">🤔</div>

<div class="emoji">😳</div>

<div class="emoji">😬</div>

<div class="emoji">😱</div>

<div class="emoji">😨</div>

<div class="emoji">😰</div>

<div class="emoji">😢</div>

<div class="emoji">😭</div>

<div class="emoji">😩</div>

<div class="emoji">😫</div>

<div class="emoji">😵</div>

<div class="emoji">😳</div>

<div class="emoji">🤯</div>

<div class="emoji">😶</div>

<div class="emoji">😐</div>

<div class="emoji">😑</div>

<div class="emoji">🙄</div>

<div class="emoji">😬</div>

<div class="emoji">😏</div>

<div class="emoji">😒</div>

<div class="emoji">😤</div>

<div class="emoji">😮</div>

<div class="emoji">❤️</div>

<div class="emoji">🧡</div>

<div class="emoji">💛</div>

<div class="emoji">💚</div>

<div class="emoji">💙</div>

<div class="emoji">💜</div>

<div class="emoji">🤎</div>

<div class="emoji">🖤</div>

<div class="emoji">💖</div>

<div class="emoji">💗</div>

<div class="emoji">💓</div>

<div class="emoji">💞</div>

<div class="emoji">💕</div>

<div class="emoji">💟</div>

<div class="emoji">❣️</div>

<div class="emoji">💔</div>

<div class="emoji">😘</div>

<div class="emoji">😗</div>

<div class="emoji">😙</div>

<div class="emoji">😚</div>

<div class="emoji">💋</div>

<br/><div class="emoji">Руки</div><br/>

<div class="emoji">👋</div>

<div class="emoji">🤚</div>

<div class="emoji">✋</div>

<div class="emoji">🖐️</div>

<div class="emoji">👌</div>

<div class="emoji">✌️</div>

<div class="emoji">🤞</div>

<div class="emoji">🤟</div>

<div class="emoji">✊</div>

<div class="emoji">👊</div>

<div class="emoji">🤛</div>

<div class="emoji">🤜</div>

<div class="emoji">🙌</div>

<div class="emoji">👏</div>

<div class="emoji">🤝</div> <!-- Рукопожатие -->

<div class="emoji">🙏</div> <!-- Молитва (скрещенные руки) -->

<div class="emoji">👐</div> <!-- Открытые руки -->

<div class="emoji">🤲</div> <!-- Руки с открытыми ладонями (помощь) -->

<div class="emoji">🤹‍♂️</div> <!-- Жонглер (человек) -->

<div class="emoji">🤹‍♀️</div> <!-- Жонглер (женщина) -->

<div class="emoji">🖖</div> <!-- Жест вулканца (Спок) -->

<div class="emoji">✋</div> <!-- Рука с поднятым пальцем -->

<div class="emoji">👈</div> <!-- Указатель рукой влево -->

<div class="emoji">👉</div> <!-- Указатель рукой вправо -->

<div class="emoji">👆</div> <!-- Указатель вверх -->

<div class="emoji">👇</div> <!-- Указатель вниз -->

<div class="emoji">🖐️</div> <!-- Рука с открытой ладонью -->

<div class="emoji">👋</div> <!-- Помахать рукой -->

<div class="emoji">👐</div> <!-- Открытые руки -->

<div class="emoji">✊</div> <!-- Сжатый кулак -->

<div class="emoji">🙌</div> <!-- Поднятые руки (радость) -->

<div class="emoji">👍</div> <!-- Пальцы вверх (поддержка) -->

<div class="emoji">👎</div> <!-- Пальцы вниз (неодобрение) -->

<br/><div class="emoji">Еда</div><br/>

<div class="emoji">🍏</div> <!-- Яблоко -->

<div class="emoji">🍎</div> <!-- Красное яблоко -->

<div class="emoji">🍐</div> <!-- Груша -->

<div class="emoji">🍊</div> <!-- Апельсин -->

<div class="emoji">🍋</div> <!-- Лимон -->

<div class="emoji">🍌</div> <!-- Банан -->

<div class="emoji">🍉</div> <!-- Арбуз -->

<div class="emoji">🍇</div> <!-- Виноград -->

<div class="emoji">🍓</div> <!-- Клубника -->

<div class="emoji">🍈</div> <!-- Дыня -->

<div class="emoji">🍒</div> <!-- Вишня -->

<div class="emoji">🥭</div> <!-- Манго -->

<div class="emoji">🍍</div> <!-- Ананас -->

<div class="emoji">🥥</div> <!-- Кокос -->

<div class="emoji">🥑</div> <!-- Авокадо -->

<div class="emoji">🍅</div> <!-- Томат -->

<div class="emoji">🥕</div> <!-- Морковь -->

<div class="emoji">🥔</div> <!-- Картофель -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥬</div> <!-- Листовая зелень -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥯</div> <!-- Бейгл -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍔</div> <!-- Гамбургер -->

<div class="emoji">🍟</div> <!-- Картошка фри -->

<div class="emoji">🌭</div> <!-- Хот-дог -->

<div class="emoji">🍿</div> <!-- Попкорн -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🍱</div> <!-- Бенто -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🍜</div> <!-- Рамен -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍛</div> <!-- Карри -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥮</div> <!-- Лунный торт -->

<div class="emoji">🍺</div> <!-- Пиво -->

<div class="emoji">🍷</div> <!-- Вино -->

<div class="emoji">🥂</div> <!-- Тост -->

<div class="emoji">🍸</div> <!-- Коктейль -->

<div class="emoji">🍹</div> <!-- Коктейль с зонтиком -->

<div class="emoji">🥛</div> <!-- Молоко -->

<div class="emoji">🥛</div> <!-- Сыворотка -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🍜</div> <!-- Рамен -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍛</div> <!-- Карри -->

<div class="emoji">🥮</div> <!-- Лунный торт -->

<div class="emoji">🍺</div> <!-- Пиво -->

<div class="emoji">🍷</div> <!-- Вино -->

<div class="emoji">🥂</div> <!-- Тост -->

<div class="emoji">🍸</div> <!-- Коктейль -->

<div class="emoji">🍹</div> <!-- Коктейль с зонтиком -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🍆</div> <!-- Баклажан -->

<div class="emoji">🥬</div> <!-- Листовая зелень -->

<div class="emoji">🥕</div> <!-- Морковь -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍊</div> <!-- Апельсин -->

<div class="emoji">🍋</div> <!-- Лимон -->

<div class="emoji">🍌</div> <!-- Банан -->

<div class="emoji">🥭</div> <!-- Манго -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🎂</div> <!-- День рождения -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍔</div> <!-- Гамбургер -->

<div class="emoji">🍟</div> <!-- Картошка фри -->

<div class="emoji">🍿</div> <!-- Попкорн -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍆</div> <!-- Баклажан -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🌭</div> <!-- Хот-дог -->

<div class="emoji">🍴</div> <!-- Посуда -->

</div>

</div>

<textarea id="emojiTextarea" rows="3" style="min-height: 350px" placeholder="О чем вы хотите написать?"></textarea>

</div>

</div>

<script src="js/script.js"></script>

</body>

</html>

Далее нам понадобиться создать 2 папки с названиями css и js.

Открываем папку css и создаем файл style.css со следующим содержим:

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f2f2f2;

}

.container {

display: grid;

grid-template-rows: auto 1fr;

gap: 10px;

width: 600px;

}

.wallcontainer {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: white;

padding: 10px;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

h1 {

margin: 0;

font-size: 24px;

}

.emoji-container {

position: relative;

width: 100%;

}

#emojiButton {

font-size: 16px;

background-color: #eaeaea;

border: 1px solid #2c2c2c;

border-radius: 3px;

padding: 3px;

cursor: pointer;

transition: border-color 0.2s;

text-align: center;

}

#emojiButton:focus {

outline: none;

border-color: #000;

}

.emoji-menu {

display: none;

position: absolute;

top: calc(100% + 5px);

left: 0;

background-color: white;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

z-index: 1000;

transition: opacity 0.3s ease;

opacity: 0;

pointer-events: none;

}

.emoji-menu.show {

display: block;

opacity: 1;

pointer-events: auto;

}

.emoji {

font-size: 16px;

cursor: pointer;

margin: 2px;

display: inline-block;

}

#emojiHistory {

display: flex;

flex-wrap: wrap;

max-height: 30px;

overflow-y: auto;

height: 30px;

background: none;

border: none;

padding: 0;

}

#emojiHistory p {

margin: 0;

padding: 5px 0 0 5px;

font-size: 16px;

}

.history-emoji {

font-size: 20px;

transition: margin-left 0.1s;

margin-left: 6px;

cursor: pointer;

}

#emojiTextarea {

width: 100%;

border: 1px solid #ccc;

border-radius: 5px;

padding: 5px;

margin-top: 10px;

resize: none;

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);

outline: none;

}

#emojiTextarea:focus {

border-color: #007BFF;

}

#emojiMenu {

width: 100%;

height: 300px;

overflow-y: auto;

border: 1px solid #ccc;

padding: 10px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}

Сохраняем и закрываем, далее идем в папку js и создаем файл script.js со следующим содержимым:

const emojiButton = document.getElementById('emojiButton');

const emojiMenu = document.getElementById('emojiMenu');

const emojiTextarea = document.getElementById('emojiTextarea');

const emojiHistory = document.getElementById('emojiHistory');

const maxHistorySize = 15; // Максимальный размер истории

let emojiHistoryArray = JSON.parse(localStorage.getItem('emojiHistory')) || []; // Загружаем историю из Local Storage

function saveEmojiHistory() {

localStorage.setItem('emojiHistory', JSON.stringify(emojiHistoryArray)); // Сохраняем историю в Local Storage

}

function updateEmojiHistory() {

emojiHistory.innerHTML = ''; // Очищаем историю смайлов

if (emojiHistoryArray.length === 0) {

const historyText = document.createElement('p');

historyText.innerText = 'История пуста';

emojiHistory.appendChild(historyText);

} else {

emojiHistoryArray.forEach((emoji) => {

const span = document.createElement('span');

span.innerText = emoji;

span.className = 'history-emoji';

span.addEventListener('click', (event) => {

const clickedEmoji = event.target.innerText;

// Записываем смайл в текстовую область

emojiTextarea.value += clickedEmoji + ' ';

// Перемещаем смайл в начало истории

emojiHistoryArray = emojiHistoryArray.filter(e => e !== clickedEmoji);

emojiHistoryArray.unshift(clickedEmoji);

updateEmojiHistory();

saveEmojiHistory(); // Обновляем хранилище

});

emojiHistory.appendChild(span); // Добавляем смайлы в историю

});

}

}

emojiButton.addEventListener('click', (event) => {

emojiMenu.classList.toggle('show');

event.stopPropagation();

});

document.querySelectorAll('.emoji').forEach(emojiElement => {

emojiElement.addEventListener('click', (event) => {

const selectedEmoji = event.target.innerText;

// Изменение смайла на кнопке

emojiButton.innerText = selectedEmoji;

// Добавление в текстовое поле

emojiTextarea.value += selectedEmoji + ' ';

// Добавление в историю эмоджи

emojiHistoryArray.unshift(selectedEmoji);

if (emojiHistoryArray.length > maxHistorySize) {

emojiHistoryArray.pop();

}

updateEmojiHistory();

saveEmojiHistory(); // Сохраняем обновленную историю

emojiMenu.classList.remove('show');

});

});

// Загружаем историю смайлов при загрузке страницы

updateEmojiHistory();

// Закрыть меню при клике вне

window.addEventListener('click', (event) => {

if (!emojiButton.contains(event.target) && !emojiMenu.contains(event.target)) {

emojiMenu.classList.remove('show');

}

});

Сохраняем и открываем index.html через браузер должно получиться следующее:

Также при использовании emoji они будут записываться с помощью скрипта в память с помощью local storage, поэтому при обновлении страницы, история использований emoji будет запоминаться вот так:

Надеюсь это будет кому то полезно, камни не кидайте все таки первый раз пишу статейку))
Всех благ!