├── Map
├── main.css
├── ex3.js
├── main.html
├── ex2.js
└── main.js
├── Arrays
├── Main.css
├── Main.html
└── Main.js
├── Promises
├── main.css
├── main.html
└── main.js
├── Super
├── main.css
├── main.html
└── main.js
├── Switches
├── style.css
├── main.html
└── main.js
├── classes
├── main.css
├── main.html
└── main.js
├── const
├── style.css
├── main.html
└── main.js
├── forEach
├── main.css
├── main.html
├── main2.js
└── main.js
├── reduce
├── main.css
├── main.html
├── main.js
└── main2.js
├── static
├── main.css
├── main.html
├── ex2.js
└── main.js
├── ES6 Module
├── main.css
├── MathUtil.js
├── main.html
└── main.js
├── If Statements
├── style.css
├── Main.html
├── main.js
└── demonstration.js
├── Inheritance
├── main.css
├── main.html
└── main.js
├── JSON FILES
├── main.css
├── names.json
├── name.json
├── main.html
├── fetch.js
├── people.json
├── parse.js
└── stringify.js
├── StringMethods
├── main.css
├── main.html
└── main.js
├── Var vs let
├── main.css
├── main.html
└── main.js
├── Variables
├── style.css
├── main.html
└── main.js
├── arrayForEach
├── main.cs
├── main.html
└── main.js
├── async
└── await
│ ├── main.css
│ ├── main.html
│ └── main.js
├── callback hell
├── main.css
├── main.html
└── main.js
├── destructuring
├── main.css
├── main.html
└── main.js
├── nestedObjects
├── main.css
├── main.html
└── main.js
├── Accept User Input
├── Style.css
├── Main.html
└── Main.js
├── ElementSelector
├── main.css
├── main.html
└── main.js
├── NumberGuessingGame
├── Main.css
├── Main.html
└── Main.js
├── Template literals
├── main.css
├── Main.html
└── main.js
├── Ternary Operator
├── style.css
├── Main.html
└── main.js
├── Type Conversion
├── style.css
├── Main.html
└── Main.js
├── asynchronus code
├── main.css
├── main.html
└── main.js
├── format Currency
├── main.css
├── main.html
└── main.js
├── getters and setters
├── main.css
├── main.html
└── main.js
├── Arithmetic Operators
├── style.css
├── Main.html
└── Main.js
├── Loop through an array
├── Main.css
├── Main.html
└── Main.js
├── Temperature conversion program
├── Main.css
├── Main.html
└── Main.js
├── README.md
├── images
├── dice1.png
├── dice2.png
├── dice3.png
├── dice4.png
├── dice5.png
└── dice6.png
├── hide
└── show html
│ ├── main.css
│ ├── gomen.png
│ ├── main.html
│ └── main.js
├── imageSlider
├── gomen.png
├── myID-1.png
├── myID-2.png
├── main.html
├── main.css
└── main.js
├── add and change element
├── main.css
├── main.html
├── main.js
└── ex1.js
├── DigitalClockProgram
├── ranyel.png
├── main.html
├── main.js
└── main.css
├── arrowFunction
├── main2.js
├── main.html
├── main.js
└── main3.js
├── CheckedProperty
├── style.css
├── Main.html
└── main.js
├── setTimeout
├── ex2.js
├── ex3.js
├── main.js
└── main.html
├── NodeLists
├── main.css
├── main.html
└── main.js
├── RandomPasswordGenerator
├── main.css
├── main.html
└── main.js
├── Random Number Generator
├── style.css
├── Main.html
├── Main1.js
└── random.js
├── Sort an array of things
├── Main.js
└── Main.html
├── fetch data from an API
├── main.css
├── main2.js
├── main.html
└── main.js
├── keyEvents
├── main.css
├── main.html
└── main.js
├── dates
├── main.html
└── main.js
├── filter
├── ex2.js
├── main.html
├── ex3.js
└── main.js
├── 2d Arrays
├── main.html
└── main.js
├── Constructor
├── main.html
└── main.js
├── DOM
├── main.html
└── main.js
├── MouseEvent
├── main.css
├── main.html
└── main.js
├── closures
├── main.html
├── ex2.js
└── main.js
├── sorting
├── main.html
├── main2.js
└── main.js
├── Math
├── main.html
└── main.js
├── arrayOfObjects
├── main.html
└── main.js
├── error
├── main.html
├── ex2.js
└── main.js
├── shuffle an array
├── main.html
└── main.js
├── JavascriptObjects
├── main.html
└── main.js
├── Spread Operator
├── main.html
└── main.js
├── functionExpression
├── main.html
└── main.js
├── rest parameters
├── main.html
└── main.js
├── this
├── main.html
└── main.js
├── callbacks
├── main.html
└── main.js
├── ClassList
├── main.html
├── main.css
└── main.js
├── Counter Program
├── style.css
├── main.html
└── main.js
├── DiceRollerProgram
├── main.js
├── main.html
└── main.css
├── calculator
├── main.js
├── main.html
└── main.css
├── Dom Navigation
├── main.html
└── main.js
├── stopWatchProgram
├── main.html
├── main.css
└── main.js
├── Rock
└── Paper
│ └── Scissors
│ ├── main.css
│ ├── main.html
│ └── main.js
└── Weather App Project
├── main.html
├── main.css
└── main.js
/Map/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Arrays/Main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Promises/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Super/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Switches/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/classes/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/const/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/forEach/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/reduce/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ES6 Module/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/If Statements/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Inheritance/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/JSON FILES/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/StringMethods/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Var vs let/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Variables/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/arrayForEach/main.cs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/async/await/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/callback hell/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/destructuring/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/nestedObjects/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Accept User Input/Style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/ElementSelector/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/NumberGuessingGame/Main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Template literals/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Ternary Operator/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Type Conversion/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/asynchronus code/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/format Currency/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/getters and setters/main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Arithmetic Operators/style.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Loop through an array/Main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Temperature conversion program/Main.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/JSON FILES/names.json:
--------------------------------------------------------------------------------
1 | ["joey","jake","jason","james"]
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavascriptCourse2
2 | # refinement of my javascript fundamentals
3 |
--------------------------------------------------------------------------------
/images/dice1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/images/dice1.png
--------------------------------------------------------------------------------
/images/dice2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/images/dice2.png
--------------------------------------------------------------------------------
/images/dice3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/images/dice3.png
--------------------------------------------------------------------------------
/images/dice4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/images/dice4.png
--------------------------------------------------------------------------------
/images/dice5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/images/dice5.png
--------------------------------------------------------------------------------
/images/dice6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/images/dice6.png
--------------------------------------------------------------------------------
/hide/show html/main.css:
--------------------------------------------------------------------------------
1 | #myButton{
2 | font-size: 2rem;
3 | margin: 10px;
4 |
5 | }
6 |
7 |
--------------------------------------------------------------------------------
/imageSlider/gomen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/imageSlider/gomen.png
--------------------------------------------------------------------------------
/add and change element/main.css:
--------------------------------------------------------------------------------
1 | .box{
2 | border: 3px solid;
3 | width: 100%;
4 | height: 125px;
5 | }
--------------------------------------------------------------------------------
/hide/show html/gomen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/hide/show html/gomen.png
--------------------------------------------------------------------------------
/imageSlider/myID-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/imageSlider/myID-1.png
--------------------------------------------------------------------------------
/imageSlider/myID-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/imageSlider/myID-2.png
--------------------------------------------------------------------------------
/DigitalClockProgram/ranyel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoeyCollado/JavascriptCourse2/HEAD/DigitalClockProgram/ranyel.png
--------------------------------------------------------------------------------
/JSON FILES/name.json:
--------------------------------------------------------------------------------
1 | {
2 | "name":"joey",
3 | "age": 19,
4 | "isEmployed": true,
5 | "hobbies": ["boxing","gym","gaming"]
6 | }
--------------------------------------------------------------------------------
/arrowFunction/main2.js:
--------------------------------------------------------------------------------
1 | // ---------- EXAMPLE 2 ----------
2 | setTimeout(() => {console.log("Hello");
3 | console.log("Goodbye");}, 3000);
--------------------------------------------------------------------------------
/CheckedProperty/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: verdana;
3 | font-size: 2em;
4 | }
5 | #mySubmit{
6 | font-size: 1em;
7 | }
--------------------------------------------------------------------------------
/setTimeout/ex2.js:
--------------------------------------------------------------------------------
1 | // clearTimeout() = can cancel a timeout before it triggers
2 |
3 | const timeoutId = setTimeout(() => window.alert("Hello"), 3000);
4 |
5 | clearTimeout(timeoutId);
--------------------------------------------------------------------------------
/NodeLists/main.css:
--------------------------------------------------------------------------------
1 | .myButton{
2 | font-size: 4rem;
3 | margin: 10px;
4 | border: none;
5 | border-radius: 5px;
6 | padding: 10px 15px;
7 | background-color: lightblue;
8 | color: white;
9 | }
--------------------------------------------------------------------------------
/RandomPasswordGenerator/main.css:
--------------------------------------------------------------------------------
1 | h1{
2 | text-align: center;
3 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
4 | font-weight: bold;
5 | font-size: 52px;
6 | color: red;
7 | padding-top: 190px;
8 | }
--------------------------------------------------------------------------------
/Random Number Generator/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: Verdana;
3 | text-align: center;
4 |
5 | }
6 | #myButton{
7 | font-size: 3em;
8 | padding: 5px 25px;
9 | border-radius: 5px;
10 | }
11 | .myLabels{
12 | font-size: 3em;
13 | }
--------------------------------------------------------------------------------
/Sort an array of things/Main.js:
--------------------------------------------------------------------------------
1 | //
2 | let fruits = ["banana", "apple", "orange", "mango"];
3 |
4 | //fruits = fruits.sort(); //sort array in alphabetical order
5 | fruits = fruits.reverse(); //sort array in reverse alphabetical order
6 |
7 | for(let fruit of fruits){
8 | console.log(fruit);
9 | }
--------------------------------------------------------------------------------
/fetch data from an API/main.css:
--------------------------------------------------------------------------------
1 | #myButton{
2 | font-size: 30px;
3 |
4 | }
5 |
6 | #pokemonName{
7 | font-size: 30px;
8 | text-align: center;
9 | margin: 10px 15px;
10 | position: relative;
11 | }
12 |
13 | #pokemonSprite{
14 | min-width: 150px;
15 |
16 | }
--------------------------------------------------------------------------------
/keyEvents/main.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | }
4 | #myBox{
5 | background-color: lightblue;
6 | width: 200px;
7 | height: 200px;
8 | font-size: 7.5rem;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | position: relative;
13 | }
--------------------------------------------------------------------------------
/dates/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/filter/ex2.js:
--------------------------------------------------------------------------------
1 | let ages = [16,17,18,19,20,65];
2 | let adults = ages.filter(isAdult);
3 | let children = ages.filter(isChild);
4 |
5 | console.log(children);
6 |
7 | function isAdult(element){
8 | return element >= 18;
9 | }
10 |
11 | function isChild(element){
12 | return element < 18;
13 | }
--------------------------------------------------------------------------------
/filter/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/2d Arrays/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Constructor/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/DOM/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/MouseEvent/main.css:
--------------------------------------------------------------------------------
1 | #myBox{
2 | background-color: lightgreen;
3 | width: 300px;
4 | height: 300px;
5 | font-size: 4.1rem;
6 | font-weight: bold;
7 | display: flex;
8 | align-items: center;
9 | text-align: center;
10 | }
11 |
12 | #myButton{
13 | font-size: 3rem;
14 | }
--------------------------------------------------------------------------------
/closures/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/sorting/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Math/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/arrayOfObjects/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/arrowFunction/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/error/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/shuffle an array/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/JavascriptObjects/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Spread Operator/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/functionExpression/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/rest parameters/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/this/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/Sort an array of things/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/asynchronus code/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/Map/ex3.js:
--------------------------------------------------------------------------------
1 | // ------------ EXAMPLE 3 ------------
2 | const dates = ["2024-1-10", "2025-2-20", "2026-3-30"];
3 | const formattedDates = dates.map(formatDates);
4 |
5 | console.log(formattedDates);
6 |
7 | function formatDates(element){
8 | const parts = element.split("-");
9 | return `${parts[1]}/${parts[2]}/${parts[0]}`;
10 | }
--------------------------------------------------------------------------------
/Super/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Map/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/reduce/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/static/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/ES6 Module/MathUtil.js:
--------------------------------------------------------------------------------
1 | export const pi = 3.14;
2 |
3 | export function getCircumference(radius){ //function to get circumference
4 | return 2 * pi * radius;
5 |
6 | }
7 |
8 | export function getArea(radius){
9 | return pi * radius * radius;
10 |
11 | }
12 |
13 | export function getVolume(radius){
14 | return 4 * pi * radius * radius;
15 | }
--------------------------------------------------------------------------------
/Inheritance/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Switches/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Var vs let/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/const/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/JSON FILES/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Ternary Operator/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/arrayForEach/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/callbacks/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/destructuring/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/forEach/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/format Currency/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/nestedObjects/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/sorting/main2.js:
--------------------------------------------------------------------------------
1 | const people = [{name: "joey", age: 19, gpa: 1.0},
2 | {name: "jake", age: 133, gpa: 2.0},
3 | {name: "james", age: 119, gpa: 4.0},
4 | {name: "john", age: 139, gpa: 5.0}];
5 |
6 |
7 | people.sort((a,b) => a.gpa - b.gpa); //sorting using properties of an object
8 |
9 |
10 | console.log(people)
--------------------------------------------------------------------------------
/Arrays/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Loop through an array/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Promises/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Type Conversion/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/callback hell/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/classes/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/getters and setters/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/StringMethods/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Arithmetic Operators/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Math/main.js:
--------------------------------------------------------------------------------
1 | let x = 3.14
2 |
3 | let y = 5
4 | let z = 9
5 | let maxinum;
6 | let minimum;
7 |
8 | x = Math.round(x);
9 | x = Math.floor(x);
10 | x = Math.ceil(x);
11 | x = Math.pow(x, 2) //x to the power of 2
12 | x = Math.sqrt(x);
13 | x = Math.abs(x)
14 |
15 | maxinum = Math.max(x,y,z)
16 | maxinum = Math.min(x,y,z)
17 |
18 | x = Math.PI;
19 |
20 | console.log(maxinum)
--------------------------------------------------------------------------------
/JSON FILES/fetch.js:
--------------------------------------------------------------------------------
1 | //fetch("name.json")
2 | // .then(response => response.json())
3 | // .then(value => console.log(value))
4 |
5 | fetch("people.json")
6 | .then(response => response.json())
7 | .then(values => values.forEach(value => console.log(value.isEmployed))) //iterate through array of objects in jsonfile
8 | .catch(error => console.log(error)); //catch error
--------------------------------------------------------------------------------
/async/await/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/setTimeout/ex3.js:
--------------------------------------------------------------------------------
1 | let timeoutId;
2 |
3 | function showAlert() {
4 | window.alert("Hello");
5 | }
6 |
7 | function startTimer() { //start the timer
8 | timeoutId = setTimeout(showAlert, 3000);
9 | console.log("STARTED");
10 | }
11 |
12 | function clearTime() { //clear the timeout
13 | clearTimeout(timeoutId);
14 | console.log("CLEARED");
15 | }
--------------------------------------------------------------------------------
/closures/ex2.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | function createCounter(){
4 |
5 |
6 | let count = 0;
7 |
8 | function increment(){
9 | count ++;
10 | console.log(`the counter increases to ${count}`);
11 | }
12 |
13 | return {increment}; //return function increment
14 | }
15 |
16 | const counter = createCounter(); //invoking the outer function
17 |
18 | counter.increment();
--------------------------------------------------------------------------------
/reduce/main.js:
--------------------------------------------------------------------------------
1 | // .reduce() = reduce the elements of an array
2 | // to a single value
3 | //
4 |
5 | // ----------- EXAMPLE 1 -----------
6 | const prices = [5, 30, 10, 25, 15, 20];
7 | const total = prices.reduce(sum);
8 |
9 | console.log(`$${total.toFixed(2)}`); //toFixed add two decimals
10 |
11 | function sum(accumulator, element){
12 | return accumulator + element;
13 | }
--------------------------------------------------------------------------------
/setTimeout/main.js:
--------------------------------------------------------------------------------
1 | // setTimeout() = function in JavaScript that allows you to schedule
2 | // the execution of a function after an amount of time
3 | // Times are approximate
4 | // setTimeout(callback, delay);
5 |
6 | function sayHello(){
7 | window.alert("Hello");
8 | }
9 |
10 | setTimeout(sayHello, 3000);
--------------------------------------------------------------------------------
/ES6 Module/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/keyEvents/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 | box
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Template literals/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/Map/ex2.js:
--------------------------------------------------------------------------------
1 | //example 2
2 | const students = ["Spongebob", "Patrick", "Squidward", "Sandy"];
3 | const studentsUpper = students.map(upperCase);
4 | const studentsLower = students.map(lowerCase);
5 |
6 | console.log(studentsLower);
7 |
8 | function upperCase(element){
9 | return element.toUpperCase();
10 | }
11 |
12 | function lowerCase(element){
13 | return element.toLowerCase();
14 | }
15 |
16 |
--------------------------------------------------------------------------------
/filter/ex3.js:
--------------------------------------------------------------------------------
1 | const words = ['apple', 'orange', 'kiwi', 'banana', 'pomegranate', 'coconut',];
2 | const longWords = words.filter(getLongWords);
3 | const shortWords = words.filter(getShortWords);
4 |
5 | console.log(shortWords);
6 |
7 | function getShortWords(element){
8 | return element.length <= 6;
9 | }
10 |
11 | function getLongWords(element){
12 | return element.length > 6;
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/JSON FILES/people.json:
--------------------------------------------------------------------------------
1 |
2 |
3 | [{
4 | "name":"joey",
5 | "age": 19,
6 | "isEmployed": true
7 |
8 | },
9 | {
10 | "name":"jake",
11 | "age": 29,
12 | "isEmployed": true
13 |
14 | },
15 | {
16 | "name":"james",
17 | "age": 39,
18 | "isEmployed": false
19 |
20 | },
21 | {
22 | "name":"john",
23 | "age": 49,
24 | "isEmployed": false
25 |
26 | }]
27 |
28 |
--------------------------------------------------------------------------------
/setTimeout/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/ClassList/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Variables/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/RandomPasswordGenerator/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 | Inspect and check console to see the program output
13 |
14 |
15 |
--------------------------------------------------------------------------------
/reduce/main2.js:
--------------------------------------------------------------------------------
1 | // ----------- EXAMPLE 2 -----------
2 | const scores = [75, 50, 90, 80, 65, 95];
3 | const maximum = scores.reduce(getMax);
4 | const minimum = scores.reduce(getMin);
5 |
6 | console.log(maximum);
7 | console.log(minimum);
8 |
9 | function getMax(accumulator, element){
10 | return Math.max(accumulator, element);
11 | }
12 |
13 | function getMin(accumulator, element){
14 | return Math.min(accumulator, element);
15 | }
--------------------------------------------------------------------------------
/sorting/main.js:
--------------------------------------------------------------------------------
1 | // sort() = method used to sort elements of an array in place
2 | // sorts elements as strings in lexicographic order, not alphabetical
3 | // lexicographic = (alphabet + numbers + symbols) as strings
4 |
5 | let numbers = [10,1,3,2,4,5,6,7,8,9,11];
6 |
7 | //numbers.sort(); //lexicograpgic order
8 | numbers.sort((a, b) => a - b); //natural order
9 | //numbers.sort((a, b) => b - a); //reverse order
10 |
11 | console.log(numbers)
--------------------------------------------------------------------------------
/DigitalClockProgram/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/filter/main.js:
--------------------------------------------------------------------------------
1 | // .filter() = creates a new array by filtering out elements
2 | // out elements
3 |
4 | let numbers = [1, 2, 3, 4, 5, 6, 7];
5 | let evenNums = numbers.filter(isEven);
6 | let oddNums = numbers.filter(isOdd);
7 |
8 | console.log(oddNums);
9 |
10 | function isEven(element){
11 | return element % 2 === 0; //equal to , using modulus
12 | }
13 |
14 | function isOdd(element){
15 | return element % 2 !== 0; //not equal to 0, using modulus
16 | }
--------------------------------------------------------------------------------
/hide/show html/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | 
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/Map/main.js:
--------------------------------------------------------------------------------
1 | // .map() accepts a callback and applies that function
2 | // to each element of an array, then returns a new array
3 |
4 | // ------------ EXAMPLE 1 ------------
5 | const numbers = [1, 2, 3, 4, 5];
6 | const squared = numbers.map(square);
7 | const cubed = numbers.map(cube);
8 |
9 | console.log(cubed);
10 |
11 | function square(element){
12 | return Math.pow(element, 2);
13 | }
14 |
15 | function cube(element){
16 | return Math.pow(element, 3);
17 | }
--------------------------------------------------------------------------------
/arrowFunction/main.js:
--------------------------------------------------------------------------------
1 | // arrow functions = a concise way to write function expressions
2 | // good for simple functions that you use only once
3 | // formula = (parameters) => some code
4 |
5 | //example 1 parameter code
6 | const hello = (name, age) => {console.log(`Hello ${name}`)
7 | console.log(`You are ${age} years old`)};
8 |
9 | hello("Bro", 25); //invoking the function
10 | // passing argument as parameters
--------------------------------------------------------------------------------
/shuffle an array/main.js:
--------------------------------------------------------------------------------
1 | //Fisher-Yates algorithm
2 |
3 | const cards = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];
4 |
5 | //invoking function
6 | shuffle(cards);
7 |
8 | console.log(cards);
9 |
10 | //function declaration
11 | function shuffle(array){
12 | for(let i = array.length - 1; i > 0; i--){
13 | const random = Math.floor(Math.random() * (i + 1));
14 |
15 | //destructuring
16 | [array[i], array[random]] = [array[random], array[i]];
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/MouseEvent/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Click Me
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/ClassList/main.css:
--------------------------------------------------------------------------------
1 | #myButton{
2 | font-size: 4rem;
3 | margin: 10px;
4 | border: none;
5 | border-radius: 5px;
6 | padding: 10px 15px;
7 |
8 | }
9 |
10 | .enabled{ /*css class*/
11 | background-color: lightblue;
12 | color: white;
13 | }
14 |
15 | .hover{ /*css class*/
16 | box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.2);
17 | font-weight: bold;
18 | }
19 | .disabled{ /*css class*/
20 | background-color: hsl(0, 0%, 60%);
21 | color: hsl(0, 0%, 80%);
22 | }
--------------------------------------------------------------------------------
/Counter Program/style.css:
--------------------------------------------------------------------------------
1 | #countLabel{
2 | display: block;
3 | text-align: center;
4 | font-size: 10em;
5 | font-family: Helvetica;
6 | }
7 | #BtnContainer{
8 | text-align: center;
9 |
10 | }
11 | .buttons{
12 | padding: 10px 20px;
13 | font-size: 1.5em;
14 | color: white;
15 | background-color: rgb(59, 49, 126);
16 | border-radius: 5px;
17 | cursor: pointer;
18 | transition: background-color 0.25s;
19 | }
20 | .buttons:hover{
21 | background-color: rgb(32, 24, 85);;
22 | }
--------------------------------------------------------------------------------
/fetch data from an API/main2.js:
--------------------------------------------------------------------------------
1 | //using fetch
2 |
3 | /*
4 | fetch("https://pokeapi.co/api/v2/pokemon/pikachu")
5 | .then(response => response.json()) //converting response to json
6 | .then(data => {
7 |
8 | if(!response.ok){ //if the response does not access the ok property
9 | throw new Error("Could not fetch resource")
10 | }
11 | return response.json(); //otherwise return object in a json format
12 | })
13 | .catch(error => console.error(error)); //catch error
14 | */
--------------------------------------------------------------------------------
/If Statements/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Type Conversion/Main.js:
--------------------------------------------------------------------------------
1 | // type conversion = change the datatype of a value to another
2 | // (Strings, Numbers, Booleans)
3 |
4 | //let age = window.prompt("how old are u?");
5 | //age = Number(age) //convert any data type to number
6 | //age+=1;
7 |
8 | //console.log(age);
9 |
10 | // 2nd example
11 | let x = "0";
12 | let y = "0";
13 | let z = "0";
14 |
15 | x = Number(x);
16 | y = String(y);
17 | z = Boolean(z);
18 |
19 | console.log(x, typeof x);
20 | console.log(y, typeof y);
21 | console.log(z, typeof z);
--------------------------------------------------------------------------------
/callbacks/main.js:
--------------------------------------------------------------------------------
1 | // callback = function pass as an argument to another function
2 | // it ensures a function is not going to run before a task is completed
3 |
4 | let total = sum(2, 3);
5 | displayDOM(total); //displays the total result to the console
6 |
7 | function sum(x, y){
8 | let result = x + y;
9 | return result
10 | }
11 |
12 | function displayConsole(output){
13 | console.log(output);
14 | }
15 | function displayDOM(output){
16 | document.getElementById("myLabel").innerHTML = output;
17 |
18 | }
--------------------------------------------------------------------------------
/Accept User Input/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 | Welcome
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/arrowFunction/main3.js:
--------------------------------------------------------------------------------
1 | // ---------- EXAMPLE 3 ----------
2 | const numbers = [1, 2, 3, 4, 5, 6]; //declaring an array
3 |
4 | //using arrow functions
5 |
6 | const squares = numbers.map((element) => Math.pow(element, 2));
7 | const cubes = numbers.map((element) => Math.pow(element, 3));
8 | const evenNums = numbers.filter((element) => element % 2 === 0);
9 | const oddNums = numbers.filter((element) => element % 2 !== 0);
10 | const total = numbers.reduce((accumulator, element) => accumulator + element);
11 |
12 | console.log(total);
--------------------------------------------------------------------------------
/NumberGuessingGame/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 | Number Guessing Game
11 | Pick a # between 1 - 10
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/NodeLists/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Random Number Generator/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Loop through an array/Main.js:
--------------------------------------------------------------------------------
1 | //
2 |
3 | let prices = [5,10,15,20];
4 |
5 | //how to loop through an array
6 |
7 | //1st is to use standard for loop
8 | /*
9 | for(let i = 0; i < prices.length; i+=1){
10 | console.log(prices[i]);
11 | }
12 | */
13 | //if you want to iterate backward
14 | /*
15 | for(let i = prices.length -1; i >=0 ; i-=1){
16 | console.log(prices[i]);
17 | }
18 | */
19 |
20 | //2nd option is for upstatement
21 | /*
22 | for(let i of prices){
23 | console.log(i)
24 | }
25 | */
26 | //good practice
27 | for(let price of prices){ //to make it more descriptive and readable
28 | console.log(price)
29 | }
--------------------------------------------------------------------------------
/this/main.js:
--------------------------------------------------------------------------------
1 | // this = reference to the object where THIS is used
2 | // (the object depends on the immediate context)
3 |
4 | const person1 = {
5 | name: "Spongebob",
6 | favFood: "hamburgers",
7 | sayHello: function(){console.log(`Hi! I am ${this.favFood}`)},
8 | eat: function(){console.log(`${this.name} is eating ${this.favFood}`)}
9 | }
10 | const person2 = {
11 | name: "Patrick",
12 | favFood: "pizza",
13 | sayHello: function(){console.log(`Hi! I am ${this.favFood}`)},
14 | eat: function(){console.log(`${this.name} is eating ${this.favFood}`)}
15 | }
16 |
17 | person1.eat();
18 | person2.eat();
--------------------------------------------------------------------------------
/const/main.js:
--------------------------------------------------------------------------------
1 | //const = a variable that can't be changed, adds security to the code
2 |
3 | //program that calculates the circumference of a circle
4 |
5 | // declaring our variables
6 | const pi = 3.14159; // will no longer be changed even when re assigning the variable
7 | let radius;
8 | let circumference;
9 | //
10 |
11 | radius = window.prompt("enter the radius of the circle"); //shows the window prompt on the web
12 | radius = Number(radius) //convert the radius into a number
13 |
14 | circumference = 2 * pi * radius; //the formula of circumference
15 | // 2 * 3.14159 * radius
16 |
17 | console.log("the circumference is:", circumference);
--------------------------------------------------------------------------------
/Counter Program/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/DiceRollerProgram/main.js:
--------------------------------------------------------------------------------
1 | //
2 | function rollDice(){
3 |
4 | const numofDice = document.getElementById("numofDice").value;
5 | const diceResult = document.getElementById("diceResult");
6 | const diceImages = document.getElementById("diceImages");
7 |
8 | const values = [];
9 | const images = [];
10 |
11 | for(let i = 0; i < numofDice; i++){
12 | const value = Math.floor(Math.random() * 6) + 1;
13 | values.push(value);
14 | images.push(`
`)
15 | }
16 |
17 | diceResult.textContent = `dice: ${values.join(', ')}`
18 | diceImages.innerHTML = images.join('');
19 | }
--------------------------------------------------------------------------------
/Var vs let/main.js:
--------------------------------------------------------------------------------
1 | // variable scope = where variable is accesible
2 |
3 | // let = variables are limited to block scope{}
4 | // var = variables are limited to a function (){}
5 |
6 | // global variable = is declared outside any function
7 | // (if global, var will CHANGE browser's window properties)
8 |
9 | let name = "joey"; //global variable since its declared outside of any function
10 |
11 | // var
12 | /*
13 | doSomething();
14 |
15 | function doSomething(){
16 | for(var i = 1; i <= 3; i+=1){ //var
17 | console.log(i);
18 | }
19 | }
20 | */
21 |
22 | //let
23 | /*
24 | for(let i = 1; i <= 3; i+=1){ //let
25 | console.log(i);
26 | }
27 | */
28 |
29 |
--------------------------------------------------------------------------------
/DiceRollerProgram/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
Dice Roller
14 |
15 |
16 |
17 |
18 |
19 |
13 |
14 | ![Pokemon Sprite]()
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/DiceRollerProgram/main.css:
--------------------------------------------------------------------------------
1 | #container{
2 | font-family: sans-serif;
3 | text-align: center;
4 | font-size: 2rem;
5 | font-weight: bold;
6 | }
7 | button{
8 | font-size: 1.5rem;
9 | padding: 10px 15px;
10 | border-radius: 10px;
11 | border: none;
12 | background-color: blue;
13 | color: white;
14 | cursor: pointer;
15 | }
16 | button:hover{
17 | background-color: cyan;
18 | }
19 | button:active{
20 | background-color: chartreuse;
21 | }
22 | input{
23 | font-size: 2rem;
24 | width: 150px;
25 | text-align: center;
26 | font-weight: bold;
27 | }
28 | #diceResult{
29 | margin: 25px;
30 | }
31 | #diceImages img{
32 | width: 150px;
33 | margin: 5px;
34 | }
--------------------------------------------------------------------------------
/NumberGuessingGame/Main.js:
--------------------------------------------------------------------------------
1 | const answer = Math.floor(Math.random() * 10 + 1) //the answer is generated between 1 - 10
2 | let guesses = 0;
3 |
4 | document.getElementById("submitButton").onclick = function(){
5 |
6 | let guess = document.getElementById("guessField").value //get the value from the textbox
7 | guesses+=1; //increment guesses by 1
8 |
9 | if(guess == answer){ //if guess is equal to the answer shows an alert message
10 | alert(`${answer} is the #. It took you ${guesses} guesses`);
11 | }
12 | else if(guess < answer){ // if guess is less than this shows
13 | alert(`Too Small!`);
14 | }
15 | else{
16 | alert(`Too Large!`) // if guess is greater this shows
17 | }
18 | }
--------------------------------------------------------------------------------
/calculator/main.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const display = document.getElementById("display");
4 |
5 | function appendToDisplay(input){
6 |
7 | display.value += input; //access the display value property and set input to +
8 |
9 | }
10 |
11 | function clearDisplay(){ //access the display value property and set input to " " to clear
12 |
13 | display.value = "";
14 |
15 | }
16 |
17 | function calculate(){
18 |
19 | try{ //catch any potential error, a this code is dangerous and prone to errors
20 | display.value = eval(display.value); //eval function takes mathematical expression, (built in calculator)
21 | }
22 | catch(error){ //catch error and display
23 | display.value = "Error"
24 | }
25 |
26 |
27 | }
--------------------------------------------------------------------------------
/Random Number Generator/Main1.js:
--------------------------------------------------------------------------------
1 | //Random Number Generator
2 |
3 | const min = 50;
4 | const max = 100;
5 |
6 | let randomNum = Math.floor(Math.random() * (max - min)) + min; //gives us a random number between 50-100 range
7 | // floor removes the decimal portion
8 | // + min set the minimum number to be 50
9 |
10 | //let randomNum = Math.floor(Math.random() * 6) + 1; //gives us a random number between 1-6
11 | // floor removes the decimal portion
12 | // + 1 set the minimum number to be 1
13 |
14 | console.log(randomNum);
--------------------------------------------------------------------------------
/Accept User Input/Main.js:
--------------------------------------------------------------------------------
1 | // how to accept user input
2 |
3 | // 1. easy way = window prompt
4 | // 2. professional way = HTML textbox
5 |
6 | //window prompt
7 | //let username;
8 |
9 | //username = window.prompt("What is Your Username?");
10 |
11 | //console.log(username);
12 | //
13 |
14 | document.getElementById("mySubmit").onclick = function(){
15 | // anything inside this curly braces is everything that will happen when we click on button
16 | username = document.getElementById("myText").value// reassign username and set this equal to the text on the textbox
17 | console.log(username);
18 | document.getElementById("myH1").textContent = `Hello ${ username}` //reassign h1 content and set the value equal to the text on the textbox
19 | }
--------------------------------------------------------------------------------
/error/ex2.js:
--------------------------------------------------------------------------------
1 |
2 | try{
3 | const dividend = Number(window.prompt("Enter a dividend: "));
4 | const divisor = Number(window.prompt("Enter a dividend: "));
5 |
6 | if(divisor == 0){ //if divisor is equal to 0, throw a new error object
7 | throw new error("You can't divide by zero!");
8 |
9 | }
10 |
11 | if(isNaN(dividend) || isNaN(divisor)){ //if dividend and divisor is not equal to a number, throw a new error object
12 | throw new error("Enter number value!");
13 |
14 | }
15 |
16 | const result = dividend / divisor; //store the result of dividend and divisor to this object
17 | console.log(result); //display result
18 | }
19 |
20 | catch(error){ //catch the error
21 | console.error(Error); //display the error
22 | }
--------------------------------------------------------------------------------
/Dom Navigation/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 | - Apple
13 | - Banana
14 | - Orange
15 |
16 |
17 |
18 | - Carrot
19 | - Cabbage
20 | - Potato
21 |
22 |
23 |
24 | - Cake
25 | - Ice Cream
26 | - Choconiqqa
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/dates/main.js:
--------------------------------------------------------------------------------
1 | // Date objects = objects that contain values that represent dates and times!
2 | // these date objects can be changed and formatted
3 |
4 |
5 | // date(year, month, day, hour, minute, second, ms)
6 | const date = new Date(); //creating date object
7 |
8 | const year = date.getFullYear(); //object that gets the current year
9 | const month = date.getMonth(); //gets the month
10 | const day = date.getDate(); //get day
11 | const hour = date.getHours();
12 | const minute = date.getMinutes();
13 | const second = date.getSeconds();
14 | const dayOfWeek = date.getDay();
15 |
16 | console.log(date)
17 | console.log(year)
18 | console.log(month)
19 | console.log(date)
20 | console.log(hour)
21 | console.log(minute)
22 | console.log(second)
23 | console.log(dayOfWeek)
--------------------------------------------------------------------------------
/2d Arrays/main.js:
--------------------------------------------------------------------------------
1 | //2d arrays = an array of arrays
2 | //2 dimensional arrays
3 |
4 | //arrays
5 | let fruits = ["banana", "apples", "oranges"]; //first array
6 | let vegetables = ["carrots", "onions", "potatoes"];
7 | let meats = ["chicken","pork","beef"];
8 |
9 | let groceryList = [fruits, vegetables, meats]; //2d array
10 |
11 | groceryList[0][0] = "mangoes"; //first index represents rows and the second is columns
12 | //changing an element of a array using index
13 |
14 | //to iterate over the elements of 2d arrays use nested loops
15 |
16 | for(let list of groceryList){ //outer loop will iterate the 2d array
17 | for(let food of list){ //unner loop will iterate the arrays
18 | console.log(food)
19 | }
20 | }
--------------------------------------------------------------------------------
/forEach/main.js:
--------------------------------------------------------------------------------
1 | //forEach() = method used to iterate over the elements
2 | // of an array and apply a specified function (callback)
3 | // to each element
4 |
5 | // array.forEach(callback)
6 |
7 | const numbers = [1, 2, 3, 4, 5];
8 |
9 | numbers.forEach(cube);
10 | numbers.forEach(display);
11 |
12 | function double(element, index, array){
13 | array[index] = element * 2;
14 | }
15 |
16 | function triple(element, index, array){
17 | array[index] = element * 3;
18 | }
19 |
20 | function square(element, index, array){
21 | array[index] = Math.pow(element, 2);
22 | }
23 |
24 | function cube(element, index, array){
25 | array[index] = Math.pow(element, 3);
26 | }
27 |
28 | function display(element){
29 | console.log(element);
30 | }
31 |
32 |
33 |
--------------------------------------------------------------------------------
/stopWatchProgram/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 | Stopwatch
14 |
15 |
16 |
17 | 00:00:00
18 |
19 |
20 |
21 |
22 |
23 |
24 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/rest parameters/main.js:
--------------------------------------------------------------------------------
1 | // rest parameters = represents an indefinite number
2 | //... of parameters
3 | // (packs arguments into an array)
4 |
5 | let a = 1;
6 | let b = 2;
7 | let c = 3;
8 | let d = 4;
9 | let e = 5;
10 |
11 | console.log(sum(a, b, c, d, e));
12 |
13 | //less efficient way of writing
14 | /*
15 | function sum(a, b){ //function that only accept two arguments
16 |
17 | return a + b
18 | }
19 |
20 | function sum2(a, b, c){ //function that only accept three arguments
21 |
22 | return a + b + c
23 | }
24 | function sum3(a, b, c, d){ //function that only accept four arguments
25 |
26 | return a + b + c + d
27 | }
28 | */
29 |
30 | //using rest parameters
31 |
32 | function sum(...numbers){
33 | let total = 0;
34 | for(let number of numbers){
35 | total += number
36 |
37 | }
38 | return total
39 | }
--------------------------------------------------------------------------------
/DOM/main.js:
--------------------------------------------------------------------------------
1 | // DOM = DOCUMENT OBJECT MODEL
2 | // Object{} that represents the page you see in the web browser
3 | // and provides you with an API to interact with it.
4 | // Web browser constructs the DOM when it loads an HTML document,
5 | // and structures all the elements in a tree-like representation.
6 | // JavaScript can access the DOM to dynamically
7 | // change the content, structure, and style of a web page.
8 |
9 | console.log(document);
10 | console.dir(document);
11 |
12 | document.title = "My website"; //if string is empty it will be substitute by guest
13 | document.body.style.backgroundColor = "hsl(0, 0%, 15%)";
14 |
15 | const username = "";
16 | const welcomeMsg = document.getElementById("welcome-msg");
17 | welcomeMsg.textContent += username === "" ? `Guest` : username; //changing text content based on condition
--------------------------------------------------------------------------------
/DigitalClockProgram/main.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | function updateClock(){ //function to update clock
4 |
5 | const now = new Date(); //get current date
6 | let hours = now.getHours();
7 | const meridiem = hours >= 12 ? "PM" : "AM";
8 | hours = hours % 12 || 12;
9 | hours = hours.toString().padStart(2, 0);
10 | const minutes = now.getMinutes().toString().padStart(2, 0); //get current minutes and pad 0 at the start
11 | const seconds = now.getSeconds().toString().padStart(2, 0); //get current seconds and pad 0 at the start
12 | const timeString = `${hours}:${minutes}:${seconds} ${meridiem}`; //how the format should appear on window
13 | document.getElementById("clock").textContent = timeString; //update the html of the web, and setting it equal to the format of timestring
14 | }
15 |
16 | updateClock();
17 | setInterval(updateClock, 1000); //update and call this functino every 1 second
--------------------------------------------------------------------------------
/Random Number Generator/random.js:
--------------------------------------------------------------------------------
1 | //Random Number Generator
2 |
3 | const myButton = document.getElementById("myButton");
4 | const label1 = document.getElementById("label1");
5 | const label2 = document.getElementById("label2");
6 | const label3 = document.getElementById("label3");
7 |
8 | const min = 1; //setting minimum number
9 | const max = 6; //setting maxinum number
10 |
11 | let randomNum1; //declaring a variable
12 | let randomNum2;
13 | let randomNum3;
14 |
15 | myButton.onclick = function(){
16 | randomNum1 = Math.floor(Math.random() * max) + min; //the function
17 | randomNum2 = Math.floor(Math.random() * max) + min; //the function
18 | randomNum3 = Math.floor(Math.random() * max) + min; //the function
19 |
20 | label1.textContent = randomNum1; //get the text
21 | label2.textContent = randomNum2; //get the text
22 | label3.textContent = randomNum3; //get the text
23 |
24 | }
--------------------------------------------------------------------------------
/async/await/main.js:
--------------------------------------------------------------------------------
1 | // Async/Await = Async = makes a function return a promise
2 | // Await = makes an async function wait for a promise
3 |
4 | // Allows you write asynchronous code in a synchronous manner
5 | // Async doesn't have resolve or reject parameters
6 | // Everything after Await is placed in an event queue
7 |
8 |
9 |
10 |
11 | async function doChores(){
12 |
13 | try{
14 | const walkDogResult = await walkDog();
15 | console.log(walkDogResult);
16 |
17 | const cleanKitchenResult = await cleanKitchen();
18 | console.log(cleanKitchenResult);
19 |
20 | const takeOutTrashResult = await takeOutTrash();
21 | console.log(takeOutTrashResult);
22 |
23 | console.log("You finsihed all the chores!");
24 | }
25 | catch(error){
26 | console.error(error);
27 | }
28 | }
29 |
30 | doChores();
--------------------------------------------------------------------------------
/asynchronus code/main.js:
--------------------------------------------------------------------------------
1 | // synchronous = Executes line by line consecutively in a sequential manner
2 | // Code that waits for an operation to complete.
3 |
4 | // asynchronous = Allows multiple operations to be performed
5 | // concurrently without waiting. Doesn't block the execution
6 | // flow and allows the program to continue.
7 | // (I/O operations, network requests, fetching data)
8 | // Handled with: Callbacks, Promises, Async/Await
9 |
10 | function func1(callback){
11 | setTimeout(() => {console.log("Task 1");
12 | callback()}, 3000);
13 |
14 | }
15 |
16 | function func2(){
17 | console.log("Task 2")
18 | console.log("Task 3")
19 | console.log("Task 4")
20 |
21 | }
22 |
23 | func1(func2); // invoking asychronus code
--------------------------------------------------------------------------------
/ElementSelector/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 | Food
12 |
13 | apple
14 | orange
15 | banana
16 |
17 | Root
18 |
19 | - Beets
20 | - Carrots
21 | - Potato
22 |
23 |
24 | Non-Root
25 |
26 | - Beeasdts
27 | - Cadasrrots
28 | - Potfsdfato
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/static/ex2.js:
--------------------------------------------------------------------------------
1 | class User{ //class
2 |
3 |
4 | static userCount = 0; //keep track the number of users
5 |
6 | constructor(username){ //constructor
7 | this.username = username;
8 | User.userCount++; //adds the number of user
9 |
10 | }
11 | //method
12 | sayHello(){
13 | console.log(`Hello my username is ${this.username}`);
14 | }
15 | //static method
16 | static getUserCount(){
17 | console.log(`There are ${User.userCount} users online`);
18 | }
19 | }
20 |
21 | //objects
22 | const user1 = new User("joey");
23 | const user2 = new User("jake");
24 |
25 | //display
26 | console.log(User.userCount); //get total of user
27 | //
28 | console.log(user1.username); //get the user
29 | console.log(user2.username);
30 | //method
31 | user1.sayHello();
32 | user2.sayHello();
33 | //accessing static method
34 | User.getUserCount();
--------------------------------------------------------------------------------
/Spread Operator/main.js:
--------------------------------------------------------------------------------
1 | // spread operator = allows an iterable such as an
2 | // ... array or string to be expanded
3 | // in places where zero or more
4 | // arguments are expected
5 | // (unpacks the elements)
6 |
7 | let numbers = [1,23,4,45,6,43];
8 | console.log(...numbers);
9 |
10 | let username = "Joey Collado";
11 | console.log(...username);
12 |
13 | //demonstration and how can it be useful
14 | let numbers2 = [1,2,3,4,5,6,7,8,9];
15 | let maxinum = Math.max(...numbers2); //here we store the result of math.max method to maxinum variable, and we also used spread operators so we can unpack the elements of the array
16 | console.log(maxinum) //prints the max number of the array
17 | //
18 |
19 | // example 2
20 | let class1 = ["joey","jake","ranielle"];
21 | let class2 = ["kyle", "france", "jenard"];
22 |
23 | class1.push(...class2);
24 |
25 | console.log(...class1);
--------------------------------------------------------------------------------
/CheckedProperty/Main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Rock/Paper/Scissors/main.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: Arial, sans-serif;
3 | font-weight: bold;
4 | display: flex;
5 | margin: 0;
6 | flex-direction: column;
7 | align-items: center;
8 | }
9 |
10 | h1{
11 | font-size: 3.5rem;
12 | color: gray;
13 | }
14 |
15 | .choices{
16 | margin-bottom: 30px;
17 | }
18 |
19 | .choices button{
20 | font-size: 7.5rem;
21 | min-width: 160px;
22 | margin: 0 10px;
23 | border-radius: 250px;
24 | background-color: rgb(16, 174, 226);
25 | cursor: pointer;
26 | transition: background-color 0.5s ease;
27 | }
28 |
29 | .choices button :hover{
30 | background-color: lightblue;
31 | }
32 |
33 | #playerDisplay, #computerDisplay{
34 | font-size: 2.5rem;
35 | }
36 |
37 | #resultDisplay{
38 | font-size: 5rem;
39 | margin: 30px 0;
40 | }
41 |
42 | .greenText{
43 | color: hsl(130, 84%, 54%);
44 | }
45 | .redText{
46 | color: hsl(0, 84%, 60%);
47 | }
--------------------------------------------------------------------------------
/error/main.js:
--------------------------------------------------------------------------------
1 | // Error = an object is created to represent a problem that occurs
2 | // occur often with user input or establishing a connection
3 |
4 | // try { } = Encloses code that might potentially cause an error
5 | // catch { } = Catch and handle any thrown Errors from try { }
6 | // finally { } = (optional) Always executes. Used mostly for clean up
7 | // ex. close files, close connections, release resources
8 |
9 |
10 | try{
11 | console.log("Hello");
12 | //network errors
13 | //promise rejection
14 | //security errors
15 | }
16 |
17 | catch(error){
18 | console.error(error) //console.error is best for catching errors, good for debugging
19 |
20 | }
21 |
22 | finally{ //optional, always execture regardless of error
23 | //Close files
24 | //Close Connections
25 | //Release resources
26 | console.log("This always executes")
27 |
28 | }
29 |
30 |
31 | console.log("You have reach the end!")
--------------------------------------------------------------------------------
/If Statements/main.js:
--------------------------------------------------------------------------------
1 | const myText = document.getElementById("myText");
2 | const mySubmit = document.getElementById("mySubmit");
3 | const resultElement = document.getElementById("resultElement");
4 | let age;
5 |
6 | mySubmit.onclick = function(){ //function when we click submit button
7 |
8 | age = myText.value; //get the value from the textbox
9 | age = Number(age); //converts input into a number
10 |
11 |
12 | if(age >= 100){
13 | resultElement.textContent = 'you super old';
14 | }
15 | else if(age == -1){
16 | resultElement.textContent = 'what the fuck';
17 | }
18 | else if(age <= 0){ //additional condition before else
19 | resultElement.textContent = 'you aint even born yet';
20 | }
21 | else if(age >= 18){
22 | resultElement.textContent = 'you old enough for this site';
23 | }
24 | else{
25 | resultElement.textContent = 'you must be 18 above to enter site';
26 | }
27 | }
--------------------------------------------------------------------------------
/Rock/Paper/Scissors/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 | Rock-Paper_Scissor
12 |
13 |
14 |
15 |
16 |
17 |
18 | Player:
19 | Computer:
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Ternary Operator/main.js:
--------------------------------------------------------------------------------
1 | //ternary operator = a shortcut to if{} and else{} statements
2 | // helps to assign a variable based on a condition
3 | // condition ? codeIfTrue : codeIfFalse;
4 | // shortcut to if else statements
5 | /*
6 | let age = 21;
7 | let message = age >= 18 ? "you are adult" : "you are young";
8 | console.log(message);
9 | */
10 | // 2nd example
11 | /*
12 | let time = 16;
13 | let greeting = time < 12 ? "good morning" : "good afternoon";
14 | console.log(greeting);
15 | */
16 | // 3rd example
17 | /*
18 | let isStudent = true;
19 | let message = isStudent ? "you are a student" : "you are not a student";
20 | console.log(message);
21 | */
22 | //4th example
23 | // if purchase amount is greater than 100 you get 10% discount if not you get 0% discount
24 | let purchaseAmount = 125;
25 | let discount = purchaseAmount >= 100 ? 10 : 0;
26 | console.log(`your total is $${purchaseAmount - purchaseAmount * (discount/100)}`);
--------------------------------------------------------------------------------
/JSON FILES/parse.js:
--------------------------------------------------------------------------------
1 | // JSON = (JavaScript Object Notation) data-interchange format
2 | // Used for exchanging data between a server and a web application
3 | // JSON files {key:value} OR [value1, value2, value3]
4 |
5 | // JSON.stringify() = converts a JS object to a JSON string.
6 | // JSON.parse() = converts a JSON string to a JS object
7 |
8 | //
9 | const Jsonnames = ["joey","jake","jason","james"];
10 |
11 | const Jsonperson = [{"name":"joey","age": 19,"isEmployed": true,"hobbies": ["boxing","gym","gaming"]}]
12 |
13 | const Jsonpeople = [[{"name":"joey","age": 19,"isEmployed": true},{"name":"jake","age": 29,"isEmployed": true},{"name":"james","age": 39,"isEmployed": false},{"name":"john","age": 49,"isEmployed": false}]]
14 |
15 | //
16 | const parseData = JSON.parse(Jsonnames);
17 | const parseData2 = JSON.parse(Jsonperson);
18 | const parseData3 = JSON.parse(Jsonpeople);
19 |
20 | console.log(Jsonnames);
21 | console.log(Jsonperson);
22 | console.log(Jsonpeople);
--------------------------------------------------------------------------------
/Template literals/main.js:
--------------------------------------------------------------------------------
1 | //template literals = delimited with (`)
2 | // instead of double single quotes
3 | // allows embedded variables and expressions
4 |
5 | let userName = "joey";
6 | let items = 3;
7 | let total = 75;
8 |
9 | //instead of writing like this
10 | /*
11 | console.log("Hello", userName);
12 | console.log("You have", items, "items in your cart");
13 | console.log("Your total is $", total);
14 | */
15 | //use template literals and write like this
16 | /*
17 | console.log(`Hello ${userName}`);
18 | console.log(`You have ${items} items in your cart`);
19 | console.log(`Your total is $${total}`);
20 | */
21 | // if you want to write a one very long string
22 | let text =
23 | `Hello ${userName}
24 | You have ${items} items in your cart
25 | Your total is $${total}
`;
26 |
27 | //console.log(text); //prints all the value of the variable text
28 | document.getElementById("myLabel").innerHTML = text; //updates our html instead of printing in console
29 |
--------------------------------------------------------------------------------
/DigitalClockProgram/main.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-image: url(ranyel.png); /*change background of web to image*/
3 | margin: 0;
4 | background-position: center; /*set background to center*/
5 | background-repeat: no-repeat;/*prevent small images from repeating itself*/
6 | background-size: cover; /*bg image cover the entire window*/
7 | background-attachment: fixed; /*make it so when your web has other elements or has scrollbar the image will stay at fixed position*/
8 | }
9 | #clock-container{
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | height: 100vh;
14 | }
15 | #clock{
16 | font-family: monospace;
17 | font-size: 6.5rem;
18 | font-weight: bold;
19 | text-align: center;
20 | color: white;
21 | backdrop-filter: blur(15px); /*blur the bg behind the element*/
22 | background-color: hsla(0, 0%, 100%, 0.1); /*add a color to the blur effect*/
23 | width: 100%; /*make the element cover 100 percent of width of window*/
24 |
25 | }
--------------------------------------------------------------------------------
/add and change element/ex1.js:
--------------------------------------------------------------------------------
1 | // ---------- EXAMPLE 2 li ELEMENT ----------
2 |
3 | // STEP 1 CREATE THE ELEMENT
4 | const newListItem = document.createElement("li");
5 |
6 | // STEP 2 ADD ATTRIBUTES/PROPERTIES
7 | newListItem.textContent = "coconut";
8 | newListItem.id = "coconut";
9 | newListItem.style.fontWeight = "bold";
10 | newListItem.style.backgroundColor = "lightgreen";
11 |
12 | // STEP 3 APPEND ELEMENT TO DOM
13 | document.body.append(newListItem);
14 | // document.body.prepend(newListItem);
15 | // document.getElementById("fruits").append(newListItem);
16 | // document.getElementById("fruits").prepend(newListItem);
17 |
18 | // const banana = document.getElementById("banana");
19 | // document.getElementById("fruits").insertBefore(newListItem, banana);
20 |
21 | // const listItems = document.querySelectorAll("#fruits li");
22 | // document.getElementById("fruits").insertBefore(newListItem, listItems[1]);
23 |
24 | // REMOVE HTML ELEMENT
25 | // document.body.removeChild(newLink);
26 | // document.getElementById("fruits").removeChild(newListItem);
--------------------------------------------------------------------------------
/static/main.js:
--------------------------------------------------------------------------------
1 | // static = function that defines properties or methods that belong
2 | // to a class rather than the objects created
3 | // from that class (class owns anything static, not the objects)
4 | // anything that is static belong to the class itself
5 |
6 | class mathUtil{ // if you would like the static property you have to access it by its class
7 | //static object
8 | static PI = 3.14159;
9 |
10 | //static method
11 | static getDiamter(radius){ // radius is a parameter
12 | return radius * 2;
13 | }
14 |
15 | static getCircumference(radius){
16 | return 2 * this.PI * radius; //this means mathUtil
17 | }
18 |
19 | static getArea(radius){
20 | return this.PI * radius * radius;
21 | }
22 | }
23 |
24 | //display
25 | // class obj
26 | console.log(mathUtil.PI);
27 | // class method
28 | console.log(mathUtil.getDiamter(10)); //get diameter of 10
29 | //
30 | console.log(mathUtil.getCircumference(10));
31 | //
32 | console.log(mathUtil.getArea(10))
--------------------------------------------------------------------------------
/hide/show html/main.js:
--------------------------------------------------------------------------------
1 |
2 | const myButton = document.getElementById("myButton");
3 | const myImg = document.getElementById("myImg");
4 |
5 | /*
6 | myButton.addEventListener("click", event => {
7 |
8 | if(myImg.style.display === "none"){ //if the image property display is equal to none
9 | myImg.style.display = "block";
10 | myImg.textContent = "hide";
11 | }
12 | else{
13 | myImg.style.display = "none"; //display property is set to none/hiding
14 | myButton.textContent = "show"; //
15 | }
16 |
17 |
18 | });
19 | */
20 |
21 | //alternative of display is visibility = here we can reserve space for the element
22 |
23 | myButton.addEventListener("click", event => {
24 |
25 | if(myImg.style.visibility === "hidden"){ //if the image property display is equal to hidden
26 | myImg.style.visibility = "visible";
27 | myImg.textContent = "Hide";
28 | }
29 | else{
30 | myImg.style.visibility = "hidden"; //display property is set to none/hiding
31 | myButton.textContent = "show"; //
32 | }
33 |
34 |
35 | });
36 |
--------------------------------------------------------------------------------
/StringMethods/main.js:
--------------------------------------------------------------------------------
1 | // string methods = allow you to manipulate and work with text (strings)
2 |
3 | let username = "Joey";
4 |
5 | //get the character at index 0
6 | console.log(username.charAt(0));
7 |
8 | //return the first occurence of a character
9 | console.log(username.indexOf("o"));
10 |
11 | //get the length of a string
12 | console.log(username.length);
13 |
14 | //trim method remove all spaces
15 | username = username.trim();
16 | //turn string to uppercase
17 | username = username.toUpperCase();
18 | //turn string to lowercase
19 | username = username.toLocaleLowerCase();
20 | //repeat the string
21 | username = username.repeat(3);
22 | //determine if the string starts with a specific character
23 | let result = username.startsWith("J");
24 | console.log(result);
25 | //determine if the string ends with a specific character
26 | let result2 = username.endsWith("y");
27 |
28 | if(result2){
29 | console.log("correct")
30 | }
31 | else{
32 | console.log("wrong")
33 | }
34 | //checks if string includes a specific character
35 | let result3 = username.includes("e")
36 | console.log(result3)
37 | //
38 | console.log(username);
39 |
--------------------------------------------------------------------------------
/format Currency/main.js:
--------------------------------------------------------------------------------
1 | //toLocaleString() = returns a string with language
2 | // sensitive representation of this number
3 |
4 | //number.toLocaleString(locale, {options});
5 |
6 | // 'locale' = specify that language (undefined = default set in browser)
7 | // 'options' = object with formatting options
8 |
9 | let myNum = 123456.789
10 |
11 | //different formatting system
12 | //myNum = myNum.toLocaleString("en-US"); //us english formatting
13 | //myNum = myNum.toLocaleString("hi-IN"); //hindi formatting
14 | //myNum = myNum.toLocaleString("de-DE"); //standard german
15 |
16 | //currency formatting styles
17 | //myNum = myNum.toLocaleString("en-US", {style: "currency", currency: "USD"}); //us Dollars
18 | //myNum = myNum.toLocaleString("hi-IN", {style: "currency", currency: "INR"}); //rupees
19 | //myNum = myNum.toLocaleString("de-DE", {style: "currency", currency: "EUR"}); //euros
20 |
21 | //percent formatting styles
22 | //myNum = myNum.toLocaleString(undefined, {style: "percent"});
23 |
24 | //units style, all units of measurements
25 | myNum = myNum.toLocaleString(undefined, {style: "unit", unit: "celsius"});
26 |
27 | console.log(myNum)
--------------------------------------------------------------------------------
/Weather App Project/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Weather Web
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/JSON FILES/stringify.js:
--------------------------------------------------------------------------------
1 | // JSON = (JavaScript Object Notation) data-interchange format
2 | // Used for exchanging data between a server and a web application
3 | // JSON files {key:value} OR [value1, value2, value3]
4 |
5 | // JSON.stringify() = converts a JS object to a JSON string.
6 | // JSON.parse() = converts a JSON string to a JS object
7 |
8 | //
9 | const names = ["joey","jake","jason","james"];
10 |
11 | const person = [{
12 | "name":"joey",
13 | "age": 19,
14 | "isEmployed": true,
15 | "hobbies": ["boxing","gym","gaming"]
16 | }]
17 |
18 | const people = [[{
19 | "name":"joey",
20 | "age": 19,
21 | "isEmployed": true
22 |
23 | },
24 | {
25 | "name":"jake",
26 | "age": 29,
27 | "isEmployed": true
28 |
29 | },
30 | {
31 | "name":"james",
32 | "age": 39,
33 | "isEmployed": false
34 |
35 | },
36 | {
37 | "name":"john",
38 | "age": 49,
39 | "isEmployed": false
40 |
41 | }]]
42 |
43 | //
44 | const jsonString = JSON.stringify(names);
45 | const jsonString2 = JSON.stringify(person);
46 | const jsonString3 = JSON.stringify(people);
47 |
48 | console.log(names);
49 | console.log(person);
50 | console.log(people);
--------------------------------------------------------------------------------
/ClassList/main.js:
--------------------------------------------------------------------------------
1 | // classList = Element property in JavaScript used to interact
2 | // with an element's list of classes (CSS classes)
3 | // Allows you to make reusable ccs classes for many elements
4 | // across your webpage.
5 |
6 | // add()
7 | // remove()
8 | // toggle(Remove if present, Add if not)
9 | // replace(oldClass, newClass)
10 | // contains()
11 |
12 | const myButton = document.getElementById("myButton");
13 |
14 | myButton.classList.add("enabled"); //the enabled css class is applied to the element myButton
15 | //myButton.classList.remove("enabled"); //removed
16 |
17 | myButton.addEventListener("mouseover", event =>{ //the css hover class is applied
18 | event.target.classList.add("hover");
19 | });
20 |
21 | myButton.addEventListener("mouseout", event =>{ //the css hover class is removed
22 | event.target.classList.remove("hover");
23 | });
24 |
25 | myButton.addEventListener('click', event => { //the css disabled class is applied
26 |
27 | if(event.target.classList.contains("disabled")){
28 | event.target.textContent += "Clicked!";
29 | }
30 | else{
31 | event.target.classList.replace("enabled", "disabled");
32 | }
33 | });
--------------------------------------------------------------------------------
/Constructor/main.js:
--------------------------------------------------------------------------------
1 | // constructor = special method for defining the
2 | // properties and methods of objects
3 | // reusable method
4 |
5 | function Car(make, model, year, color){ //function (name) (parameters) //to construct an object
6 | //properties
7 | this.make = make,
8 | this.model = model,
9 | this.year = year,
10 | this.color = color,
11 | //methods
12 | this.drive = function(){console.log(`You drive the ${this.model}`)}
13 | }
14 | //special method
15 | //creating more car objects using the reusable constructor
16 | const car1 = new Car("Ford", "Mustang", 2024, "red"); //passing arguments to the parameter of the constructor
17 | const car2 = new Car("Chevrolet", "Camaro", 2025, "blue");
18 | const car3 = new Car("Dodge", "Charger", 2026, "silver");
19 | //display
20 | console.log(car1.make);
21 | console.log(car1.model);
22 | console.log(car1.year);
23 | console.log(car1.color);
24 |
25 | console.log(car2.make);
26 | console.log(car2.model);
27 | console.log(car2.year);
28 | console.log(car2.color);
29 |
30 | console.log(car3.make);
31 | console.log(car3.model);
32 | console.log(car3.year);
33 | console.log(car3.color);
34 | //invoking function methods
35 | car1.drive();
36 | car2.drive();
37 | car3.drive();
--------------------------------------------------------------------------------
/classes/main.js:
--------------------------------------------------------------------------------
1 | // class = (ES6 feature) provides a more structured and cleaner way to
2 | // work with objects compared to traditional constructor functions
3 | // ex. static keyword, encapsulation, inheritance
4 |
5 | //creating a class
6 | class Product{
7 | constructor(name, price){ //putting a constructor inside the class
8 | this.name = name;
9 | this.price = price;
10 | }
11 | //function1 / method
12 | displayProduct(){
13 | console.log(`Product: ${this.name}`);
14 | console.log(`Price: $${this.price.toFixed(2)}`); //toFixed keyword enables decimal points at the end of the number, here it is set to two decimal places
15 | }
16 | //function2 /method
17 | calculateTotal(salesTax){
18 | return this.price + (this.price * salesTax);
19 | }
20 | }
21 | //creating objects
22 | const salesTax = 0.05; //its for the calculateTotal method
23 |
24 | const product1 = new Product("Shirt", 19.99);
25 | const product2 = new Product("Pants", 22.50);
26 | const product3 = new Product("Underwear", 100.00);
27 |
28 |
29 | //display
30 | product1.displayProduct();
31 |
32 | const total = product1.calculateTotal(salesTax);
33 | console.log(`Total price (with tax): $${total.toFixed(2)}`);
--------------------------------------------------------------------------------
/imageSlider/main.css:
--------------------------------------------------------------------------------
1 | .slider{
2 | position: relative;
3 | width: 500px; /*the width of the slider*/
4 | margin: auto;
5 | overflow: hidden;
6 | }
7 |
8 | .slider img{
9 | width: 100%; /*widht of img relative to the slider*/
10 | height: 500px;
11 | display: none; /*hid image default*/
12 |
13 |
14 | }
15 |
16 | img.displaySlide{
17 | display: block;
18 | animation-name: fade; /*we are utilizing the animation we created*/
19 | animation-duration: 1.5s; /*how long the animation to last*/
20 |
21 |
22 | }
23 |
24 | .slider button{
25 | position: absolute; /*position an element relative to its parent. parent = slider*/
26 | top: 50%; /*position at the middle of the y axis*/
27 | transform: translateY(-50%); /*move the buttons up by 50% of the elements height*/
28 | font-size: 2rem;
29 | padding: 10px 15px;
30 | background-color: hsla(0, 0%, 0%, 0.5);
31 | color: white;
32 | border: none;
33 | cursor: pointer ;
34 | }
35 |
36 | .prev{
37 | left: 0; /*align the element to the left*/
38 | }
39 | .next{
40 | right: 0; /*align the element to the right*/
41 | }
42 |
43 | @keyframes fade { /*creating an animation. the animation was named "fade" */
44 | from{opacity: .5}
45 | to{opacity: 1}
46 | }
--------------------------------------------------------------------------------
/CheckedProperty/main.js:
--------------------------------------------------------------------------------
1 | // .checked = property that determines the checked state of an
2 | // HTML checkbox or radio button element
3 |
4 | const myCheckbox = document.getElementById("myCheckbox");
5 | const visaBtn = document.getElementById("visaBtn");
6 | const paypalBtn = document.getElementById("paypalBtn");
7 | const mastercardBtn = document.getElementById("mastercardBtn");
8 | const mySubmit = document.getElementById("mySubmit");
9 | const subResult = document.getElementById("subResult");
10 | const paymentResult = document.getElementById("paymentResult");
11 |
12 | mySubmit.onclick = function(){
13 |
14 | if(myCheckbox.checked){ //evaluate the checkbox if it is check or n
15 | subResult.textContent = 'you are subscribed!';
16 | }
17 | else{
18 | subResult.textContent = 'you are not subscribed!';
19 | }
20 |
21 | if(visaBtn.checked){
22 | paymentResult.textContent = 'you are paying with visa';
23 | }
24 | else if(mastercardBtn.checked){
25 | paymentResult.textContent = 'you are paying with mastercard';
26 | }
27 | else if(paypalBtn.checked){
28 | paymentResult.textContent = 'you are paying with paypal';
29 | }
30 | else{
31 | paymentResult.textContent = 'you must select a payment type';
32 | }
33 | }
--------------------------------------------------------------------------------
/Switches/main.js:
--------------------------------------------------------------------------------
1 | //switch = can be an efficient replacement to many else if statements
2 |
3 | //days switch program
4 | /*
5 | let day = "ligma";
6 |
7 | switch(day){
8 | case 1:
9 | console.log("it is monday");
10 | break;
11 | case 2:
12 | console.log("it is tuesday");
13 | break;
14 | case 3:
15 | console.log("it is wednesday");
16 | break;
17 | case 4:
18 | console.log("it is thursday");
19 | break;
20 | case 5:
21 | console.log("it is friday");
22 | break;
23 | case 6:
24 | console.log("it is saturday");
25 | break;
26 | case 7:
27 | console.log("it is sunday");
28 | break;
29 | default:
30 | console.log(`${day} is not a day`); //default case incase there are no matching cases
31 | }
32 | */
33 | // advance program = test grade swtich program
34 |
35 | let testScore = 22;
36 | let letterGrade;
37 |
38 | switch(true){
39 | case testScore >= 90:
40 | letterGrade = "A";
41 | break;
42 | case testScore >= 80:
43 | letterGrade = "B";
44 | break;
45 | case testScore >= 70:
46 | letterGrade = "C";
47 | break;
48 | case testScore >= 60:
49 | letterGrade = "D";
50 | break;
51 | default:
52 | letterGrade = "F"
53 | }
54 |
55 | console.log(letterGrade);
--------------------------------------------------------------------------------
/fetch data from an API/main.js:
--------------------------------------------------------------------------------
1 | // fetch = Function used for making HTTP requests to fetch resources.
2 | // (JSON style data, images, files)
3 | // Simplifies asynchronous data fetching in JavaScript and
4 | // used for interacting with APIs to retrieve and send
5 | // data asynchronously over the web.
6 | // fetch(url, {options})
7 |
8 |
9 | async function fetchData(){ //function
10 |
11 |
12 | try{
13 |
14 | const pokemonName = document.getElementById("pokemonName").value.toLowerCase(); //to lowercase make sure everything input is lowercase
15 |
16 | const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
17 |
18 | if(!response.ok){ //if response property is not okay do this
19 | throw new Error("Could not fetch resource");
20 | }
21 | // if response is okay do this
22 | const data = await response.json(); //create a constant for data and convert it to json
23 | const pokemonSprite = data.sprites.front_default;
24 | const imgElement = document.getElementById("pokemonSprite");
25 |
26 | //change the image element
27 | imgElement.src = pokemonSprite;
28 | imgElement.style.display = "block"; //display default is block or none
29 | }
30 | catch(error){
31 | console.error(error);
32 | }
33 | }
--------------------------------------------------------------------------------
/If Statements/demonstration.js:
--------------------------------------------------------------------------------
1 | // if statements = if a condition is true, execute some code
2 | // if not it will do something else
3 |
4 | //1st example
5 | /*
6 | let age = 13;
7 |
8 | if(age >= 18){
9 | console.log("you old enough");
10 | }
11 | else{
12 | console.log("you a kid")
13 | }
14 | */
15 |
16 | //2nd example
17 | /*
18 | let isStudent = false;
19 |
20 | if(isStudent){
21 | console.log("you a student")
22 | }
23 | else{
24 | console.log("you aint student")
25 | }
26 | */
27 | //3rd example nested
28 | /*
29 | let age = 25;
30 | let hasLicense = false;
31 |
32 | if(age >= 16){
33 | console.log("you old enough to drive");
34 |
35 | //nested
36 | if(hasLicense){
37 | console.log("you have a license")
38 | }
39 | else{
40 | console.log("you dont have ur license")
41 | }
42 | }
43 | else{
44 | console.log("you must be 16 above");
45 | }
46 | */
47 | //4th example if else statement
48 | /*
49 | let age = -1;
50 |
51 | if(age >= 100){
52 | console.log("you super old");
53 | }
54 | else if(age == -1){
55 | console.log("what the fuck")
56 | }
57 | else if(age <= 0){ //additional condition before else
58 | console.log("you aint even born yet");
59 | }
60 | else if(age >= 18){
61 | console.log("you old enough for this site");
62 | }
63 | else{
64 | console.log("you must be 18 above to enter site");
65 | }
66 | */
--------------------------------------------------------------------------------
/MouseEvent/main.js:
--------------------------------------------------------------------------------
1 | // eventListener = Listen for specific events to create interactive web pages
2 | // events: click, mouseover, mouseout
3 | // .addEventListener(event, callback);
4 | // ex (click, changeColor)
5 | // event = is an object that contains information about something that happens
6 | // target = is what we click on
7 |
8 | const myBox = document.getElementById("myBox");
9 | const myButton = document.getElementById("myButton");
10 |
11 | /*
12 | //using callback to the function
13 | function changeColor(event){
14 | event.target.style.backgroundColor = "tomato";
15 | event.target.textContent = "OUCH!";
16 | }
17 | //
18 | myBox.addEventListener("click", changeColor);
19 | //
20 | */
21 |
22 | //using arrow function as its more concise
23 | myBox.addEventListener("click", event => {
24 | event.target.style.backgroundColor = "tomato";
25 | event.target.textContent = "OUCH! ";
26 | });
27 | //
28 |
29 | //other mouse events
30 | myBox.addEventListener("mouseover", event => { //when you touch the box
31 | event.target.style.backgroundColor = "yellow";
32 | event.target.textContent = "DONT!";
33 | });
34 | //
35 | myBox.addEventListener("mouseout", event => {
36 | event.target.style.backgroundColor = "lightgreen";
37 | event.target.textContent = "Click Me";
38 | });
39 |
40 | //
41 | //
42 |
--------------------------------------------------------------------------------
/JavascriptObjects/main.js:
--------------------------------------------------------------------------------
1 | // object = A collection of related properties and/or methods
2 | // Can represent real world objects (people, products, places)
3 | // object = {key:value,
4 | // function()}
5 | // methods = are just functions that belongs to an object
6 | // object = representation of real objects person etc
7 | // objects need different names
8 | // this is an introduction to object oriented programming
9 |
10 |
11 | const person1 = { //object
12 | //properties / attributes
13 | firstName: "Spongebob",
14 | lastName: "Squarepants",
15 | age: 30,
16 | isEmployed: true,
17 | //
18 | //declaring functions
19 | sayHello: function(){console.log("Hi! I am spongebob!")},
20 | eat: function(){console.log("I am eating a hamburger")},
21 | //
22 | }
23 |
24 | const person2 = { //object
25 | //properties / attributes
26 | firstName: "jake",
27 | lastName: "laurence",
28 | age: 34,
29 | isEmployed: true,
30 | //
31 | //declaring functions
32 | sayHello: function(){console.log("Hi! I am jake!")},
33 | eat: function(){console.log("I am eating a glizzies")},
34 | //
35 | }
36 |
37 | //accessing the properties of an object
38 | console.log(person1.firstName);
39 | console.log(person2.firstName);
40 | //invoking object methods/functions
41 | person1.sayHello();
42 | person1.eat();
43 | person2.sayHello();
44 | person2.eat();
--------------------------------------------------------------------------------
/imageSlider/main.js:
--------------------------------------------------------------------------------
1 |
2 | const slides = document.querySelectorAll(".slides img") //select all elements within the class of slides that are images
3 | let slideIndex = 0; //set an index to the slides
4 | let intervalId = null; //return an id that we can work on
5 |
6 | //initializeSlider();
7 | document.addEventListener("DomContentLoaded", initializeSlider); //preferred way
8 |
9 | //declare function
10 | function initializeSlider(){
11 |
12 | if(slides.length > 0){ //if there's no slide of images don't do the code
13 | slides[slideIndex].classList.add("displaySlide");
14 | intervalId = setInterval(nextSlide, 5000);
15 | }
16 |
17 |
18 |
19 | }
20 |
21 | function showSlide(index){
22 |
23 | if(index >= slides.length){ //if we reset the end of the slide, reset the slide index to 0, so that slider don't get out of bounds
24 | slideIndex = 0;
25 | }
26 | else if(index < 0){
27 | slideIndex = slides.length - 1;
28 | }
29 |
30 | slides.forEach(slide => {
31 | slide.classList.remove("displaySlide") //if we go the the next slide previous slide get removes
32 | });
33 | slides[slideIndex].classList.add("displaySlide"); //add display slide to the next slide
34 |
35 | }
36 |
37 | function prevSlide(){
38 |
39 | slideIndex --;
40 | showSlide(slideIndex);
41 |
42 | }
43 |
44 | function nextSlide(){
45 |
46 | slideIndex ++;
47 | showSlide(slideIndex);
48 |
49 | }
--------------------------------------------------------------------------------
/stopWatchProgram/main.css:
--------------------------------------------------------------------------------
1 | body{
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | background-color: hsl(0, 0%, 90%);
6 | }
7 |
8 | #myH1{
9 | font-size: 4rem;
10 | font-family: "Arial", sans-serif;
11 | color: black;
12 | }
13 |
14 | #container{
15 | display: flex;
16 | flex-direction: column;
17 | align-items: center;
18 | padding: 30px;
19 | border: 5px solid;
20 | border-radius: 50px;
21 | background-color: white;
22 | }
23 |
24 | #display{
25 | font-size: 5rem;
26 | font-family: monospace;
27 | font-weight: bold;
28 | color: rgba(100, 100, 100, 0.749);
29 | text-shadow: 2px 2px 2px rgba(50, 50, 50, 0.726);
30 | margin-bottom: 25px;
31 | }
32 |
33 | #controls button{
34 | font-size: 1.5rem;
35 | font-weight: bold;
36 | padding: 10px 20px;
37 | margin: 5px;
38 | min-width: 125px;
39 | border: none;
40 | border-radius: 10px;
41 | cursor: pointer;
42 | color: white;
43 | transition: background-color 0.5s ease; /*slow transition of the hover effects*/
44 | }
45 |
46 | #startBtn{
47 | background-color: green;
48 | }
49 | #startBtn:hover{
50 | background-color: darkgreen
51 | }
52 |
53 | #stopBtn{
54 | background-color: red
55 | }
56 | #stopBtn:hover{
57 | background-color: darkred
58 | }
59 |
60 | #resetBtn{
61 | background-color: blue
62 | }
63 | #resetBtn:hover{
64 | background-color: darkblue
65 | }
--------------------------------------------------------------------------------
/Arithmetic Operators/Main.js:
--------------------------------------------------------------------------------
1 | //arithmetic operators = operands (values, variables, etc.)
2 | // operators (+ - * / **)
3 | // ex. 11 = x + 5;
4 |
5 | let students = 30 // assigning a value to the variable students
6 |
7 | students = students + 1; // re assign the variable adding 1 to it
8 | students = students - 1; // re assign the variable subtracting 1 to it
9 | students = students * 2; // re assign the variable multiplying 2 to it
10 | students = students / 2; // re assign the variable dividing it to 2
11 | students = students ** 2; // 30 to the power of 2, using exponents
12 | // modulus operators
13 | students = students % 2; // modulus operator, the remaining value we can get when we divide
14 | let extraStudents = students & 3;
15 |
16 | //augmented assignment operators
17 | students += 2; //adding value to the variable
18 | students -= 2;
19 | students *= 2;
20 | students /= 2;
21 | students **= 2;
22 | students %= 2;
23 | //
24 | // increment and decrement operator
25 | students ++; //increment operator
26 | students --; //decrement operator
27 | //
28 | /*
29 | operator precedence // works like pemdas, this is the guide to solve the below equation
30 |
31 | 1. parenthesis
32 | 2. exponents
33 | 3. multiplication & division and modulus
34 | 4. addition and subtraction
35 | */
36 |
37 | let result = 1 + 2 * 3 + 4 ** 2;
38 | // 1 + 2 * 3 + 16
39 | // 1 + 6 + 16
40 | // 23
41 | console.log(result)
--------------------------------------------------------------------------------
/arrayOfObjects/main.js:
--------------------------------------------------------------------------------
1 | //
2 |
3 | const fruits = [{name: "apple", color: "red", calories: 95}, //objects
4 | {name: "orange", color: "orange", calories: 935},
5 | {name: "banana", color: "yellow", calories: 915},
6 | {name: "mangoes", color: "green", calories: 945},
7 | {name: "grapes", color: "violet", calories: 955}]; //array
8 |
9 |
10 | //accesing properties of array object
11 | console.log(fruits[0].name);
12 | console.log(fruits[0].color);
13 | console.log(fruits[0].calories);
14 |
15 |
16 | //add new object
17 | fruits.push({name: "watermelon", color: "darkgreen", calories: 43})
18 |
19 | console.log(fruits)
20 |
21 | //remove an object
22 | //fruits.pop();
23 |
24 | //removes at certain index
25 | //fruits.splice(1,2)
26 |
27 | //for each to loop through the array
28 | fruits.forEach(fruit => console.log(fruit.color));
29 |
30 | //map method, run each element through a function and return a new array
31 | const fruitNames = fruits.map(fruit => fruit.name);
32 |
33 | console.log(fruitNames);
34 |
35 | //filter, return new array after using each element and checking the condition
36 | const yellowFruits = fruits.filter(fruit => fruit.color === "yellow");
37 | const calorieFruits = fruits.filter(fruit => fruit.calories > 100);
38 |
39 | console.log(calorieFruits);
40 | console.log(yellowFruits);
41 |
42 | //reduce, will return a single value
43 | const maxFruit = fruits.reduce((max, fruit) => fruit.calories > max.calories ? fruit : max);
44 |
45 | console.log(maxFruit);
46 |
47 |
48 |
--------------------------------------------------------------------------------
/ElementSelector/main.js:
--------------------------------------------------------------------------------
1 | // element selectors = Methods used to target and manipulate HTML elements
2 | // They allow you to select one or multiple HTML elements
3 | // from the DOM (Document Object Model)
4 |
5 | // Returns
6 | // 1. document.getElementById() // ELEMENT OR NULL
7 | // 2. document.getElementsClassName() // HTML COLLECTION
8 | // 3. document.getElementsByTagName() // HTML COLLECTION
9 | // 4. document.querySelector() // FIRST ELEMENT OR NULL
10 | // 5. document.querySelectorAll() // NODELIST = this is static
11 |
12 | // ---------- getElementsByClassName() ----------
13 |
14 | const fruits = document.getElementsByClassName("fruits");
15 |
16 | Array.from(fruits).forEach(fruit => {
17 | fruit.style.backgroundColor = "yellow";
18 | });
19 |
20 | // ---------- getElementsByTagName() ----------
21 |
22 | const h4Elements = document.getElementsByTagName("h4");
23 | const liElements = document.getElementsByTagName("li");
24 |
25 | Array.from(h4Elements).forEach(h4Element => {
26 | h4Element.style.backgroundColor = "yellow";
27 | });
28 |
29 | Array.from(liElements).forEach(liElement => {
30 | liElement.style.backgroundColor = "lightgreen";
31 | });
32 |
33 | // ---------- querySelector() ----------
34 |
35 | const element = document.querySelector("li");
36 |
37 | element.style.backgroundColor = "yellow";
38 |
39 | // ---------- querySelectorAll() ----------
40 |
41 | const foods = document.querySelectorAll("li");
42 |
43 | foods.forEach(food => {
44 | food.style.backgroundColor = "yellow"
45 | });
46 |
--------------------------------------------------------------------------------
/Inheritance/main.js:
--------------------------------------------------------------------------------
1 | // Inheritance = allows a new class to inherit properties and methods
2 | // from an existing class (parent -> child) parent child relationship
3 | // helps with code reusability\
4 |
5 | class Animal{ //parent class
6 | //properties
7 | alive = true;
8 |
9 | //methods
10 | eat(){
11 | console.log(`This ${this.name} is eating`);
12 | }
13 |
14 | sleep(){
15 | console.log(`This ${this.name} is sleeping`);
16 | }
17 | }
18 |
19 | //children classes
20 | class Rabbit extends Animal{ //inherits from parent class
21 | name = "rabbit"; //property
22 |
23 | //unique method that a specific child class can only inherit
24 | run(){
25 | console.log(`this ${this.name} is running`)
26 | }
27 | }
28 |
29 | class Fish extends Animal{
30 | name = "fish";
31 |
32 | //unique method that a specific child class can only inherit
33 | swim(){
34 | console.log(`this ${this.name} is swimming`)
35 | }
36 | }
37 |
38 | class Hawk extends Animal{
39 | name = "hawk";
40 |
41 | //unique method that a specific child class can only inherit
42 | fly(){
43 | console.log(`this ${this.name} is flying`)
44 | }
45 | }
46 |
47 | // creating objects
48 | const rabbit = new Rabbit();
49 |
50 | const fish = new Fish();
51 |
52 | const hawk = new Hawk();
53 |
54 | // invoking methods
55 | console.log(rabbit.alive);
56 | rabbit.eat();
57 | rabbit.sleep();
58 | rabbit.run();
59 |
60 | console.log(fish.alive);
61 | fish.eat();
62 | fish.sleep();
63 | fish.swim();
64 |
65 | console.log(hawk.alive);
66 | hawk.eat();
67 | hawk.sleep();
68 | hawk.fly();
69 |
--------------------------------------------------------------------------------
/Variables/main.js:
--------------------------------------------------------------------------------
1 | // variable = a container that stores a value
2 | // behaves as if it were the value it contains
3 |
4 | // ways of creating a variable
5 | // 1. declaration = let x;
6 | // 2. assignment = x = 100;
7 |
8 | //types of variables
9 |
10 | //numbers
11 | /*
12 | let x;
13 | x = 123312;
14 |
15 | console.log(x);
16 |
17 | let age = 25;
18 |
19 | console.log(age);
20 |
21 | let price = 99.11;
22 | console.log(price)
23 |
24 | let gpa = 1.11
25 | console.log(gpa)
26 |
27 | console.log(`you are ${age} years old`) //constructing a sentence in console log using back ticks
28 | console.log(`your gpa is: $(gpa)`) //constructing a sentence in console log using back ticks
29 | console.log(typeof gpa) // finds out the type of variable
30 |
31 | //strings
32 | let firstName = "joey";
33 | let favoriteFood = "burger"
34 | let email = "@akosijoeypogi31"
35 |
36 | console.log(typeof firstName)
37 | console.log(firstName)
38 | console.log(`your name is ${firstName}`)
39 | console.log(`you like ${favoriteFood}`)
40 | console.log(`your email is ${email}`)
41 |
42 | //Booleans
43 | let online = true;
44 | let forSale = true;
45 | let isStudent = false;
46 |
47 | console.log(typeof online)
48 | console.log(`joey is ${online}`)
49 | console.log(`is this car for sale: ${forSale}`)
50 | console.log(`enrolled: ${isStudent}`)
51 | */
52 |
53 | let fullName = "Joey Collado"
54 | let age = 19;
55 | let student = true;
56 |
57 | // displaying varirables on the web document using javascript
58 | document.getElementById("p1").textContent = `your name is ${fullName}`;
59 | document.getElementById("p2").textContent = `you are ${age}`;
60 | document.getElementById("p3").textContent = `enrolled: ${student}`;
61 | //
--------------------------------------------------------------------------------
/RandomPasswordGenerator/main.js:
--------------------------------------------------------------------------------
1 | function generatePassword(length, includeLowercase, includeUppercase, includeNumbers, includeSymbols){
2 |
3 | const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
4 | const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
5 | const numberChars = "0123456789";
6 | const symbolChars = "!@#$%^&*()_+-=";
7 |
8 | let allowedChars = "";
9 | let password = "";
10 |
11 | allowedChars += includeLowercase ? lowercaseChars : "";
12 | allowedChars += includeUppercase ? uppercaseChars : "";
13 | allowedChars += includeNumbers ? numberChars : "";
14 | allowedChars += includeSymbols ? symbolChars : "";
15 |
16 | if(length <= 0){
17 | return `(password length must be at least 1)`;
18 | }
19 | if(allowedChars.length === 0){
20 | return `(At least 1 set of character needs to be selected)`;
21 | }
22 |
23 | for(let i = 0; i < length; i++){
24 | const randomIndex = Math.floor(Math.random() * allowedChars.length);
25 | password += allowedChars[randomIndex];
26 | }
27 |
28 | return password;
29 | }
30 | //let the program knows what can be included in the password
31 | const passwordLength = 10; //let the program knows the length limit of the password
32 | const includeLowercase = true;
33 | const includeUppercase = true;
34 | const includeNumbers = true;
35 | const includeSymbols = true;
36 |
37 | const password = generatePassword(passwordLength,
38 | includeLowercase,
39 | includeUppercase,
40 | includeNumbers,
41 | includeSymbols);
42 | //
43 | console.log(`Generated password: ${password}`);
--------------------------------------------------------------------------------
/Dom Navigation/main.js:
--------------------------------------------------------------------------------
1 | // DOM Navigation = The process of navigating through the structure
2 | // of an HTML document using JavaScript.
3 |
4 | // .firstElementChild
5 | // .lastElementChild
6 | // .nextElementSibling
7 | // .previousElementSibling
8 | // .parentElement
9 | // .children
10 |
11 | // ---------- .firstElementChild ----------
12 |
13 | //const ulElements = document.querySelectorAll("ul");
14 |
15 | ulElements.forEach(ulElement => {
16 | const firstChild = ulElement.firstElementChild;
17 | firstChild.style.backgroundColor = "yellow";
18 | });
19 |
20 | // ---------- .lastElementChild ----------
21 |
22 | //const ulElements = document.querySelectorAll("ul");
23 |
24 | ulElements.forEach(ulElement => {
25 | const lastChild = ulElement.lastElementChild;
26 | lastChild.style.backgroundColor = "yellow";
27 | });
28 |
29 | // ---------- .nextElementSibling ----------
30 |
31 | //const element = document.getElementById("vegetables");
32 | const nextSibling = element.nextElementSibling;
33 | nextSibling.style.backgroundColor = "yellow";
34 |
35 | // ---------- .previousElementSibling ----------
36 |
37 | //const element = document.getElementById("desserts");
38 | const prevSibling = element.previousElementSibling;
39 | prevSibling.style.backgroundColor = "yellow";
40 |
41 | // ---------- .parentElement ----------
42 |
43 | //const element = document.getElementById("ice cream");
44 | const parent = element.parentElement;
45 | parent.style.backgroundColor = "yellow";
46 |
47 | // ---------- .children ----------
48 |
49 | const element = document.getElementById("fruits");
50 | const children = element.children;
51 |
52 | Array.from(children).forEach(child => {
53 | child.style.backgroundColor = "yellow";
54 | });
--------------------------------------------------------------------------------
/nestedObjects/main.js:
--------------------------------------------------------------------------------
1 | //nested objects = objects inside another objects.
2 | // allow you to represent more complex data structrues
3 | // Child object is enclosed by a Parent object
4 |
5 | // Person{Address{}, ContactInfo{}}
6 | // ShoppingCart{Keyboard{}, Mouse{}, Monitor{}}
7 |
8 | class Person{ //parent class
9 |
10 | constructor(name, age, ...address){
11 | this.name = name;
12 | this.age = age;
13 | this.address = new Address(...address); //calling constructor of address class
14 | }
15 | }
16 |
17 | class Address{ //child class
18 |
19 | constructor(street, city, country){
20 | this.street = street;
21 | this.city = city;
22 | this.country = country;
23 | }
24 | }
25 |
26 | //constructing person objects
27 |
28 | const person1 = new Person("Spongebob", 30, "124 Conch St.",
29 | "Bikini Bottom",
30 | "Int. Waters");
31 |
32 | const person2 = new Person("Patrick", 37, "128 Conch St.",
33 | "Bikini Bottom",
34 | "Int. Waters");
35 |
36 | const person3 = new Person("Squidward", 45, "126 Conch St.",
37 | "Bikini Bottom",
38 | "Int. Waters");
39 |
40 | console.log(person1.name);
41 | console.log(person1.age);
42 | console.log(person1.address);
43 | console.log(person1.address.street);
44 | console.log(person1.address.city);
45 | console.log(person1.address.country); //accessing a property of nested object
--------------------------------------------------------------------------------
/callback hell/main.js:
--------------------------------------------------------------------------------
1 | // Callback Hell = Situation in JavaScript where callbacks
2 | // are nested within other callbacks to the
3 | // degree where the code is difficult to read.
4 | // Old pattern to handle asynchronous functions.
5 | // Use Promises + async/await to avoid Callback Hell
6 |
7 | // asynchronus function = can be completed an any time/ they're unordered
8 | // synchronous function = have order
9 |
10 |
11 | function task1(callback){ //passing argument as callback is necessary to make this code synchronous
12 |
13 | setTimeout(() =>{
14 | console.log("task 1 complete");
15 | callback(); //pass in the callback
16 | }, 2000); //two argument is a callback and time in milliseconds, to make code synchronous
17 |
18 | }
19 |
20 | function task2(callback){
21 |
22 | setTimeout(() =>{
23 | console.log("task 2 complete");
24 | callback();
25 | }, 1000);
26 | }
27 |
28 | function task3(callback){
29 |
30 | setTimeout(() =>{
31 | console.log("task 3 complete");
32 | callback();
33 | }, 3000);
34 | }
35 |
36 | function task4(callback){
37 |
38 | setTimeout(() =>{
39 | console.log("task 4 complete");
40 | callback();
41 | }, 1500);
42 | }
43 | //doing in asynch
44 | /*
45 | task1();
46 | task2();
47 | task3();
48 | task4();
49 |
50 | console.log("all task complete");
51 | */
52 |
53 | //doing in synch using arrow function, once task 1 is complete passin the callback to task 2
54 | task1(() => {
55 | task2(() => {
56 | task3(() => {
57 | task4(() => console.log("all task complete"));
58 |
59 | })
60 | });
61 | })
62 |
63 |
64 |
--------------------------------------------------------------------------------
/calculator/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
16 | 
17 |