JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<button onclick="menu.toggle()">menu.toggle()</button>
  <button onclick="menu.open()">menu.open()</button>
  <button onclick="menu.close()">menu.close()</button>
  <button onclick="menu.add()">menu.add()</button>

JavaScript

function Menu(options) {
  var elem;
 
  function getElem() {
    if (!elem) render();
    return elem;
  }
 
  function render() {
    elem = document.createElement('div');
    elem.className = "menu";
 		document.body.appendChild(elem);
    var titleElem = document.createElement('span');
    elem.appendChild(titleElem);
    titleElem.className = "title";
    titleElem.textContent = options.title;
 
    elem.onmousedown = function() {
      return false;
    };
 
    elem.onclick = function(event) {
      if (event.target.closest('.title')) {
        toggle();
      }
    }
 
  }
 
  function renderItems() {
    var items = options.items || [];
    var list = document.createElement('ul');
    items.forEach(function(item) {
      var li = document.createElement('li');
      li.textContent = item;
      list.appendChild(li);
    });
    elem.appendChild(list);
  }
 
  function open() {
    if (!elem.querySelector('ul')) {
      renderItems();
    }
    elem.classList.add('open');
  } 
  function close() {
    elem.classList.remove('open');
  }
 
  function toggle() {
    if (elem.classList.contains('open')) close();
    else open();
  }
  
  var input=document.createElement('input');
    input.type = 'text';
    input.id = "ff1";
    document.body.appendChild(input);
 
    function add(){
    input = document.getElementById('ff1');
    var mas = [];
    mas.push(input.value + ","); //добавляем значение инпута в массив
    document.body.innerHTML +=mas[0];
  }
 
  this.getElem = getElem;
  this.toggle = toggle;
  this.close = close;
  this.open = open;
  this.add = add;
}
var menu = new Menu({
      title: "Сладости",
      items: [
        "Торт",
        "Пончик",
        "Пирожное",
        "Шоколадка",
        "Мороженое",
      ]
    });
 
document.body.appendChild(menu.getElem());