RBN Focus Redesign

by karlovac

HTML

<div class="fc-main-panel">
  </div>
       
  <div class="fc-menu-panel">
  </div>

CSS

body {
    height: 719px;
  } 
    
  .fc-menu-panel {
    background-color: #ff0000;
    position: relative;
    display: block;
  } 
    
  .fc-menu-panel input {
    display: block;
    margin: auto;
    margin-top: 30px;
    font-size: 24px;
  }
    
  .fc-main-panel {
    display: flex;
    height: 612px;
    background-color: cyan;
  }

JavaScript

const logEvent = (e) => {
      console.log('['+e.type+'] event');
    };
      
    for (let i=0; i<2; i++) {
      const el = document.createElement('input');
        
      el.addEventListener('mousedown', e => {
        logEvent(e);
      });
      el.addEventListener('focus', e => {
        logEvent(e);
        e.preventDefault();
        setTimeout(() => {
          console.log('timeout has run');
          // window.scrollTo(0,0);    
        }, 100);
      });
      el.value = 'input number ' + i;
      const parent = document.querySelector('.fc-menu-panel');
      parent.append(el);
    }