Skip to content

Commit 4388ee4

Browse files
CleverProgrammerCleverProgrammer
committed
Add lessons on API & Classes
1 parent 40414c3 commit 4388ee4

23 files changed

+486
-2
lines changed

‎api/superHero/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>replit</title>
8+
<link href="style.css" rel="stylesheet" type="text/css" />
9+
</head>
10+
11+
<body>
12+
<h2>🌟 Super Hero App</h2>
13+
<p>You can search for a super hero like "batman" or "thanos" or... You can generate a random hero</p>
14+
<input id='searchInput' type="text">
15+
<button id='searchButton'>Search</button>
16+
<button id='newHeroButton'>Random Hero</button>
17+
</br>
18+
<div id='heroImage'><img src="" alt=""></div>
19+
<script src="script.js"></script>
20+
</body>
21+
22+
</html>

‎api/superHero/script.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// https://superheroapi.com/api/access-token/character-id
2+
3+
const SUPERHERO_TOKEN = '10223569763528853'
4+
const BASE_URL = `https://superheroapi.com/api.php/${SUPERHERO_TOKEN}`
5+
6+
const newHeroButton = document.getElementById('newHeroButton')
7+
8+
const heroImageDiv = document.getElementById('heroImage')
9+
10+
const searchButton = document.getElementById('searchButton')
11+
12+
const searchInput = document.getElementById('searchInput')
13+
14+
const getSuperHero = (id, name) => {
15+
// name 👉 base_url/search/batman
16+
// json.results[0].image.url
17+
// id: 👉 base_url/id
18+
// json.image.url
19+
fetch(`${BASE_URL}/${id}`)
20+
.then(response => response.json())
21+
.then(json => {
22+
console.log(json.powerstats)
23+
const superHero = json
24+
showHeroInfo(superHero)
25+
})
26+
}
27+
28+
const statToEmoji = {
29+
intelligence: '🧠',
30+
strength: '💪',
31+
speed: '⚡',
32+
durability: '🏋️‍♂️',
33+
power: '📊',
34+
combat: '⚔️',
35+
}
36+
37+
const showHeroInfo = (character) => {
38+
const name = `<h2>${character.name}</h2>`
39+
40+
const img = `<img src="${character.image.url}" height=200 width=200/>`
41+
42+
const stats = Object.keys(character.powerstats).map(stat => {
43+
return `<p>${statToEmoji[stat]} ${stat.toUpperCase()}: ${character.powerstats[stat]}</p>`
44+
}).join('')
45+
46+
heroImageDiv.innerHTML = `${name}${img}${stats}`
47+
}
48+
49+
// <p>💪 Strength: ${json.powerstats.strength}</p><p>🧠 Intelligence: ${json.powerstats.intelligence}</p><p>🧠 Combat: ${json.powerstats.intelligence}</p><p>🧠 Speed: ${json.powerstats.intelligence}</p><p>🧠 Durability: ${json.powerstats.intelligence}</p>
50+
51+
const getSearchSuperHero = (name) => {
52+
console.log(searchInput.value)
53+
fetch(`${BASE_URL}/search/${name}`)
54+
.then(response => response.json())
55+
.then(json => {
56+
const hero = json.results[0]
57+
showHeroInfo(hero)
58+
})
59+
}
60+
61+
const randomHero = () => {
62+
const numberOfHeroes = 731
63+
return Math.floor(Math.random() * numberOfHeroes) + 1
64+
}
65+
66+
newHeroButton.onclick = () => getSuperHero(randomHero())
67+
68+
searchButton.onclick = () => getSearchSuperHero(searchInput.value)

‎classes/banksClass/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>replit</title>
8+
<link href="style.css" rel="stylesheet" type="text/css" />
9+
</head>
10+
11+
<body>
12+
<input type="text" id='amount'>
13+
<button id='deposit'>+Deposit</button>
14+
<button id='withdraw'>-Withdraw</button>
15+
<div id='balance'><p>Balance: 0</p></div>
16+
<script src="script.js"></script>
17+
</body>
18+
19+
</html>

‎classes/banksClass/script.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
class Bank {
2+
constructor(balance) {
3+
this.balance = balance
4+
}
5+
6+
withdraw(amount) {
7+
// guard clause
8+
if (this.balance - amount <= 0) {
9+
console.log('❌ You cannot withdraw more than what you have!')
10+
console.log({balance: this.balance})
11+
return
12+
}
13+
14+
this.balance -= amount
15+
console.log('withdrew', `$${amount}`)
16+
console.log({balance: this.balance})
17+
}
18+
19+
deposit(amount) {
20+
this.balance += amount
21+
console.log('deposited', `$${amount}`)
22+
console.log({balance: this.balance})
23+
}
24+
}
25+
26+
const qaziChecking = new Bank(0)
27+
// console.log(qaziChecking.balance)
28+
// qaziChecking.deposit(10000)
29+
// qaziChecking.deposit(10000)
30+
// qaziChecking.deposit(10000)
31+
// qaziChecking.withdraw(1000)
32+
// qaziChecking.withdraw(20000)
33+
// qaziChecking.withdraw(5000)
34+
// qaziChecking.withdraw(5000)
35+
36+
const depositButton = document.getElementById('deposit')
37+
const withdrawButton = document.getElementById('withdraw')
38+
const amountInput = document.getElementById('amount')
39+
const balanceDiv = document.getElementById('balance')
40+
41+
depositButton.onclick = () => {
42+
const amount = Number(amountInput.value)
43+
qaziChecking.deposit(amount)
44+
balanceDiv.innerText = `Balance: ${qaziChecking.balance}`
45+
}
46+
47+
withdrawButton.onclick = () => {
48+
const amount = Number(amountInput.value)
49+
qaziChecking.withdraw(amount)
50+
balanceDiv.innerText = `Balance: ${qaziChecking.balance}`
51+
}

‎classes/carClass/script.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// classes: Main topic
2+
// methods
3+
// properties
4+
5+
// this
6+
class Car {
7+
constructor(name, color, topSpeed) {
8+
// properties
9+
this.name = name
10+
this.color = color
11+
this.topSpeed = topSpeed
12+
this.currentSpeed = 0;
13+
}
14+
15+
// getters & setters
16+
getCurrentSpeed() {
17+
return currentSpeed
18+
}
19+
20+
zeroToSixty() {
21+
setTimeout(() => {
22+
console.log('pHEW! That was fast!')
23+
this.currentSpeed = 60;
24+
console.log(this.currentSpeed)
25+
}, 3000)
26+
}
27+
28+
drive(speed=10) {
29+
// console.log('just drove 2 miles!')
30+
this.currentSpeed += speed
31+
console.log(`driving speed at ${this.currentSpeed} mph`)
32+
}
33+
34+
brake() {
35+
console.log('braking!')
36+
this.currentSpeed -= 10
37+
}
38+
39+
stop() {
40+
console.log('coming to a screeching halt!')
41+
this.currentSpeed = 0
42+
}
43+
}
44+
45+
// porsche, 'yellow', 250
46+
47+
const ferrari = new Car('ferrari', 'red', 250)
48+
ferrari.drive()
49+
ferrari.drive()
50+
ferrari.drive()
51+
ferrari.drive()
52+
ferrari.drive()
53+
console.log(ferrari.currentSpeed)
54+
ferrari.brake()
55+
ferrari.stop()
56+
console.log(ferrari.currentSpeed)
57+
58+
const porsche = new Car('Porsche', 'yellow', 250)
59+
console.log(porsche.name)
60+
console.log(porsche.color)
61+
console.log(porsche.topSpeed)
62+
// const nums = [1, 2, 3, 4, 5]
63+
// nums.forEach(_ => porsche.drive())
64+
porsche.drive(40)
65+
porsche.drive(80)
66+
console.log(porsche.currentSpeed)
67+
porsche.zeroToSixty()
68+
porsche.stop()
69+
console.log(porsche.currentSpeed)
70+
71+
// console.log(ferrari.name)
72+
// console.log(ferrari.color)
73+
// console.log(ferrari.topSpeed)
74+
75+
// console.log(ferrari.currentSpeed)
76+
77+
// ferrari.drive()
78+
// ferrari.brake()
79+
80+
// console.log(ferrari.currentSpeed)
81+
// ferrari.drive()
82+
// console.log(ferrari.currentSpeed)
83+
// ferrari.drive()
84+
// ferrari.drive()
85+
// console.log(ferrari.currentSpeed)
86+
// ferrari.zeroToSixty()
87+
// console.log(ferrari.currentSpeed)
88+
89+
// console.log(ferrari)
90+
91+
// you can only have methods inside of classes
92+
// const numbers = [1, 2, 3]
93+
// numbers.push(4) // method
94+
// // console.log(typeof )
95+
// console.log(numbers)
96+
97+
Array.prototype.myPush = function(item) {
98+
this[this.length] = item
99+
return this
100+
}
101+
102+
const fruits = ['🍌', '🍓', '🍪', '🍐', '🍎']
103+
fruits.myPush('🥝')
104+
fruits.myPush('🍪')
105+
fruits.myPush('🍓')
106+
fruits.myPush('🍊')
107+
console.log(fruits)

‎exercises/arraysorting.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// Test you code by forking this repl:
2+
// 👉
3+
4+
15
// Write a function that takes in an array and sort the numbers inside from least to greatest
26

37
function sortArray (array) {

‎exercises/daysinamonth.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// Test you code by forking this repl:
2+
// 👉
3+
14
// Create a function that takes the month and year (as integers)
25
// and returns the number of DAYS in that month
36

‎exercises/findMax.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// Test you code by forking this repl:
2+
// 👉
3+
14
// Write a function that takes in an array of numbers and returns the largest number
25

36
function findMax (array) {

‎exercises/palindromechecker.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// Test you code by forking this repl:
2+
// 👉
3+
4+
15
// Write a function that takes in string and checks if it is a Palindrome
26
// A palindrome is a word that is the same forwards and backwards!
37
// Ex: racecar -> racecar

‎exercises/savingsstrategy.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// Test you code by forking this repl:
2+
// 👉
3+
4+
15
// The 50-30-20 strategy is a simple way to budget
26
// which involves spending 50% of after-tax income on needs,
37
// 30% after tax income on wants,

‎index.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,22 @@ <h3>Lessons</h3>
2525
<a href="dom/red-yellow-green/index.html">DOM - Red Yellow Green Squares</a>
2626
</br>
2727
<a href="api/dogRandom/index.html">API - Get Random Dog</a>
28+
</br>
29+
<a href="api/superHero/index.html">API - Get Super Heroes</a></br>
30+
<a href="classes/banksClass/index.html">Classes - Bank with Deposit & Withdraw Methods</a>
2831

2932
<h3>Project Exercises</h3>
3033
<a href='projects/stopwatch/exercise/index.html'>Stopwatch</a><br>
3134
<a href='projects/rockpaperscissors/exercise/index.html'>Rock Paper Scissors</a><br>
32-
<a href='classes/fightingGame/exercise/index.html'>Figthing Game</a> <br>
35+
<a href='projects/fightingGame/exercise/index.html'>Figthing Game</a> <br>
3336
<a href='projects/tip-calculator/exercise/index.html'>Tip Calculator</a>
3437
<br>
3538
<a href='projects/weather-app/exercise/index.html'>Weather App</a>
3639

3740
<h3>Project Solutions</h3>
3841
<a href='projects/stopwatch/solution/index.html'>Stopwatch</a><br>
3942
<a href='projects/rockpaperscissors/solution/index.html'>Rock Paper Scissors</a><br>
40-
<a href='classes/fightingGame/solution/index.html'>Fighting Game</a></br>
43+
<a href='projects/fightingGame/solution/index.html'>Fighting Game</a></br>
4144
<a href='projects/tip-calculator/solution/index.html'>Tip Calculator</a>
4245
<br>
4346
<a href='projects/weather-app/solution/index.html'>Weather App</a>

0 commit comments

Comments
 (0)