1 of 29

Web Design

​

Step-by-Step Instructions:

jQuery Color Buttons

Professor Ian Besler

2 of 29

Demo

jQuery Syntax

3 of 29

Demo

jQuery Syntax

4 of 29

Demo

jQuery Syntax

5 of 29

Demo:

6 of 29

Demo: jQuery Syntax

7 of 29

Demo: jQuery Syntax

Let’s make some <button> elements and use jQuery to allow the user to control the background-color: of the website!

8 of 29

Demo: jQuery Syntax

Let’s make some <button> elements and use jQuery to allow the user to control the background-color: of the website!

  1. Let’s make a new index.html �and <link> a CSS stylesheet.css

9 of 29

index.html

Step #01a/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

</head>

​

<body>

</body>

​

</html>

​

​

10 of 29

index.html stylesheet.css

Step #01b/08

@charset "UTF-8";

/*-=-=-=-=-=-=-=-=-=-=-

=-=-=- CSS RESET -=-=-=

-=-=-=-=-=-=-=-=-=-=-*/

​

* {

margin: 0;

padding: 0;

}

11 of 29

Demo: jQuery Syntax

…

  • Let’s make a new index.html �and <link> a CSS stylesheet.css
  • Add some <button> tags to the page �and give them content to communicate their affordance to the user

12 of 29

index.html stylesheet.css

Step #02/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

</head>

​

<body>

<button>Turn the background-color Red!</button>

<button>Turn the background-color Green!</button>

<button>Turn the background-color Blue!</button>

</body>

​

</html>

13 of 29

Demo: jQuery Syntax

  • …
  • Add some <button> tags to the page �and give them content to communicate their affordance to the user
  • Get the jQuery Hosted Library from Google (or any other CDN) and call it in the document <head>

14 of 29

index.html stylesheet.css

Step #03/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<!-- jQuery Hosted Library via Google CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

​

<body>

<button>Turn the background-color Red!</button>

<button>Turn the background-color Green!</button>

<button>Turn the background-color Blue!</button>

</body>

​

</html>

15 of 29

Demo: jQuery Syntax

  • …
  • Get the jQuery Hosted Library from Google (or any other CDN) and call it in the document <head>
  • Declare a pair of <script> tags in the document <head> and run a jQuery .ready() method against the document with an anonymous function()

16 of 29

index.html stylesheet.css

Step #04/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<!-- jQuery Hosted Library via Google CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- My awesome jQuery syntax!!! -->

<script type="text/javascript">

$(document).ready(function(){

});

</script>

</head>

​

<body>

<button>Turn the background-color Red!</button>

<button>Turn the background-color Green!</button>

<button>Turn the background-color Blue!</button>

</body>

​

</html>

17 of 29

Demo: jQuery Syntax

  • …
  • Declare a pair of <script> tags in the document <head> and run a jQuery .ready() method against the document with an anonymous function()
  • Add the id="" attribute to each <button> tag so that we can run functions against them with jQuery

18 of 29

index.html stylesheet.css

Step #05/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<!-- jQuery Hosted Library via Google CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- My awesome jQuery syntax!!! -->

<script type="text/javascript">

$(document).ready(function(){

});

</script>

</head>

​

<body>

<button id="button-red">Turn the background-color Red!</button>

<button id="button-green">Turn the background-color Green!</button>

<button id="button-blue">Turn the background-color Blue!</button>

</body>

​

</html>

19 of 29

Demo: jQuery Syntax

  • …
  • Add the id="" attribute to each <button> tag so that we can run functions against them with jQuery
  • Create .red, .green, and .blue color classes in the CSS stylesheet.css

20 of 29

index.html stylesheet.css

Step #06/08

@chartset "UTF-8";

/*-=-=-=-=-=-=-=-=-=-=-

=-=-=- CSS RESET -=-=-=

-=-=-=-=-=-=-=-=-=-=-*/

​

* {

margin: 0;

padding: 0;

}

​

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

=-=-=- CSS NAMED COLOR CLASSES -=-=-=

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

​

.red {

background-color: red;

}

.green {

background-color: green;

}

.blue {

background-color: blue;

}

21 of 29

Demo: jQuery Syntax

  • …
  • Create .red, .green, and .blue color classes in the CSS stylesheet.css
  • Use the jQuery .addClass() method to change the background-color: of the body when the user clicks one of the <button> elements

22 of 29

index.html stylesheet.css

Step #07/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<!-- jQuery Hosted Library via Google CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- My awesome jQuery syntax!!! -->

<script type="text/javascript">

$(document).ready(function(){

$("button#button-red").click(function(){

$("body").addClass("red");

});

$("button#button-green").click(function(){

$("body").addClass("green");

});

$("button#button-blue").click(function(){

$("body").addClass("blue");

});

});

</script>

</head>

​

<body>

<button id="button-red">Turn the background-color Red!</button>

<button id="button-green">Turn the background-color Green!</button>

<button id="button-blue">Turn the background-color Blue!</button>

</body>

​

</html>

23 of 29

Demo: jQuery Syntax

  • …
  • Use the jQuery .addClass() method to change the background-color: of the body when the user clicks one of the <button> elements
  • Finally, use the jQuery .removeClass() method to prevent the page-build error that we get after triggering .blue

24 of 29

index.html stylesheet.css

Step #08/08

<!DOCTYPE html>

​

<html lang="en-US">

​

<head>

<title>jQuery Syntax</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">

<!-- jQuery Hosted Library via Google CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- My awesome jQuery syntax!!! -->

<script type="text/javascript">

$(document).ready(function(){

$("button#button-red").click(function(){

$("body").addClass("red").removeClass("green" "blue");

});

$("button#button-green").click(function(){

$("body").addClass("green").removeClass("red" "blue");

});

$("button#button-blue").click(function(){

$("body").addClass("blue").removeClass("red" "green");

});

});

</script>

</head>

​

<body>

<button id="button-red">Turn the background-color Red!</button>

<button id="button-green">Turn the background-color Green!</button>

<button id="button-blue">Turn the background-color Blue!</button>

</body>

​

</html>

25 of 29

Demo: jQuery Syntax

Visit the completed demo website here

https://www.how-to-design.org/web-design/demos/demo-09-jquery-background-color-buttons/

26 of 29

Demo: jQuery Syntax

Download complete HTML and CSS files �for this demo here

https://www.how-to-design.org/web-design/demos/demo-09-jquery-background-color-buttons.zip

27 of 29

Demo

jQuery Syntax

28 of 29

Demo

jQuery Syntax

29 of 29

Web Design is an open-source learning resource.

Class material developed by Ian Besler.�

Licensed under a Creative Commons�Attribution-NonCommercial-ShareAlike�4.0 International License.