LESSON 6 & 7 - designing a web SITE PROJECT

LEARNING OUTCOMES

ASPIRE: To be able to inject JavaScript into a website to provide interactivity

CHALLENGE: To be able to design a website in HTML & CSS using set criteria

The managers of the music festival have already designed the website, but they do not know how to code it. Your task is to code the website so that it follows their designs. Each page has been designed below with some very specific requirements.

TASK 1 - CREATING THE FOLDER & FILES

Create a folder called 'Music Festival'.
Create a file inside this folder called style.css, all of your html pages will link to this.
Create the following html files inside the Music Festival folder:

index.html
lineup.html
info.html
tickets.html

TASK 2 - CREATING THE CSS FILE

Inside the CSS File you need to set up the following:

Background colour to #f4cda5
h2 style to a font size, colour and type of your choice, centre aligned
h4 style to a font size, colour and type of your choice
p style to font Verdana, size 20px, colour #3c989e

task 3 - CREATING THE HOME PAGE

You will need to use the following image URL for the logo: http://gdurl.com/DpNL

TASK 4 - CREATING THE LINE UP PAGE

You will need the following information to complete this web page:

List of artists performing:

P!NK
Craig David
Jess Glynne
George Ezra
Jay Z
Ellie Goulding
Stormzy
Second Stage
Rudimental
Sean Paul
Pete Tong
Dizzee Rascal
The Wombats

Use this URL for the bands.png file: http://gdurl.com/dt43

TASK 5 - CREATING THE INfo PAGE

Information to include

Ultra Festival will take place on Thursday, 23rd – Sunday, 26th August at Hyde Park in London.

We welcome all ages to the festival. However, there are entry restrictions for under 16s and we do advise not bringing young children. Anyone 15 and under must be accompanied by a ticket holder over 18 years old at all times. Children under 13 years are admitted free. ID may be required upon entry to the event.

TASK 6 - CREATING THE TICKETS PAGE

Information to include

Tickets for this festival are £125 for the weekend. This includes camping from Friday until Sunday.

EXTENSION: HOW TO BUILD THE TICKET FORM

We can use HTML and CSS to build forms, but to start doing maths, we need to use a language called Javascript. We want the user to be able to select how many tickets they would like to buy and it to work out the total that needs to be paid.

Follow the guide below to create your form. When it's finished, it should look something like this:

CODE TO MAKE A DROPDOWN (SELECT) BOX

<select id="tickets" onchange="calculateTotal()">

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

</select>

You can choose where this code goes. In my example, I have put a heading above it.

CODE TO PERFORM THE CALCULATION

<script>

function calculateTotal() {

    var numberOfTickets = document.getElementById("tickets").value;

    document.getElementById("total").innerHTML = "£" + (numberOfTickets*125);

</script>

This code must go just before the closing body tag (</body>).

CODE TO SHOW THE TOTAL PRICE ON YOUR WEB PAGE

<h3 id="total"></h3>

This is the code that will print the total to your web page, put it in a sensible location!

Report abuse