Why will the CSS/Javscript and HTML only pass some properties, but not all? : I have downloaded source code for a hidden search bar, that when clicked, reveals a tex input bar. 

I have copied this html into my homepage.html:


    <div id="reserveButtonOuter">  <button id="reserveButton">Reserve a Table</button> </div>
          
                                    <div id="sb-search" class="sb-search">
                          <form>
                            <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
                            <input class="sb-search-submit" type="submit" value="">
                            <span class="sb-icon-search"></span>
                          </form>
                </div>

this is connected to my HomePage.js file, in which I have the code below: 

 ;( function( window ) {
        
        function UISearch( el, options ) {  
          this.el = el;
          this.inputEl = el.querySelector( 'form > input.sb-search-input' );
          this._initEvents();
        }

        UISearch.prototype = {
          _initEvents : function() {
            var self = this,
              initSearchFn = function( ev ) {
                if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
                  ev.preventDefault();
                  self.open();
                }
                else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
                  self.close();
                }
              }

            this.el.addEventListener( 'click', initSearchFn );
            this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
          },
          open : function() {
            classie.add( this.el, 'sb-search-open' );
          },
          close : function() {
            classie.remove( this.el, 'sb-search-open' );
          }
        }


This is only a small part of the code, as it is several hundred lines.
The .css file is linked to my page fine as it is working for my other elements. The search bar is rendering as nothing more than an orange square, which when clicked shows no errors on the console. Im not sure what that means for the Javascript? 

Any advice would be great, thanks!