Skip to content

Commit a94dfef

Browse files
author
nrvarun
committed
Day 4 & 5 completed
1 parent 84d4b5b commit a94dfef

4 files changed

Lines changed: 112 additions & 13 deletions

File tree

04 - Array Cardio Day 1/index-START.html

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,32 +29,91 @@
2929

3030
const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
3131

32-
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
32+
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
3333

3434
// Array.prototype.filter()
3535
// 1. Filter the list of inventors for those who were born in the 1500's
36+
const result = inventors.filter(function(inventor) {
37+
if (inventor.year >1500 && inventor.year<=1599) {
38+
return true;
39+
}
40+
});
41+
42+
console.table(result);
3643

3744
// Array.prototype.map()
3845
// 2. Give us an array of the inventors' first and last names
46+
const inventorFirstAndLast = inventors.map(function(inventor, item) {
47+
return `${inventor.first} ${inventor.last}`;
48+
});
49+
50+
console.log(inventorFirstAndLast);
3951

4052
// Array.prototype.sort()
4153
// 3. Sort the inventors by birthdate, oldest to youngest
54+
const sorted = inventors.sort(function (first, last) {
55+
/* body... */
56+
if (first.year > last.year) {
57+
return 1;
58+
}
59+
});
60+
61+
console.table(sorted);
4262

4363
// Array.prototype.reduce()
4464
// 4. How many years did all the inventors live?
45-
65+
const total = inventors.reduce(function(total, inventor) {
66+
return total + (inventor.passed - inventor.year);
67+
}, 0);
68+
console.log(total);
4669
// 5. Sort the inventors by years lived
70+
const sortByAge = inventors.sort(function(a,b) {
71+
const ageOfFirst = a.passed - a.year;
72+
const ageOfLast = b.passed - b.year;
73+
if (ageOfFirst > ageOfLast) {
74+
return 1;
75+
}
76+
});
77+
console.table(sortByAge);
4778

4879
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
4980
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
50-
81+
/*const category = document.querySelector('.mw-category');
82+
const links = Array.from(category.querySelectorAll('.mw-category a'));
83+
const streetNames = links.map(function(index, elem) {
84+
const linkContent = index.innerText;
85+
return linkContent;
86+
});
87+
const filteredNames = streetNames.filter(function(streetName) {
88+
return streetName.includes('de');
89+
});
90+
console.log(filteredNames);*/
5191

5292
// 7. sort Exercise
5393
// Sort the people alphabetically by last name
94+
const alphaSorted = people.sort(function(firstOne, nextOne) {
95+
96+
const [alast, afirst] = firstOne.split(', ');
97+
const [blast, bfirst] = nextOne.split(', ');
98+
return alast > blast ? 1 : -1;
99+
});
100+
console.log(alphaSorted);
54101

55102
// 8. Reduce Exercise
56103
// Sum up the instances of each of these
57-
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
104+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'varun','varun'];
105+
106+
const summedUp = data.reduce(function(obj, item){
107+
if(!obj[item]){
108+
obj[item] = 0;
109+
}
110+
111+
obj[item]++;
112+
return obj;
113+
114+
},{});
115+
116+
console.log(summedUp);
58117

59118
</script>
60119
</body>

05 - Flex Panel Gallery/index-START.html

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,15 @@
2424
.panels {
2525
min-height:100vh;
2626
overflow: hidden;
27+
display: flex;
2728
}
2829

2930
.panel {
31+
flex: 1;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
3036
background:#6B0F9C;
3137
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
3238
color:white;
@@ -53,7 +59,11 @@
5359
.panel > * {
5460
margin:0;
5561
width: 100%;
56-
transition:transform 0.5s;
62+
flex: 1 0 auto;
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
transition: transform 0.5s;
5767
}
5868

5969
.panel p {
@@ -62,13 +72,24 @@
6272
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
6373
font-size: 2em;
6474
}
75+
.panel p:first-child {
76+
transform: translateY(-100%);
77+
}
78+
.panel p:last-child {
79+
transform: translateY(100%);
80+
}
6581
.panel p:nth-child(2) {
6682
font-size: 4em;
6783
}
68-
69-
.panel.open {
84+
.open {
85+
flex: 5;
7086
font-size:40px;
7187
}
88+
.open-active > p:last-child,
89+
.open-active > p:first-child {
90+
font-size: 1em;
91+
transform: translateY(0);
92+
}
7293

7394
.cta {
7495
color:white;
@@ -107,7 +128,21 @@
107128
</div>
108129

109130
<script>
110-
131+
const panels = document.querySelectorAll('.panel');
132+
133+
panels.forEach( function(panel) {
134+
panel.addEventListener('click', enlargePanel);
135+
panel.addEventListener('transitionend', showText);
136+
});
137+
138+
function enlargePanel(){
139+
this.classList.toggle('open');
140+
}
141+
function showText(e){
142+
if(e.propertyName.includes('flex')) {
143+
this.classList.toggle('open-active');
144+
}
145+
}
111146
</script>
112147

113148

06 - Type Ahead/index-FINISHED.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@
99

1010
<form class="search-form">
1111
<input type="text" class="search" placeholder="City or State">
12-
<ul class="suggestions">
13-
<li>Filter for a city</li>
14-
<li>or a state</li>
15-
</ul>
12+
<div class="autocomplete">
13+
<ul class="suggestions">
14+
<li>Filter for a city</li>
15+
<li>or a state</li>
16+
</ul>
17+
</div>
1618
</form>
1719
<script>
1820
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

06 - Type Ahead/style.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@
3333
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
3434
}
3535

36-
36+
.autocomplete {
37+
max-height: 384px;
38+
overflow: hidden;
39+
}
3740
.suggestions {
3841
margin: 0;
3942
padding: 0;

0 commit comments

Comments
 (0)