Week 1 Demo - Business Web Technologies

Different files for structure (HTML), presentation (CSS), and behaviour (Javascript).

by Vimla Ramdoo

HTML

<!-- HTML defines the structure-->

<div id='content'>
    <div id='employee'>
        <p id='name'></p>
        <img id='picture' />
    </div>
    <!-- close employee -->
    <button onclick='nextPicture()'>Click me</button>
</div>
<!-- close content -->

CSS

/* CSS defines the presentation */

body {
    background-color: green;
    background-image: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg');
    padding: 5px;
    margin: 10px;
}

#content {
    display: block;
    background-color: black;
    color: white;
    width: 330px;
    padding: 5px;
}

#employee {
    background-color: blue;
    width: 300px;
    height: 175px;
    padding: 5px;
    margin: 10px;
}

#name {
    float: right;
}
#picture {
    float: left;
}

JavaScript

// Javascript defines the behaviour

// Location of images
var url = 'http://oasisapps.curtin.edu.au/staff/profile/local/images/profile/';

// List of people with images
var people = ["P.T.Dell", "John.Venable", "B.Vonkonsky", "C.Armstrong"];
var index = 0;

// Update the HTML with the next picture 
function nextPicture() {
    var employeeName = people[index].replace(/\./g, " ");
    document.getElementById('name').innerHTML = employeeName;
    document.getElementById('picture').src = url + people[index];
    index = (index + 1) % people.length;
}