Skip to content

Commit 1fe48da

Browse files
intermediatedevelopersintermediatedevelopers
committed
Added files from course repo
1 parent e355e1e commit 1fe48da

File tree

7 files changed

+443
-0
lines changed

7 files changed

+443
-0
lines changed

‎arrays.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Arrays</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
<body>
11+
<script>
12+
const names = ['sharif', 'kelly', 'maddox', 'jane'];
13+
const names2 = [...names, 'farouk'];
14+
names2.unshift('maggie');
15+
const names3 = ['amir', ...names2];
16+
// mutation method
17+
let namesBackwards = names.reverse();
18+
// now names is also reversed, so namesBackwards and names are the same
19+
// as such, we do not necessarily need a second array:
20+
names.reverse();
21+
// also note that both arrays have now been reversed twice because their pointers are linked the same way objects are (pass by reference)
22+
console.log(names, namesBackwards);
23+
24+
// immutable
25+
const sliced = names.slice(1,3);
26+
console.log(sliced);
27+
console.log(names);
28+
29+
// make a copy so the values are not mutated
30+
namesBackwards = [...names];
31+
namesBackwards.reverse();
32+
console.log(names, namesBackwards);
33+
34+
console.log(names3);
35+
names3.splice(2,2);
36+
console.log(names3);
37+
38+
const bands = ['parkway drive', 'slayer', 'killswitch engage', 'oceans ate alaska'];
39+
const newBands = [
40+
...bands.slice(0,2),
41+
'bring me the horizon', 'a day to remember',
42+
...bands.slice(2)
43+
];
44+
console.log(newBands);
45+
const bands2 = [
46+
...newBands.slice(0,3),
47+
...newBands.slice(4)
48+
];
49+
console.log(bands2);
50+
51+
const comments = [
52+
{ text: 'Cool beans', id: 123 },
53+
{ text: 'Sick!', id: 124 },
54+
{ text: 'Love it', id: 125 },
55+
{ text: 'Sweet', id: 126 },
56+
{ text: 'Hot coleslaw', id: 127 },
57+
{ text: 'Whatever, man', id: 128 },
58+
];
59+
function deleteComment(id, listOfComments){
60+
// find the index of the item in the array
61+
const indexToDelete = listOfComments.findIndex(comment => (comment.id === id));
62+
// make a new array without that item in it
63+
const withoutDeleted = [
64+
...listOfComments.slice(0, indexToDelete),
65+
...listOfComments.slice(indexToDelete + 1)
66+
];
67+
// return our new array
68+
return withoutDeleted;
69+
}
70+
const sharifIndex = names.findIndex(name => (name === 'sharif'));
71+
console.log(names[sharifIndex]);
72+
const updatedComments = deleteComment(127, comments);
73+
console.log(updatedComments);
74+
</script>
75+
</body>
76+
</html>

‎exercises/Arrays/array-methods.html

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>
8+
Array Methods
9+
</title>
10+
<link rel="stylesheet" href="../../base.css">
11+
</head>
12+
13+
<body>
14+
<script>
15+
const toppings = ['Mushrooms ', 'Tomatoes', 'Eggs', 'Chili', 'Lettuce', 'Avocado', 'Chiles', 'Bacon', 'Pickles', 'Onions', 'Cheese'];
16+
const buns = ['egg', 'wonder', 'brioche'];
17+
const meats = {
18+
beyond: 10,
19+
beef: 5,
20+
pork: 7
21+
};
22+
const prices = {
23+
hotDog: 453,
24+
burger: 765,
25+
sausage: 634,
26+
corn: 234,
27+
};
28+
const orderTotals = [342, 1002, 523, 34, 634, 854, 1644, 2222];
29+
const feedback = [
30+
{ comment: 'Love the burgs', rating: 4 },
31+
{ comment: 'Horrible Service', rating: 2 },
32+
{ comment: 'Smoothies are great, liked the burger too', rating: 5 },
33+
{ comment: 'Ambiance needs work', rating: 3 },
34+
{ comment: 'I DONT LIKE BURGERS', rating: 1 },
35+
];
36+
37+
// ******************************************************************
38+
// Static Methods
39+
// ******************************************************************
40+
41+
// Array.of();
42+
43+
// Make a function that creates a range from x to y with Array.from();
44+
function createRange(start, end){
45+
const range = Array.from({length: end - start + 1}, function(_item, index){
46+
return index + start;
47+
});
48+
return range;
49+
}
50+
const myRange = createRange(5, 10);
51+
52+
// Check if the last array you created is really an array with Array.isArray();
53+
console.log(Array.isArray(myRange));
54+
55+
// Take the meats object and make three arrays with Object.entries(), Object.keys, Object.values()
56+
console.log(Object.entries(meats));
57+
console.log(Object.keys(meats));
58+
console.log(Object.values(meats));
59+
60+
Object.values(meats).forEach(quantity =>{
61+
console.log(quantity);
62+
});
63+
64+
// ******************************************************************
65+
// Instance Methods
66+
// ******************************************************************
67+
68+
69+
// Display all bun types with " or " - use join()
70+
console.log(buns.join(' or '));
71+
72+
73+
74+
// We have a string "hot dogs,hamburgers,sausages,corn"
75+
// - use split() to turn it into an array
76+
const foodString = 'hot dogs,hamburgers,sausages,corn';
77+
console.log(foodString.split(','));
78+
console.log(foodString.split('')); // woah!
79+
80+
// take the last item off toppings with pop()
81+
const poppedTopping = toppings.pop();
82+
console.log(`you popped the ${poppedTopping}!`);
83+
84+
// add it back with push()
85+
toppings.push(poppedTopping);
86+
console.log(toppings);
87+
88+
// take the first item off toppings with shift()
89+
const shiftedTopping = toppings.shift();
90+
console.log(shiftedTopping);
91+
console.log(toppings);
92+
93+
// add it back in with unshift()
94+
toppings.unshift(shiftedTopping);
95+
console.log(toppings);
96+
97+
98+
99+
// Do the last four,but immutable (with spreads and new variables)
100+
101+
// take the last item off toppings
102+
let newToppings = [
103+
...toppings.slice(0, toppings.length - 1)
104+
];
105+
console.log(newToppings);
106+
107+
// add it back
108+
newToppings = [ ...toppings ];
109+
console.log(newToppings);
110+
111+
// take the first item off toppings
112+
newToppings = [...toppings.slice(1)];
113+
console.log(newToppings);
114+
115+
// Make a copy of the toppings array with slice()
116+
const sliceCopyToppings = toppings.slice(0);
117+
console.log(sliceCopyToppings);
118+
119+
// Make a copy of the toppings array with a spread
120+
const spreadCopyToppings = [...toppings];
121+
console.log(spreadCopyToppings);
122+
123+
// take out items 3 to 5 of your new toppings array with splice()
124+
spreadCopyToppings.splice(3,5);
125+
126+
// find the index of Avocado with indexOf() / lastIndexOf()
127+
const avoIndex = toppings.indexOf('Avocado');
128+
129+
// Check if hot sauce is in the toppings with includes()
130+
const containsHotSauce = toppings.includes('Hot Sauce');
131+
132+
// add it if it's not
133+
if(!containsHotSauce){
134+
toppings.push('Hot Sauce');
135+
}
136+
137+
// flip those toppings around with reverse()
138+
const reversedToppings = [...toppings].reverse();
139+
140+
// Callback Methods
141+
142+
// find the first rating that talks about a burger with find()
143+
function findBurgRating(theFeedback){
144+
console.log(theFeedback);
145+
}
146+
const burgRating = feedback.find(findBurgRating);
147+
// const burgRating = feedback.find(review => review.comment.includes('burg'));
148+
console.log(burgRating);
149+
150+
// find all ratings that are above 2 with filter()
151+
// find all ratings that talk about a burger with filter()
152+
// Remove the one star rating however you like!
153+
// check if there is at least 5 of one type of meat with some()
154+
// make sure we have at least 3 of every meat with every()
155+
// sort the toppings alphabetically with sort()
156+
// sort the order totals from most expensive to least with .sort()
157+
// Sort the prices with sort()
158+
159+
// Looping Methods
160+
161+
162+
</script>
163+
</body>
164+
165+
</html>

‎intervals.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Intervals and Timers</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
<body>
11+
<script>
12+
13+
function buzzer(){
14+
console.log('ERRRRRRNNNNG');
15+
}
16+
17+
// console.log('starting');
18+
// setTimeout(buzzer,2000);
19+
// console.log('finishing');
20+
21+
22+
function setImmediateInterval(func, ms){
23+
// right away, call the funcion (func)
24+
func();
25+
// run a regular interval
26+
return setInterval(func, ms);
27+
}
28+
29+
// setImmediateInterval(buzzer, 2000);
30+
let destroyed = false;
31+
32+
function destroy(){
33+
destroyed = true;
34+
document.body.innerHTML = `<p>DESTROYED</p>`;
35+
}
36+
37+
let bombTimer = setTimeout(destroy, 5000);
38+
39+
window.addEventListener('click', function(){
40+
clearTimeout(bombTimer); // stop the timer from running
41+
if(!destroyed){
42+
console.log('You clicked the page and saved it from destruction!');
43+
bombTimer = setTimeout(destroy, 5000);
44+
}
45+
else{
46+
console.log('You are too late. The page has been destroyed');
47+
}
48+
})
49+
50+
const shamrockInterval = setInterval(function() {
51+
console.log(`☘ Luck o'the Irish, lad! ☘`);
52+
console.log('Kiss me blarnacles');
53+
}, 500);
54+
55+
setTimeout(function(){
56+
clearInterval(shamrockInterval);
57+
}, 5000);
58+
</script>
59+
</body>
60+
</html>

‎maps.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Maps</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
<body>
11+
<ul class="prizes">
12+
13+
</ul>
14+
<script>
15+
const person1 = {
16+
name: 'Sharif',
17+
age: 33,
18+
};
19+
const myMap = new Map();
20+
// .set()
21+
myMap.set('name', 'sharif');
22+
myMap.set(20, 'This is a number');
23+
myMap.set(person1, 'Really Cool');
24+
25+
// .get()
26+
console.log(myMap.get(person1));
27+
28+
const prizes = new Map();
29+
const score = 100;
30+
prizes.set(100, 'Bear');
31+
prizes.set(200, 'Duck');
32+
prizes.set(300, 'Car');
33+
console.log(`you win a ${prizes.get(score)}`);
34+
35+
const ul = document.querySelector('.prizes');
36+
for(const [points, prize] of prizes){
37+
const li = `<li>${points} - ${prize}</li>`;
38+
ul.insertAdjacentHTML('beforeend', li);
39+
}
40+
</script>
41+
</body>
42+
</html>

‎objects.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Objects</title>
8+
</head>
9+
<body>
10+
<script src="https://unpkg.com/lodash"></script>
11+
<script>
12+
const person1 = {
13+
first: 'sharif',
14+
last: 'elkassed',
15+
}
16+
const person2 = {
17+
first: 'kelly',
18+
last: 'stone',
19+
}
20+
const person3 = person1;
21+
person3.first = 'maddox';
22+
person1.last = 'kefiltefish';
23+
console.log(person1);
24+
console.log(person3);
25+
26+
</script>
27+
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)