Widget Co

"CREATETHE GROUP" Pre-interview Exercise

by Chris Watson

HTML

<!DOCTYPE html>
<html>

<head>
<title>Widget Co</title>
</head>

<body>

<div id="container">
    <a href="#" id="logo" class="section">Widget Co</a>
    <div id="nav" class="section">
        <a href="#">News</a>
        <a href="#">Products</a>
        <a href="#">About Us</a>
        <a href="#">Contact</a>
        <a href="#">Jobs</a>
    </div>
    <div id="content" class="section">
        <h1 class="top">Our Company</h1>
        <p>Lorem ipsum dolor sit amet, fusce faucibus eget. Congue cras lacus praesentium amet tristique. Sit conubia nisl sed non felis interdum, sollicitudin purus arcu suspendisse, dui nulla risus. Quis dapibus aliquam semper consequat. Laoreet quam tristique laoreet lorem ac, vitae felis nulla dolore montes, sed ut libero, condimentum id. Sollicitudin sed velit. Vel amet laoreet netus a, magna est et nulla ante, turpis class sapien velit orci lacus. Curabitur suspendisse. Ut pellentesque dolor sit nec imperdiet, diam aliquam eleifend, dictumst vehicula libero mattis phasellus, nec nulla massa duis dolor tristique. Montes at varius etiam gravida in, libero sed quam diam quam, non curabitur id amet rhoncus in aliquam, suscipit vitae a augue.</p>
        <div class="image-slider">
            <div class="images">
                <img src="http://s13.postimage.org/kvqp3bsfb/BMW_M3_2002_03.jpg" alt="Car 1">
                <img src="http://s13.postimage.org/wm97ygalj/car_photos.jpg" alt="Car 2">
                <img src="http://s13.postimage.org/seefpp95z/car_pics.jpg" alt="Car 3">
            </div>
            <div class="controls">
                <a href="javascript:;" onclick="scroll(this)" class="arrow left"></a><a href="javascript:;" onclick="scroll(this)" class="arrow right"></a>
                <div class="blobs"></div>
            </div>
        </div>
        <h1>Our People</h1>
        <p>Aenean elit ante, accumsan in commodo quis, iaculis non ipsum. Vestibulum felis sapien, consectetur convallis hendrerit et, elementum et...

CSS

body{
    background:url('http://s13.postimage.org/n5jertqqv/background.jpg') fixed;
    background-size:100% 100%;
    color:#fff;
    font-family:sans-serif;
    margin:0px;
    text-align:center;
}
.section{
    background:url('http://s16.postimage.org/6dhjvlsqp/image.png');
}
#container{
    margin-left:auto;
    margin-right:auto;
    width:1103px;
    height:100%;
    position:relative;
    text-align:left;
}
#logo{
    display:block;
    text-transform:uppercase;
    height:92px;
    line-height:92px;
    font-size:45pt;
    position:fixed;
    top:64px;
    color:#fff;
    text-decoration:none;
    padding:0 48px 0 31px;
}
#nav{
    text-transform:uppercase;
    font-size:13.5pt;
    position:fixed;
    width:247px;
    top:195px;
    padding:25px 0px;
    margin:0px;
}
#nav a{
    text-decoration:none;
    color:#fff;
    display:block;
    padding:1px 0 1px 20px;
}
#nav a:hover{
    color:#ff0;
    //background:url('http://s16.postimage.org/6dhjvlsqp/image.png');
}
#content{
    width:540px;
    position:absolute;
    right:0px;
    top:0px;
    border-left:3px solid #333;
    border-right:3px solid #333;
    padding:44px 30px;
}
#content h1{
    text-transform:uppercase;
    font-size:22pt;
    margin:71px 0 24px 0;
}
#content h1.top{
    margin-top:0;
}
#content p{
    font-size:10pt;
    margin:24px 0 32px 0;
}
.image-slider .images{
    font-size:0;
    white-space:nowrap;
    overflow:hidden;
    width:540px;
}
.image-slider .images img{
    width:540px;
    height:344px;
    padding:0;
    margin:0;
}
.image-slider .controls{
    margin-top:7px;
}
.image-slider .controls .arrow{
    display:inline-block;
    width:13px;
    height:13px;
    color:#fff;
    text-decoration:none;
}
.image-slider .controls .arrow.left{
    background:url('http://s16.postimage.org/9ujlykrsx/arrow_left.png');
    float:left;
}
.image-slider .controls .arrow.right{
    background:url('http://s16.postimage.org/gma11fgsh/arrow_right.png');
    float:right;
}
.image-slider...

JavaScript

/* written relatively quickly, from scratch, specifically for this purpose/design */

var interval = 15, imgWidth = 540, sliding = false;

window.onload = function(){
    var sliders = document.getElementsByClassName('image-slider');
    for(var i = 0; i < sliders.length; i++){
        var noImgs = sliders[i].getElementsByClassName('images')[0].getElementsByTagName('img').length;
        var blobDiv = sliders[i].getElementsByClassName('blobs')[0];
        var selectedImg = sliders[i].getElementsByClassName('images')[0].scrollLeft / imgWidth; // fix for refresh in IE restoring scrollLeft offset to previous
        for(var j = 0; j < noImgs; j++){
            var blob = document.createElement('a');
            blob.href = 'javascript:;';
            blob.setAttribute('onclick','scroll(this)');
            blob.className = 'blob' + (j == selectedImg ? ' selected' : '');
            blobDiv.appendChild(blob);
        }
    }
}


function scroll(elementClicked){
    if(!sliding && elementClicked.className != 'blob selected'){
        var scrollDistance = imgWidth, scrollAmount = 54;
        sliding = true;
        var slider = elementClicked.parentNode.parentNode;
        if(elementClicked.className == 'blob')
            slider = slider.parentNode;
        images = slider.getElementsByClassName('images')[0];
        var blobDiv = slider.getElementsByClassName('blobs')[0];
        var blobs = blobDiv.getElementsByTagName('a');
        var selected = blobDiv.getElementsByClassName('blob selected')[0];
        if(elementClicked.className == 'arrow left'){
            if(images.scrollLeft == 0){
                sliding = false;
                return;
            }
            scrollAmount = (0 - scrollAmount);
            var newBlob = indexOf(blobs,selected) - 1;
            blobs[newBlob].className = 'blob selected';
        }
        else if(elementClicked.className == 'arrow right'){
            var noImgs = images.getElementsByTagName('img').length;
           ...