Technology Empowerment Team

Form 3 ~ 6 Potential Course

2023-2024

Floor 4 - Computer Room

Mr. Peter

Outline

Connect to the server

Development and practice

1.1.

Click Counter

1.2.

Hero

Server

https://EngNameSurname.srleng.com

https://ArielMak.srleng.com

https://ChloeLam.srleng.com

https://EllaLi.srleng.com

https://EmmaAo.srleng.com

https://EuniceHo.srleng.com

https://KerrynLam.srleng.com

https://PeterChan.srleng.com

https://QiannahCheang.srleng.com

https://SophieLam.srleng.com

https://SophieSou.srleng.com

10.

https://VenusChim.srleng.com

11.

https://WinkyWang.srleng.com

12.

https://YoyoChan.srleng.com

13.

https://ZetaIong.srleng.com

14.

How to connect to the server

Click Controller - Part 1

Part 1 - Tasks:

Before Coding

Ex12 - Click Controller

Create a folder called "Ex12"

Create a file called "index.html" under the "Ex12" folder

Develop the layout

HTML structure

Create a <div> element

Tab

The content of the div is "Click Me!"

Tab

Create <style> within <head> element

Center every elements in <body> element horizontally and vertically

Tab

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-size: 70px;
}

Visit Google Font website and find a beautiful font you like

Select the font

How?

Copy the code from the Google Font website

How?

Import the font into your website by pasting the code within head element

Copy the code from google font

Use * to represent every elements that need to apply the font

How?

Import jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Tab

Create <script> element

JavaScript Programming

Declare a variable called "count"

Create a function called "whenClicked()"

Add a click event listener into <body> element

Update the count variable if clicked

Display the counting number

let ________ = 1;

function ________() {
	
}

$(________).click(________);

______ = ______ + 1;

$(______).text(______);

Part 1 - Tasks:

Before Coding

Ex12 - Click Controller

Create a folder called "Ex12"

Create a file called "index.html" under the "Ex12" folder

Develop the layout

HTML structure

Create a <div> element

Tab

The content of the div is "Click Me!"

Tab

Create <style> within <head> element

Center every elements in <body> element horizontally and vertically

Tab

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-size: 70px;
}

Visit Google Font website and find a beautiful font you like

Select the font

How?

Copy the code from the Google Font website

Import the font into your website by pasting the code within head element

Copy the code from google font

Use * to represent every elements that need to apply the font

Import jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Tab

Create <script> element

JavaScript Programming

Declare a variable called "count"

Create a function called "whenClicked()"

Add a click event listener into <body> element

Update the count variable if clicked

Display the counting number

let ________ = 1;

function ________() {
	
}

$(________).click(________);

______ = ______ + 1;

$(______).text(______);

How?

Part 1 - Tasks:

Before Coding

Ex12 - Click Controller

Create a folder called "Ex12"

Create a file called "index.html" under the "Ex12" folder

Develop the layout

HTML structure

Create a <div> element

Tab

The content of the div is "Click Me!"

Tab

Create <style> within <head> element

Center every elements in <body> element horizontally and vertically

Tab

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

Visit Google Font website and find a beautiful font you like

Select the font

How?

Copy the code from the Google Font website

Import the font into your website by pasting the code within head element

Copy the code from google font

Use * to represent every elements that need to apply the font

Import jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Tab

Create <script> element

JavaScript Programming

Declare a variable called "count"

Create a function called "whenClicked()"

Add a click event listener into <body> element

Update the count variable if clicked

Display the counting number

let ________ = 1;

function ________() {
	
}

$(________).click(________);

______ = ______ + 1;

$(______).text(______);

How?

Part 1 - Tasks:

Before Coding

Ex12 - Click Controller

Create a folder called "Ex12"

Create a file called "index.html" under the "Ex12" folder

Develop the layout

HTML structure

Create a <div> element

Tab

The content of the div is "Click Me!"

Tab

Create <style> within <head> element

Center every elements in <body> element horizontally and vertically

Tab

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

Visit Google Font website and find a beautiful font you like

Select the font

How?

Copy the code from the Google Font website

Import the font into your website by pasting the code within head element

Copy the code from google font

Use * to represent every elements that need to apply the font

Import jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Tab

Create <script> element

JavaScript Programming

Declare a variable called "count"

Create a function called "whenClicked()"

Add a click event listener into <body> element

Update the count variable if clicked

Display the counting number

let ________ = 1;

function ________() {
	
}

$(________).click(________);

______ = ______ + 1;

$(______).text(______);

How?

Click Controller - Part 2

Part 2 - Tasks:

If number is greater than 10, reset it to be zero

Ex12 - Click Controller

if statement in JavaScript

if (________) {
	________ = 0;
}

Click Controller - Part 3

Part 3 - Tasks:

Create a variable to store the status of increasing or decreasing

Ex12 - Click Controller

if statement in JavaScript

let _________ = true;

Reverse the status of the variable if the number is greater than 10 or less than 0

if (________) {
	________ = 0;
}

if (________) {
	________;
}

if else statement in JavaScript

Update the counting based on the status of the variable

if (________) {
	________ = 0;
}

if (________) {
	________ = ________ + 1;
} else {
	________ = ________ - 1;
}

Click Controller - Part 4

Part 4 - Tasks:

Check if the remainder of divided by 2 is 0, then change color to be blue. otherwise, change to be red.

Ex12 - Click Controller

if else statement in JavaScript

if (________) {
	________ = 0;
}

if ( ________ % 2 == 0 ) {
	$(______).css( 'color', _______ );
} else {
	$(______).css( 'color', _______ );
}

A color picker website searched from Google

Hero - Part 1

Click the screen and play by pressing arrow keys

Part 1 - Tasks:

Create a folder called "Ex13"

Ex13 - Hero

Create a file called "index.html" under the "Ex13" folder

Copy everything from the previous exercise and delete meaningless codes

Create <div> within body and assign a class called "hero"

Tab

Create <style> element

Tab

Define the body style within <style>

body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
}

Define the div style within <style>

div {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #4763ff;
  top: 100px;
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Import jQuery

Create <script>

Tab

Add keydown event listener into <body> element

10.

$('body').keydown(______);

Create a function called whenKeyDown() and received a argument called event

11.

function whenKeyDown( event ) {

}

Get which key is pressing down

12.

event.which

Check if up arrow key is pressing

13.

if (e.which == 38) {

}

Create two variable called x and y to determine the hero position

14.

If up arrow key is pressing, then change the y variable

15.

if (e.which == 38) {
	y = y - 50;
}

Update the y position of the div using y variable

16.

$('div').css( 'top', y + 'px' );

Repeat it to finish four direction movement

17.

Part 1 - Tasks:

Create a folder called "Ex13"

Ex13 - Hero

Create a file called "index.html" under the "Ex13" folder

Copy everything from the previous exercise and delete meaningless codes

Create <div> within body and assign a class called "hero"

Tab

Create <style> element

Tab

Define the body style within <style>

body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
}

Define the div style within <style>

div {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #4763ff;
  top: 100px;
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Import jQuery

Create <script>

Tab

Add keydown event listener into <body> element

10.

$('body').keydown(______);

Create a function called whenKeyDown() and received a argument called event

11.

function whenKeyDown( event ) {

}

Get which key is pressing down

12.

event.which

Check if up arrow key is pressing

13.

if (e.which == 38) {

}

Create two variable called x and y to determine the hero position

14.

If up arrow key is pressing, then change the y variable

15.

if (e.which == 38) {
	y = y - 50;
}

Update the y position of the div using y variable

16.

$('div').css( 'top', y + 'px' );

Repeat it to finish four direction movement

17.

Part 1 - Tasks:

Create a folder called "Ex13"

Ex13 - Hero

Create a file called "index.html" under the "Ex13" folder

Copy everything from the previous exercise and delete meaningless codes

Create <div> within body and assign a class called "hero"

Tab

Create <style> element

Tab

Define the body style within <style>

body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
}

Define the div style within <style>

div {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #4763ff;
  top: 100px;
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Import jQuery

Create <script>

Tab

Add keydown event listener into <body> element

10.

$('body').keydown(______);

Create a function called whenKeyDown() and received a argument called event

11.

function whenKeyDown( event ) {

}

Get which key is pressing down

12.

event.which

Check if up arrow key is pressing

13.

if (e.which == 38) {

}

Create two variable called x and y to determine the hero position

14.

If up arrow key is pressing, then change the y variable

15.

if (e.which == 38) {
	y = y - 50;
}

Update the y position of the div using y variable

16.

$('div').css( 'top', y + 'px' );

Repeat it to finish four direction movement

17.

Hero - Part 2

Click the screen and play by pressing arrow keys

Part 2 - Tasks:

Get the <body> size

Ex13 - Hero

let screenWidth = $('body').width();
let screenHeight = $('body').height();

If the hero move out of the screen, reset the position to opposite direction

if ( x < 0 ) {
	x = screenWidth - 30;
}

Finish the four edges situation using if statement

Hero - Part 3

Click the screen and play by pressing arrow keys

Part 3 - Tasks:

Create a <div> element and assign a class called "food"

Ex13 - Hero

Setup the style of the food

div.food {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #ff295b;
  top: 300px;
  left: 600px;
}

Check if x and y of the hero is equal to the food position, then hide the food

$('.food').hide();

if (________) {
  if (________) {
  	
  }
}

Hero - Part 4

Click the screen and play by pressing arrow keys

Part 4 - Tasks:

Create two variables food_x and food_y to determine the food position

Ex13 - Hero

Update the food position randomly if it was eaten

let food_x = 600;
let food_y = 300;

food_x = 50 * Math.round(Math.random() * 10);
food_y = 50 * Math.round(Math.random() * 10);

$('.food').css( 'top', food_y + 'px' );
$('.food').css( 'left', food_x + 'px' );

Hero - Part 5

Technology Empowerment Team - Web development

By Mr Peter

Technology Empowerment Team - Web development

Form 3 ~ 6 Potential Course

2023-2024

Mr. Peter

Technology Empowerment Team - Web development

More from Mr Peter