/*
For CSS comment
*/
CSS(Cascading style sheets) – changes the appearance of the element in the website
Use this syntax for linking
<link rel="stylesheet" href="style.css">
Measuring In CSS:
Px(pixels)
Em(1em is equivalent to 16px)
%(percentange)
CSS Property: CSS value;
CSS Property: CSS Value; Notes
Background: Red or rgb;
Color: Red or rgb; Color of the text
Font-weight: Bold; Make the text bold
Font-size: 15px; Size of the text
Cursor: Pointer;
Border-color: Blue or rgb; Color of the border
Border-style: Solid; Style of the border, play with it
Border-width: 5px; Width of the border, play with it
Border-radius: 200px; The higher the pix the more
round it get
Border: None; Border ng box model
Width: 150px or 100%; Lapad niya
Height: 30px or 100%; Height eto ng pictures
Margin-right: 3px; Margin in css is space, space in
right
Padding-right: 10px inside the box model right,left,
top,bottom
Transition: Property 0-1s; What property do u want to
Ex: opacity 1s; transition and measure it by sec.
Background-color 1s; Transition the background
Opacity 1s, color 1s; Can also transition 2 property
Don’t put it to pseudo-class it
might mess up the style
Vertical-align: Top; Top,bottom. Align all the
elements without compromising
the text position
All for text
Font-family: Ariel;
Font-size: 20px;
Font-weight: Bold; 700px =bold
500px= medium
400px = regular
Font-style: Italic;
Text-align: Center;
Line-height: 30px; Spacing between lines in the
text
Html entities Use this for checkmark,
middle dot, greater than etc
Editing Images
Width: 250px; Use width on picture container
and use 100% on width
picture(separate it through div)
Height: 250px;
Object-fit: Cover, contain, fit; Cover- this does the image to
cover the 250px width and
250px height.
Contain- contain the image in
the width and height.
Fit- fit the image in the width
and height.
Object-position: Left, right; This let you adjust the image
Compute hex to rgb color
The BOX Model
Use the box model padding rather than height and
The box model composes of 3 property margin, border and padding.
The padding(left-top-bottom-right) represent the space between the text in the box
The border is the border-with property it showcases the thickness thinness of the width
Margin(left-right-top-bottom) is the space between elements
CSS specificity – it means that in CSS the browser follows a certain syntax and its priority the selector that
has more specific. Class name is more priority rather than element.
Text Element – they exist inside the line of text and modify part of the text
Use margin and span to use multiple spaces in a paragraph
<strong>
bold
</strong>
<u>
underline
</u>
<span>
Modify specific part of the text without affecting the whole text
</span>
This are all void element, it means that there’s no need for closing tag
<link rel=”stylesheet” href=”button.css”>
<input type=”checkbox”>
Type=”checkbox” gives you checkbox
Type=”text” it gives you textbox
Placeholder=”showtext”
Using google link as font
Get the <link> and put it in head section on html structure
Nested Layouts Technique
Vertical layout takes all the space block
Horizontal layout takes inblock space and can be nested
In selecting property use this syntax ::
Example: div-container::searchBox
--------------------------------------------------------------------------------------------------------------------------------------------
HTML Structure – in every program on html there should be this code, this will provide
additional features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3 Basic Type of Block Element
1. Block Element
Takes the whole entire line
2. Inline-block Element
Takes up space only what its needed
3. Inline Element
Appears only inside a text like <strong></strong>
This is the syntax rules for Link Element:
<a href=”the link of the webpage” target=”_blank”>
to create a hyperlink use this element
</a>
<a href=" https://www.youtube.com/"
target="_blank"
title="link to the article page">
Click Here</a>
<h1>head</h1>
<hr> a horizontal lane
<h2>head</h2>
<br>line break
<p>paragraph</p>
</body>
</html>
In creating hyperlink on images you need <a> tag
<div class="item" style="--position: 1">
<a href="https://www.linkedin.com/feed/" target="_blank">
<img src="Images/pexels1.jpg" alt="">
</a>
</div>
For audio input use this syntax
<audio controls loop src=” ”></audio>
<audio controls loop src="Audio/Kendrick-Lamar-Not-Like-
Us-Drake-Diss-(JustNaija.com).mp3"></audio>
For video input
<video control loop mute src=” ” width= “500px”>
Iframes used to embed content from another website
Commonly used for ads and abused by hacking techniques
Syntax is <iframe src=” ”>
--------------------------------------------------------------------------------------------------------------------------------------------
./JavaScript comment is // and
JavaScript
Console.log() – whatever is input on the bracket will display back at the display on the website, this is within
JavaScript
<script>
alert('WELCOME!')
console.log(2+2);
console.log( 'khurt' + 'cath' );
</script>
Making a variable hold value the syntax is:
<body>
<script>
const variable = 'hello';
console.log(variable);
let khurt = 10;
console.log(khurt);
console.log(khurt + 2 + variable);
let results = 100;
console.log(results + khurt +
variable);
console.log(typeof khurt)
</script>
</body>
Can’t use let as but we can use let1 or let 2 since let has value already on js
Can’t start using number like 1let or 2let but we can use it in the middle and last
Can’t use special character but there are two exception which is _ and $ like _khurt/ $khurt
There are 3ways to name a variable
var - this variable is for
let - this variable can be change
const - this variable cannot be change( this used default as variable)
typeof +variables – this can be defined as to check the variables
TIPS
Naming convention:
1. camelCase cartQuantity-add the two words and capitalize the 2nd
first letter of the words
2. PascalCase CartQuantity-add the two words and both are capitalized
3. kebab-case cart-quantity- this use for html and css
Project Calculator:
<body>
<p>
<button onclick="console.log(calculation +='7')">7</button>
<button onclick="console.log(calculation +='8')">8</button>
<button onclick="console.log(calculation +='9')">9</button>
</p>
<p>
<button onclick="console.log(calculation +='4')">4</button>
<button onclick="console.log(calculation +='5')">5</button>
<button onclick="console.log(calculation +='6')">6</button>
</p>
<p>
<button onclick="console.log(calculation +='1')">1</button>
<button onclick="console.log(calculation +='2')">2</button>
<button onclick="console.log(calculation +='3')">3</button>
<button onclick="console.log(calculation +='0')">0</button>
</p>
<p>
<button onclick="console.log(calculation += ' + ')"
>+</button>
<button onclick="console.log(calculation += ' - ')">-
</button>
<button onclick="console.log(calculation += ' /
')">/</button>
<button onclick="console.log(calculation += ' *
')">*</button>
<button onclick="console.log(calculation =
eval(calculation))">=</button>
<button onclick="console.log(calculation =
'')">Clear</button>
</p>
</body>
<script>
let calculation = ''
</script>
--------------------------------------------------------------------------------------------------------------------------------------------
Boolean values and If statements
True/false and if then statements – Boolean is pretty straightforward actually and easy to understand as long as you
are familiarizing the comparison values.
Comparison Values
> greater than
< less than
>= greater than or equal to
<= less than or equal to
=== equal to
!==not qual to
Logical Operators:
&& this called AND operator, what it does is it check if its both side is true and false
|| this called OR operator, it checks if one side is true: if there is true it will display true
! this called NOT operator, the way it does is it flip the value more like saying IS NOT TRUE will result to
false vise versa.
Syntax for if else:
If () {} else {}
if ( 19 < 18) {console.log('age')}
else{console.log('underage')}
This the right way to read this: if 19 <(less than) 18 then print (age) or else print (underage)
This is another way to write the code:
if (money > totalcost) {console.log('paid')}
else if (money < totalcost) {console.log('Get the
dishes')}
Project ROCK-PAPER-SCISSOR
<button onclick="
const khurt1 = Math.random();
let computerMove = '';
if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}
else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}
console.log(computerMove);
let results = '';
if(computerMove === 'ROCK'){results = 'ITS A TIE.'}
else if(computerMove === 'SCISSOR'){results = 'YOU LOSE.'}
else if (computerMove === 'PAPER'){results = 'YOU WIN!.'}
alert(`YOU PICKED ROCK. Computer picked ${computerMove}. $
{results}`);
">ROCK</button>
<button onclick="
const khurt1 = Math.random();
let computerMove = '';
if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}
else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}
console.log(computerMove);
let results = '';
if(computerMove === 'ROCK'){results = 'ITS A TIE.'}
else if(computerMove === 'SCISSOR'){results = 'YOU LOSE.'}
else if (computerMove === 'PAPER'){results = 'YOU WIN!.'}
alert(`YOU PICKED PAPER. Computer picked ${computerMove}. $
{results}`);">PAPER</button>
<button onclick="
const khurt1 = Math.random();
let computerMove = '';
if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}
else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}
console.log(computerMove);
let results = '';
if(computerMove === 'ROCK'){results = 'ITS A TIE.'}
else if(computerMove === 'SCISSOR'){results = 'YOU LOSE.'}
else if (computerMove === 'PAPER'){results = 'YOU WIN!.'}
alert(`YOU PICKED SCISSOR. Computer picked ${computerMove}.$
{results}`);
">SCISSOR</button>
Now in this project we learn how to use algorithm the code is Math.random();
Variable that are within {} are only used inside of the curly bracket
Truthy and falsy values
how do we know the values of truthy and falsy? In JavaScript
False, 0 , ’’(empty string) ,Nan(not a number), undefined and null are all falsy while the rest is
truthy
if (5){console.log('truthy');}
How do we use it for?
We use it for shortcut, you see if the valuable is truthy it will display the console.log()
let ithasitems = 10
if (ithasitems)
{console.log('inventory has items');}
--------------------------------------------------------------------------------------------------------------------------------------------
FUNCTIONS
Why do we use functions?
Functions let us reuse codes
Syntax rule for functions
Same as variables we cannot use special characters, best practice is to use camelCase
Below is the syntax code: function ____()
{console.log();
console.log();}
return ‘’; this is body function
function function1(){
console.log('Hello');
console.log(2+2);}
return 'rock';}
function1();
another is it let value return to the initial statement;
function pickComputerMove()
{const khurt1 = Math.random();
if (khurt1 >=0 && khurt1 < 1/3 ){computerMove = 'ROCK';}
else if (khurt1 >= 1/3 && khurt1 < 2/3){computerMove = 'PAPER';}
else if (khurt1 >= 2/3 && khurt1 < 1) {computerMove = 'SCISSOR';}
return '5';}
Parameters is like a variable it let you put the value; it can be done multiple times:
The rules in creating:
no use of special words like functions
cannot be use special characters except $ and _
cannot start with a number
parameters is only exist within the parameters scope
<script>
function khurt1(parameter1, parameter2){
console.log(parameter1+ parameter1);
}
khurt1(100,100);
khurt1(500);
</script>
--------------------------------------------------------------------------------------------------------------------------------------------
OBJECTS let you customize and line up the values, one more thing you can display specifically what you want and
let it change it.
The syntax rule is
can be added multiple values that is inside the curly bracket
comma is to separate the value
let product = {
name: 'khurt',
lastname: 'Baculi'
};
console.log(product);
console.log(product.lastname);
product.lastname = 'doctor';
console.log(product.lastname);
Adding and deleting value
product.age = '22';
console.log(product);
delete product.middleName;
console.log(product);
Why we use OBJECTS?
Make it as organizer
Can be use multiple values and let us use it
We can also access the value using bracket notation, this way it let us pick the value with the math symbol on it;
Can be used in values too and or by adding empty string ’’
‘Delivery-time’: ‘1 day’
console.log(product[‘delivery-time’])
NESTED OBJECTS
const wholeName = {
name: 'khurt',
age: '22',
'delivery-time': '1day',
gender: {
gays: '0',
male: '1',
female: '20'}
};
console.log(wholeName)
console.log(wholeName['delivery-time']);
We can also use function on objects just like this
const wholeName = {
name: 'khurt',
age: '22',
'delivery-time': '1day',
gender: {
gays: '0',
male: '1',
female: '20'},
fun: function process(){
console.log('function that is inside the object');}
};
console.log(wholeName)
console.log(wholeName['delivery-time']);
wholeName.fun();
Build-in Objects
JSON(Javascript Object Notation)
-similar to javascript objects
So why do we use JSON syntax?
-because it is universal, it is not limited to javascript only
-must be use double quotes
-JSON does not support functions
console.log(JSON.stringify(wholeName));
//this let us change javascript object to universal by JSON
const jsonstring = JSON.stringify(wholeName);
console.log(JSON.stringify(wholeName));
//this let us change javascript object to universal by JSON
console.log(JSON.parse(jsonstring));
//we can let it change to javascript object by making it as
variable and displaying it
localStorage
-let you store but only it works on string, tip: use JSON.stringify to use it
localStorage.setItem('score', JSON.stringify(score));
//THIS SAVE INTO THE LOCALSTORAGE
console.log(localStorage.getItem('score'));
//THIS LET US INTO DISPLAY ON IT AND TURNING IT ON STRING BY USING JSON
JSON.parse(localStorage.getItem('score'))
//STRING THEN TURN INTO OBJECT BACK
--------------------------------------------------------------------------------------------------------------------------------------------
DOCUMENT OBJECT MODEL (DOM)
-DOM is the way to javascript to have fully control
document.body.innerHTML = 'khurt';
document.title = 'Goodevening';
console.log(document.body);
the DOM combines JavaScript and html together, it gives JavaScript control on the webpage
-when a html element is inside the JavaScript it is converted into JavaScript object
This syntax tell us what should we get from the body
document.querySelector('button');
the problem with this is that querySelector only select the first html element
the solution is that add class attribute, this will serve as label that can be selected
<button onclick="
subscribe();
"class="js-subscribe-button"
>Subscribe</button>
Will select the class
document.querySelector('.js-subscribe-button');
always use js- in class attribute
we can use the dom to select the html and make it as variable that can be console.log just like this
<button class="js-button">hello</button>
const buttonHello = document.querySelector('.js-button');
console.log(buttonHello);
this is called void element
<input>
Coercion
So remember whenever we get a value from the DOM it becomes a string so if we want to do math with
it, it needs to be converted to number. The syntax is Number();
let cost = Number(inputElement.value);
clicks, keydowns are known as events
and onclick,onkeydown are known as event listeners
onkeydown="console.log('typing')">
<button onkeydown="console.log(event)"
class="js-submit"
>Submit</button>
The syntax is Onkeydown = “console.log(event)”
This let us see information in the event
<button onkeydown="console.log(event.type)"
class="js-submit"
>Submit</button>
onkeydown – pressdown a key
onkeyup – release a key
we have two eventlister this are (event and callback);
the syntax for input is
<input>
If you want to put placeholder the syntax is <input placeholder”name”>
The placeholder is the name you see without the input
If we want to display input element, we need to use the property of .value and make it variable
const nameInput = document.querySelector('.js-name');
console.log(nameInput.value);}
the .value property let us get the content of the input
--------------------------------------------------------------------------------------------------------------------------------------------
ARRAYS AND LOOPS
Array is basically a list of values that represents
Array is a special type of object
Always start counting on 0-1-2-3-4……
Syntax is
<script>
const MyArray = [10, 20, 30, 40, 50];
console.log(MyArray); This syntax lets you show all the array
console.log(MyArray[4]); This syntax let you pick what you want to show in the console
</script>
Console:
Array.isArray([]) a code to specifically check if it’s an array
Method
.length- tells you how many are there in a array
.push()- this adds a value to the end of the array.
.splice()-it has two value the first one is the index the number position of the array and the 2 nd value is the you want
to remove from the array.
