Horizontal menu for 3 items

My task was to create a menu that displays three items (A,B,C), and has two nav buttons `. So for example, a menu of (A, B, C, D, E) starts off showing A,B,C and can press -> twice to display C,D,E.

My questions beyond general code review feedback are:

• How would you view the "programmer" behind this code in terms of ability/thought?

• How would you feel if you were working on legacy code and for whatever reason, had to edit a menu or add to a menu or debug this code?

• (Maybe overlap as the first question) - if you were a hiring manager on an interview, what kind of impression would this code give you?

I feel as though I have a ton to learn so I'm not expecting great reviews or anything, so your brutal honesty is appreciated.

Here are the flaws I noticed myself:

• Img paths are hard-coded as ../images/misc/foo.png instead of of having the include path defined as a constant






• The container with id=dataPreserve may seem unclear in its purpose/messy? This was my first time using jQuery's data function and I discovered that updating the entire container with .html();, also overwrote the data (!), and that I had to leave an outer-most container untouched during .html();s so as to preserve jQuery .data.




Here is the code:

HTML page

``
asdf


var uniqueName = 'mbp';
var subtitles = ['NAME 1', 'NAME 2', 'NAME 3', 'NAME 4', 'NAME 5'];
var icons = ['ph.png', 'ph2.png', 'ph3.png', 'ph4.png', 'ph.png'];
var descripts = ['Ut enim ad minim veniam, quis nostrud exercitation.', 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Template

The first thing that comes into mind when building widgets is how the HTML is written. I'd avoid the HTML concatenated strings in JS. They're just so messy. I prefer templates instead, like Mustache.

Template in `

The parser will ignore since type is unknown to the browser:

  
    {{#someArray}}
    Current value: {{.}}
    {{/someArray}}
  

Grab the HTML string:

var template = $('#myTemplate').html();

HTML string:

If you want self-contained, like for a plugin, design the HTML and compress to this:

var template = '{{#someArray}}Current value: {{.}}{{/someArray}}';

Semantics

You are creating a menu. In HTML terms, it's a list. Make it like so in static. Makes for good fallback when JS is disabled, or if something prevents the code from running, like lacking APIs or something:

  
    
    TITLE_TEXT
    ITEM_TEXT
  
  ...

• Additional data can be embedded as data-* attributes. Since this is per item, it would make more sense if it was placed in

You can them morph it in JS to add the slider:

  
    
      
        
        TITLE_TEXT
        ITEM_TEXT
      
      ...
    
  
  Left
  Right

• .container would house the entire mechanism,






• .fixed-width-container with overflow:hidden to hide the off-screen elements in the list.






• The width would be the .fixed-width-container width multiplied by the number of items. This makes the slider expand beyond the container. If you need to display 3 items at a time, that would be (.fixed-width-container` width / 3) * number of items.

• The arrows positioned absolutely to the left and right of the container.

StackExchange Code Review Q#44085, answer score: 5