w3.css

13COMP

programming

layout

P5 mini skills project

database

html & W3.CSS

why use them?

To make developing the index.html page quicker/easier and make the page responsive, it makes sense to use html and w3.css (for styling).

aim

The aim is to display a good looking landing page which a user can possibly:

Enter their name.
Click to see instructions.
And click ENTER to move onto the game page.

final mock up of interface

13COMP Programming w3.css v9.mp4

concept

An easy way to achieve this is to incorporate within the ONE index.html file both the:

landing page
AND the game page

Then selectively display one page or the other.

So the index.html page should have TWO high level <div>s, the:

Landing page <div>.
Game page <div>.

To ensure the user only can see the landing page until they click ENTER:

The landing page <div> is set to display: block; in the index.html (which is the default).
The game page <div> is set to display: none; in the style.css.
When the user clicks the ENTER button, control passes to the function specified by the button’s onclick=”??”.
This function hides the landing page and displays the game page using JavaScript commands setting the:
- - The landing page <div> to display: none;
  - The game page <div> to display: block;

Below, is what the index.html page would look like if you could print it out on paper to see all the components.

Note: background colours set to differentiate between landing & game divs:

purple = landingPage <div>
brown = gamePage <div>

1. Initial view displays ONLY the landing page (display: block;)

2. On CLICKing the landing page's ENTER button:

the landing page s hidden (display: none;)
and the game page is displayed (display: block;)

building the interface via w3.css

the key is to doing this in stages, one small alteration at a time....

VERSION 1

create a skeleton webpage using w3.css

output

Note:

You can see both the landing and the game page as they have display setting of block (the default).
You can also see the default P5 canvas (the light grey square) as setup & draw are still run.
I enclosed both the landing and game pages with their own <section> which will help you locate a page in a long index.html

style.css

index.html

sketch.js

VERSION 2

make landing & game pages full height

output

Note:

having made the landing page full screen height, the default P5 canvas is now displayed off the bottom of the screen.

index.html

index.html notes:

add a unique html id to both the landing and game page sections.

style.css

sketch.js

no change

style.css notes:

the index html id you added to both the landing & game page <section> require entries in style.css.
so add two entries, setting the display and height values.
see the image to the left.

See: CSS height

VERSION 3

make default P5 canvas not visible

output

index.html

no change

style.css

no change

sketch.js

VERSION 4

divide pages into 1/3 and 2/3, plus leave a margin at the bottom of the pages

NOTE: See w3.css color names for "named" colours

output

Looking at the height of divs:

if I want a margin at the bottom of my landing & game pages, then the height of the divs must add up to LESS than 100%.

In my example:

- header will occupy 15%
- main part of the page will occupy 82%
- leaving 3% for margin at the bottom of landing and game pages.

index.html

w3.css provides responsive classes to easily divide the screen by adding a responsive width to your index.html divs.

I.E: adding w3-third to a div means it will always be 1/3 width of the screen.

Below shows what can be achieved with w3.css responsive classes. They are listed in the following table.

EXAMPLE of using w3.css responsive classes

styel.css

Add styling to match the new additions to inde.html.

EG add class:

H15 defining height as 15% of visible screen height.
H82 defining height as 82% of visible screen height.

See: CSS height

sketch.js

no change

VERSION 5

add ENTER button to landing page, which when CLICKed will hide the landing page & display the game page WITH a P5 canvas in the CORRECT POSITION

output

12COMP Prog w3.css v5 output.mp4

index.html

1. Add an ENTER button and optionally an instruction button.

2. Each button will call a JavaScript function via onclick.

3. See the following video tutorial on buttons for help.

12COMP Prog w3.css v5 buttons.mp4

style.css

no change

sketch.js

create the P5 canvas on top of a div

12COMP Prog w3.css v5 createCanvas.mp4

create the P5 canvas on top of a div part 2.

when the div you want to place your P5 canvas on is set to NOT display at the start.....

12COMP Prog w3.css v5 createCanvas part 2.mp4

sketch.js

1. Add a function which is called when the ENTER button is CLICKed. See the video tutorial on buttons above.

2. The ENTER function will:

Set the display setting for the landing page to none
AND the display setting for the game page to block.

See: setting display

3. Get information on the place holder div to hold the P5 canvas.

See: width & height see: position left AND see: position top

4. create the P5 canvas with the height & width of the place holder div

5. set the P5 canvas' parent to be the place holder div

See: set P5 canvas' parent

VERSION 6

add START button and scoring paragraphs to the game page

output

index.html

1. Add START button.

2. Add scoring paragraphs.

Note:

all html elements you want to alter in your JavaScript code, need a unique id.

In the example to the left, you will want to alter the hits paragraph every time the user scores, so it WILL need an id

EG:

style.css

no change

sketch.js

Add a function which is called when START button is CLICKed.

For now the function does nothing; we will work on that in the next version.

VERSION 7

make game page START button toggle its function between a START and a STOP button

output

12COMP Prog w3.css v7 START STOP output.mp4

index.html

no change

style.css

no change

sketch.js

1. Add code to alter the time paragraph.

Example to alter time paragraph with an id of gp_pTime with the new time:

gp_pTime.textContent="time: " + count + " secs";

See the links below for further info.

2. Add code to alter button's text and background colour:

Example to alter button with an id of gp_btnStart to say STOP on a red background:

gp_btnStart.style.backgroundColor = 'red';

gp_btnStart.textContent = 'STOP';

See: get information on an html element with a specific id value

See: set an attribute of an html element with a specific id value

Different ways to modify the DOM

document.getElementById("gp_pTime").innerHTM="?"
gp_pTime.textContent="?"
var elment = document.getElementById("gp_pTime");

elment.textContent = "?";

var elment = document.getElementById("gp_pTime");

document.getElementById(element).innerHTM="?"

See stackoverflow for more information.

Pros &cons

the id ("gp_pTime") can be replaced by a variable

the id ("gp_pTime') can't be replaced by a variable

the id ("gp_pTime") can be replaced by a variable

VERSION 8

add a landing page image AND bouncing balls when game page START button CLICKed

output

12COMP Prog w3.css v8 output.mp4

index.html

add your image to the 2/3 (two thirds) container

style.css

no change

sketch.js

1. Add your bouncing ball code.

2. Activate the bouncing balls from the START button function.

VERSION 9

add re sizing of P5 canvas

output

13COMP Programming w3.css v9.mp4

index.html

no change

style.css

no change

sketch.js

Add resizeCanvas function to resize canvas when user alters the window size. P5.js reference on canvas resize

Note: the resizeCanvas function will need to determine the size & position of the "canvas place holder" div, which is the same code you used to determine size & position for createCanvas

Page updated

Report abuse