Cre­ate a colour switcher for bet­ter ac­ces­si­bil­ity

En­able vis­i­tors to chose a colour scheme that best suits their pref­er­ence or ac­ces­si­bil­ity re­quire­ments

Web Designer - - Lightbox -

1. Ini­ti­ate doc­u­ment

The start­ing point is to ini­ti­ate the HTML to de­scrib­ing the doc­u­ment struc­ture. This step de­fines the doc­u­ment con­tainer, along with its child <head> sec­tion. The <head> sec­tion is used to ref­er­ence the ex­ter­nal CSS and Javascript re­sources that are de­fined in later steps. Take note of how the body sec­tion is de­fined in Step 2. <!DOCTYPE html>

<html>

<head>

<ti­tle>colour Switch</ti­tle>

<link rel="stylesheet" type="text/css"/> <script src="code.js"></script>

<script src="code.js"></script>

</head>

*** STEP 2 HERE

</html>

2. Body sec­tion

The body sec­tion is re­spon­si­ble for stor­ing the page con­tent el­e­ments. The colour pal­ette tech­nique also re­lies on the ‘data-pal­ette’ at­tribute ap­plied to the body sec­tion. This step sets the de­fault value of the ‘dat­a­palette’ at­tribute to ‘0’, en­abling CSS to present a de­fault colour scheme in later steps.

<body data-pal­ette="0">

*** STEP 2 HERE

</body>

3. Body con­tent

The page con­tent con­sists of a head­ing and a but­ton. Ad­di­tional con­tent can be added with­out the need to ref­er­ence at­tributes or styles to de­fine their colour. Al­though no spe­cial at­tributes are re­quired for the head­ing, a unique ID is ap­plied to the but­ton in order to en­able Javascript to ap­ply func­tion­al­ity. <h1>colour Me!</h1>

<but­ton id="tog­gle">click me</but­ton>

4. Ini­ti­ate Javascript events

Cre­ate a new file called ‘code.js’. Page con­tent can’t be accessed via Javascript un­til the page has com­pleted load­ing. This prob­lem is solved by defin­ing func­tion­al­ity in­side a func­tion that is trig­gered when the browser win­dow re­ports its load is com­plete. This func­tion searches for the el­e­ment us­ing the ‘tog­gle’ ID, then ap­plies a func­tion to trig­ger for when it is clicked. win­dow. add event lis­tener (" load ", func­tion (){ var but­ton= doc­u­ment. query se­lec­tor ("#tog­gle"); but­ton. add event lis­tener (" click ", func­tion (){

5. Click pro­cess­ing

The code trig­gered from Step 4 needs to cal­cu­late the colour pal­ette to use. This ex­am­ple keeps the fea­ture sim­ple by tog­gling the ‘data-pal­ette’ at­tribute ap­plied to the body sec­tion be­tween ‘0’ and ‘1’. You could choose other logic to in­crease the colour counter or to en­able the user to spec­ify the pal­ette name/num­ber from an in­put el­e­ment. var pal­ette = "0"; if(doc­u­ment.body.getat­tribute("data-pal­ette") == "0"){

pal­ette = "1"; }

6. Pal­ette up­date

Af­ter the pal­ette name/num­ber has been cal­cu­lated from Step 5, the ‘data-pal­ette’ at­tribute as­signed to the doc­u­ment’s ‘body’ sec­tion needs to be up­dated with the new value. The new value can now be used from CSS to de­fine spe­cific pre­sen­ta­tion rules for each pal­ette name/ num­ber gen­er­ated via the Javascript code. doc­u­ment.body.se­tat­tribute("dat­a­palette",pal­ette);

7. CSS colours

Cre­ate a new file called ‘styles.css’. The re­main­ing step is to de­fine the colour com­bi­na­tions for each value that the ‘data-pal­ette’ at­tribute can be set to. At its simplest, back­ground and con­tent colours are de­fined. More ad­vanced rules can be ap­plied by set­ting unique colours for in­di­vid­ual child el­e­ments within the ‘data-pal­ette’ con­tainer. data-pal­ette="0"]{ back­ground: #fff; color: #000; }

[data-pal­ette="1"]{ back­ground: #000; color: #fff; }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.