WEB DEVELOPMENT - LEVEL TWO

STARTER’S KIT
1. WORKING LAPTOP
2. INTERNET
3. EXTENSION BOX
4. MISCELLANEOUS

LEVEL 2 COURSES
- JAVASCRIPT (WFE 108)
- FIREBASE (WBE 106)
- VERSION CONTROL SYSTEM (REMOTE) (WFE 112)

★ Sign in to the school portal to register for courses and check out resources:

edu.sqi.ng/tportal
Rules of the class
1. No Lateness
2. No Distractions (NO PHONES PRESSING)
3. Always ask questions
4. If you don't understand, speak up
5. No Excuses for not attempting assignments
6. Whatever is not taught should not be in your code
7. Sacrifice
8. VIP MODEL - VISIBILITY IMAGE PERFORMANCE

WELCOME TO JAVASCRIPT 😊
Three ways of writing JavaScript
1. Internal Javascript
2. Inline Javascript
3. External Javascript

Output Commands
1. alert()
2. Console.log()

1
Data Types
1. String - An alphabet, a combination of alphabets, or alphanumeric. It is
wrapped around quotes. Input type text also returns a string.

Example: "Samson", 'Samuel', "Ranti1234", ‘2’

2. Number - These are basically the numbers we are already familiar with.
❖ Don’t wrap around quotes
❖ Input type number
❖ 1 , 3, 3.14.
❖ Integer - Whole Numbers e.g 5, 10, 12
❖ Float
❖ Double

3. Boolean
● Don’t wrap around quotes
● True or False

4. Undefined

5. Arrays

6. Objects

The typeof() keyword is used to check what data type a value is

Variables
These are containers for storing data values and can store different types of data
such as strings, numbers, booleans, objects and more. Variables can be declared in
three ways namely var, let and const.

There are however quite a number of rules when declaring variable names.

Rules for variable names

1. There should be no spaces between variable names
2. Naming conventions
● PascalCasing MyAge
● snake_case my_age
● camelCasing myAgeIsKnown
3. Don't start with numbers.

2
 4. They should be descriptive.

Operators in Javascript
+ Addition
- Subtraction
* Multiplication
/ Division
** Raised to the power of
% Modulus - Divide it and returns the remainder
= assignment operator
== Equals to /checks the value only
=== Exactly Equal To //checks the value and the data type
< less than
> greater than
<= less or equals to
>= greater or equals to

It is all about solving problems

Assignment
- The difference between float and double.
- Different applications bought and the amount
they were bought for
- Write an algorithm to calculate
a. area of a triangle
b. area of a square
c. area of a circle
d. area of a Quadrilateral
e. area of a Rhombus
f. area of a Trapezium
g . area of a Parallelogram
h . the body mass index.
-Read up on the VIP Model

3
Concatenation +
prompt() keyword
Any value gotten from the user is a String..
Number()
parseInt()
parseFloat()

Conditional Statements
if(condition){code you want to run}
else{}
Assignment
1. Build a very simple score checker. If score is > 50, then alert pass, else
Alert try again next year.

If, multiple if,else

else if

If
If
If
Else if

Logical Operators

AND Operator && - all conditions must be true, to return true

OR Operator || - one of the conditions must be true to return true
NOT ! - !true - false… !false - true

1. AND && - all of the conditions must be true to return true

true && true - true
true && false - false
false && true - false
false && false - false

2. OR || - Once a condition is true, it returns true

true || true - true

4
 true || false - true
false || true - true
false || false - false

3 NOT ! - Opposite
!true - false
!false - true

Assignements
Bottom-top Approach
Top-Bottom Approach
Aggressive Approach

1. Grading System
0-39 F
myScore is greater 0, but lesser than 40
myScore>=0 && myScore <40
39-44 E
myScore >=39 && myScore <45
45-49 D
50-59 C
60-69 B
70-100 A
Greater than 100INVALID
Lesser than zero INVALID
" " - KINDLY INPUT YOUR SCORE
If the user enters a string - kindly enter a number

2. Program that checks if a number is odd

3. Program that checks if a number is even
A number that is divisible by 2 without a remainder
4. Fizz Buzz.
If the number is divisible by 3 without a remainder - Fizz
If the number is divisible by 5 without a remainder - Buzz

If the number is both divisible by 3 and 5 - Fizz Buzz

5
OUTPUT COMMANDS AND FUNCTIONS -
External Javascript
Alert()
console.log() //

Editable Elements - input,textarea,select and option (value)

Non-Editable Elements - h1,p,b,strong,span,h5,h2,section (innerText,innerHTML)

DRY - Do not repeat yourself

innerHTML
How to get values from the input….
Styling from javascript
Audio Class

LOOPS
2 DEVELOPERS working on a project.

DEV .ADE - 2 seconds (using Loops)

DEV KUNLE - 7 days (without Loops)

FOR LOOP & TEMPLATE LITERALS

for(startingValue,condition,steps(increment/decrement){your code}

The beauty of an infinite loop

Infinite loop is a loop that never stops

ASSIGNMENT
1. Write an algorithm to display these from a range of 0 to 100:
- Odd Number
- Even Number
- Prime Number
- Fizz Buzz:
Divisible by 3 without any remainder - fizz
Divisible by 5 without any remainder - fizz
Divisible by 3 and 5 without any remainder - fizz buzz

6
2. Write out the lyrics of 99 bottles of beer on the wall using a loop
https://99-bottles-of-beer.net/lyrics.html

3. Write an algorithm to calculate factorial

3! = 3*2*1 =6
4! = 4*3*2*1 = 24

4. Write an algorithm to covert bases. For example,

a. convert from base10 to base2
b. Covert from base2 to base10
5. Sum Factorial - 4! 4+3+2+1 = 10

2D LOOPS (2 DIMENSIONAL LOOPS)

Build a robot
Evaluation Table
https://evaltable-js.netlify.app/

https://superiorevatable.netlify.app/

https://superiorevatablev2.netlify.app/

DATA STRUCTURES IN JAVASCRIPT

STRING METHODS
Length property
toUppercase()
toLowerCase()
concat()

Arrays
An array is a special variable, which can hold more than one value.

Arrays - Is just like a shopping cart where you can add multiple items. List
Var myName = “Ade”
Array - List and it is ordered
The numbering of an array is called the index

Array methods
Length property - the amount of items in an array

7
pop() - removes the last element from an array:
shift() - removes the first array element and "shifts" all other elements to a lower
index.
push(item) - adds a new element to an array (at the end)
unshift(item) - adds a new element to an array (at the beginning), and "unshifts"
older elements
splice(startingIndex,numberOfItems,replacingItem)

Assignment
1. Conversion of array to string
2. Practice all the array methods we did today
3. Learn 5 other array methods
4. Learn about string methods in javascript
5. Complete your todo mini/ mini e-commerce

Displaying Items in an array

Parameterized Functions or Functions with parameters

function eatAde(parameters/params){

DRY - DO NOT REPEAT YOURSELF.

ASSIGNMENT
- Complete your todo mini/mini e-commerce
(addTodo,deleteAll,deleteTodo,editTodo,mark as done, show no todo has
been added when there are no todo, change the buttons to icons, make your
interface the finest in the world)
- Calculator
- Read up on Javascript Objects.

JAVASCRIPT OBJECTS

PROPERTIES AND METHODS

PROPERTIES - NATURE,FEATURES, CHARACTERISTICS - WHAT YOU CAN USE TO
OBJECTS ARE UNORDERED
DESCRIBE AN OBJECT

8
KEY:VALUE PAIR
Var table = {
Color : ‘WHITE’,
SHAPE : ‘RECTANGULAR’,
STANDS : 2
}

Var ade = {
Gender:’male’,
favClub:’Chelsea’,
Firstname :’ade’,
Lastname : ‘SQI’,
Walk : function(){},
Code : function(){},

Methods are what the object can do. functions

}
An object is unordered

DOT NOTATION AND THE BRACKET NOTATION

FOR DOT NOTATION OBJECT.KEY

FOR BRACKET NOTATION OBJECT[“KEY’]

ARRAY OF OBEJECTS

ASSIGNMENT
1. DIFFERENCE BETWEEN BRACKET AND DOT NOTATION
2. OBJECT METHODS IN JAVASCRIPT
3. Create a dashboard to display all that have signed up
4. Deploy your todo-mini and send the link to the group

Linking Multiple Pages, JSON, localStorage

Persistent Storage - Database, localStorage

9
localStorage is stored on the browser
localStorage can only save strings
localStorage.setItem(‘key/name’,’value’)
localStorage.getItem(‘key/name’)
JSON - Javascript Object Notation
JSON.stringify()
JSON.parse()

14/02/2023
Math Object, Date Object
Math.round() - Normal Mathematical Approximation
Math.ceil() - Rounds up
Math.floor() - Rounds down
Sign In

15/02/2023
Return Statement / ES6 SYNTAX
Higher Order Functions
ASYNCHRONOUS PROGRAMMING
MVC ARCHITECTURE

Return Statement
● The return statement is used to end the execution of a function
● specify the value to be returned from that function
● When the JavaScript interpreter encounters a return statement, it
immediately exits the function, and any remaining code within the function
is not executed.

Filter
The filter() method is used to create a new array by filtering out elements from an
existing array based on a specified condition.

Find
the find() method is used to search an array for the first element that satisfies a
specific condition. It returns the value of the first element that passes the condition
or undefined if no such element is found. The find() method stops iterating through
the array once the first matching element is found.

10
JAVASCRIPT = ECMASCRIPT = ES

HTML5
CSS3
ES5
2016, ES6

ES6 - LESS CODES, MORE FUNCTIONALITY

HIGHER ORDER FUNCTIONS (HOF) - function that takes in another function as parameter

map((eachItem,index,array)=>{})
Filter method always returns an array
Find returns the item, returns the first item to match the condition

16/02/2023

MVC ARCHITECTURE

MODEL - VIEW- CONTROLLER ARCHITECTURE

70% Thoughts, 30% Coding

USER INTERFACE - VIEW

PAGES - Routes
LOGIC - Functions - Controller
DATA STRUCTURE - Variables and the data types - Model

Case Study #54672 - Bank App

Pages
1. Sign up
2. Sign in
3. Dashboard
4. Transaction history
5. Transfer
6. Pay bills
7. Contact us/FAQs
8. Profile/Settings
9. Cards
10. Loans and investments
Controllers/Functions
1. signUp()

11
 2. signIn()
3. signInWithGoogle()
4. …

CASE STUDY 1 - todo mini

Pages - 1

Logic/Functions/Controllers

addTodo()
editTodo()
deleteTodo()
deleteAllTodo()

Data Structure

Var todo : string “eat beans”

var allTodo : array [
todo
]

Case study 2
Todo pro

Pages - 1

Logic
addTodo()
editTodo()
deleteTodo()
deleteAllTodo()

Data structure
Var todo = {
todoName : string,
todoCategory : string,
todoTime : string
}
Var allTodo [

12
 todo
]

Case Study 3
Todo Pro Max

Pages - 3
Sign up page
Sign in
Dashboard

Logic
signup()
signin()
addTodo()
editTodo()
deleteTodo()
deleteAllTodo()

dataStructure
Var user : {
Firstname : string,
Lastname : string,
Email : string,
Password : string,
profilePic : string,
allTodo : [ ]
}

allUsers[0].allTodo.push(todo)
Var allUsers : [
user
]

Var todo {
todoName :string,
todoCategory : string,
todoTime : string,
userIndex : string
}
Var allTodo [

13
 todo
]

Case study 4 : Fin Tech App

Pages
Signup page
Sign in Page
Dashboard
Transfer Page
Pay Bills
Profile
History

Logic
signup()
signin()
transfer()
recharge()
resetpin()

Data structure
Var user = {
Firstname: string,
Lastname : string,
Middlename : string,
phoneNumber : string/number,
Address : string,
Dob : string,
Nextofkin: string
Bvn : string,
Pin:
Password:
Balance : number
acctNumber
transactionHistory : [
{
transactionNumber:
Amount:
Date:
Time

14
 Receiver’s account:
}
]
}

20/02/2023
ASYNCHRONOUS PROGRAMMING
❖ Code does not wait for each operation to complete before moving on.
❖ Initiates tasks or operations and continues with the next line of code without
blocking.
❖ Allows other tasks to proceed without waiting for a specific operation to
complete.
❖ Utilizes mechanisms such as callbacks, promises, or async/await to handle
completion of operations.

SYNCHRONOUS PROGRAMMING
❖ Code is executed sequentially, one line at a time.
❖ Each line of code must be completed before the next line is executed.
❖ Synchronous code blocks the execution until the current operation is
finished.
❖ Follows a straightforward control flow, making it easier to read and reason
about.
API - APPLICATION PROGRAMMING INTERFACE
An API is a messenger that enables different software applications to communicate
and share information by following a set of rules. It simplifies the process of integrating
different systems, services, and functionalities, making it easier for developers to create
powerful and interconnected software.
Think of it as a menu in a restaurant. The menu lists the available dishes and their
descriptions, and you can order from the menu by telling the waiter what you want. The
waiter acts as the API, taking your order, communicating it to the kitchen, and bringing
back the food to you.
Similarly, an API defines the available services and data that an application can
request from another application. It specifies how the requests should be made and how
the responses will be structured. It acts as a bridge between applications, allowing them to
work together even if they are built using different technologies.

https://jsonplaceholder.typicode.com/user
https://api.github.com/users

Tools for fetching from an API

fetch()
Axios

15
Ajax
React-query
SWR

JSON - JAVASCRIPT OBJECT NOTATION - A FORMAT

URL - Uniform Resource Locator

Endpoint

100 - informational
200 - success
300 - redirection
400 - user error
500 - server error

WEATHER APP API

API SITE

https://openweathermap.org/
API DOC

https://openweathermap.org/current
SEARCH BY CITY NAME

https://openweathermap.org/current#name
UNIT OF MEASUREMENT

https://openweathermap.org/current#data
APP REFERENCE

https://weatherappchecker.netlify.app/

LINK TO PLENTY APIs for practice

16
https://github.com/public-apis/public-apis
https://github.com/n0shake/Public-APIs

Music api

https://musica-api.up.railway.app/new //to fetchnew songs

https://musica-api.up.railway.app/popular //to fetch popular songs
https://musica-api.up.railway.app/playlist // to fetch the playlists

REGEX (Regular Expression) is language independent

regex101.com

bat
cat
mat
fat
rat
sat

Regular expression is simply just a form of pattern for ;

Uses of REGEX
* Find
* Find and Replace
* Form Validation

How to write Regex

/ /
By default, case-sensitive
* Flags (ig)
g - global flag
i - case insensitive
* Character Set [ ] - sees everything inside it as a single character
* Range of Characters [a-p]
Meta Characters
* \d [0-9] every didit

17
 * \w [A-Za-z0-9_] every digit and word
* \s
* {} range
Special Characters in Regex

* ^$ indicates start and end of a string

* . Matches every character except for newline
* + Range, min 1, max - unlimited
* ? Range min 0, max - 1 //Optional
* * Range min 0 , max - unlimited

Write a regular expresion for an email address

seyi_dami13@gmail.com

seyidami13@

23/02/23

Event Keyword, Event listeners and handlers

Event Listeners
An event is simply an occurrence, happening.

Mouse events & Key Events

Mouse Events - onclick,ondblclick,onmouseover,

Key Events - oninput, onkeydown,onkeyup,onkeypress

onchange
onload
onblur

Event Keyword

path
target

ASSIGNMENT
Try to create a mini-game (Tic-tac-toe)

18
step 1 - create the boxes
step 2 - click on the tiles and trigger a function
step 3 - display x on all the boxes
step 4 - switch between x and o
step 5 - ensure once they have clicked on a tile, it does not trigger the function again
step 6 - find out which condition makes them win…

DOM,
OOP,
CHART JS

OOP - OBJECT ORIENTED PROGRAMMING

PROCEDURAL APPROACH
OBJECT ORIENTED PROGRAMMING

4 PILLARS OF OOP
1. ABSTRACTION
2. POLYMORPHISM
3. INHERITANCE
4. ENCAPSULATION

Class - a blueprint used to create objects.

Constructor - it will construct, create
This keyword - In a class, this refers to the class itself

ASSIGNMENT - Create a Football Lineup with OOP. User will be able to enter player’s name,
player’s number and player’s position. User will click on button called create player, and a
player object will be created and displayed using OOP.

DOM - DOCUMENT OBJECT MODEL

DOM TREE - A STRUCTURE THAT DEFINES YOU HTML DOCUMENT
Document is a javascript object
DOM is how you change HTML Elements - create, edit, remove
DOM MANIPULATION
PROPERTIES - innerText,innerHTML
METHODS -
getElementById,querySelector,getElementsByClassName,getElementsByTagName,getElem
entsByName
EVENTS - addEventListener

19
HTML CANVAS
W3 SCHOOOLS CANAVAS REFERENCE
https://www.w3schools.com/graphics/canvas_reference.asp

ASSIGNMENT - BUILD A GAME, USING HTML CANVAS

20