Skip to content

Commit c635af0

Browse files
anoffanoff
committed
1 parent 65f097d commit c635af0

File tree

2 files changed

+237
-0
lines changed

2 files changed

+237
-0
lines changed

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<title>Array Cardio 💪</title>
6+
<scriptsrc="http://localhost:35729/livereload.js"></script>
7+
</head>
8+
<body>
9+
<script>
10+
// Get your shorts on - this is an array workout!
11+
// ## Array Cardio Day 1
12+
13+
// Some data we can work with
14+
15+
constinventors=[
16+
{first: 'Albert',last: 'Einstein',year: 1879,passed: 1955},
17+
{first: 'Isaac',last: 'Newton',year: 1643,passed: 1727},
18+
{first: 'Galileo',last: 'Galilei',year: 1564,passed: 1642},
19+
{first: 'Marie',last: 'Curie',year: 1867,passed: 1934},
20+
{first: 'Johannes',last: 'Kepler',year: 1571,passed: 1630},
21+
{first: 'Nicolaus',last: 'Copernicus',year: 1473,passed: 1543},
22+
{first: 'Max',last: 'Planck',year: 1858,passed: 1947}
23+
];
24+
25+
constflavours=['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'];
26+
27+
constpeople=['Blake, William','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'];
28+
29+
// Array.prototype.filter()
30+
// 1. Filter the list of inventors for those who were born in the 1500's
31+
constoldies=inventors.filter(elm=>elm.year<1600&&elm.year>=1500);
32+
console.table(oldies);
33+
34+
// Array.prototype.map()
35+
// 2. Give us an array of the inventory first and last names
36+
constnames=inventors.map(elm=>elm.first+' '+elm.last);
37+
console.log(names);
38+
39+
// Array.prototype.sort()
40+
// 3. Sort the inventors by birthdate, oldest to youngest
41+
constsorted=inventors.sort((a,b)=>a.year>b.year);
42+
console.table(sorted);
43+
44+
// Array.prototype.reduce()
45+
// 4. How many years did all the inventors live?
46+
constlivespan=inventors.reduce((p,c)=>p+(c.passed-c.year),0);
47+
console.table(livespan)
48+
49+
// 5. Sort the inventors by years lived
50+
constsortedAlive=inventors
51+
.map(elm=>Object.assign(elm,{livespan: elm.passed-elm.year}))
52+
.sort((a,b)=>a.livespan<b.livespan);
53+
console.table(sortedAlive);
54+
55+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
56+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
57+
// > should be run on the wikipedia console
58+
constblvds=Array.from(document.querySelectorAll('.mw-category a'))
59+
.map(elm=>elm.textContent)
60+
.filter(elm=>elm.indexOf('de')>-1);
61+
62+
// 7. sort Exercise
63+
// Sort the people alphabetically by last name
64+
constsortedLast=people.sort((a,b)=>{
65+
constaLast=a.split(', ')[0];
66+
constbLast=b.split(', ')[0];
67+
returnaLast>bLast ? 1 : -1;
68+
});
69+
console.table(sortedLast);
70+
71+
// 8. Reduce Exercise
72+
// Sum up the instances of each of these
73+
constdata=['car','car','truck','truck','bike','walk','car','van','bike','walk','car','van','car','truck'];
74+
constcnt=data.reduce((p,c)=>{
75+
if(!p[c]){
76+
p[c]=0;
77+
}
78+
p[c]++;
79+
returnp;
80+
},{});
81+
console.table(cnt);
82+
</script>
83+
</body>
84+
</html>

‎05 - Flex Panel Gallery/index.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<title>Flex Panels 💪</title>
6+
<linkhref='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
<scriptsrc="http://localhost:35729/livereload.js"></script>
8+
</head>
9+
<body>
10+
<style>
11+
html{
12+
box-sizing: border-box;
13+
background:#ffc600;
14+
font-family:'helvetica neue';
15+
font-size:20px;
16+
font-weight:200;
17+
}
18+
body{
19+
margin:0;
20+
}
21+
*,*:before,*:after{
22+
box-sizing: inherit;
23+
}
24+
25+
.panels{
26+
min-height:100vh;
27+
overflow: hidden;
28+
display: flex;
29+
}
30+
31+
.panel{
32+
background:#6B0F9C;
33+
box-shadow:inset 0005pxrgba(255,255,255,0.1);
34+
color:white;
35+
text-align: center;
36+
align-items:center;
37+
/* Safari transitionend event.propertyName === flex */
38+
/* Chrome + FF transitionend event.propertyName === flex-grow */
39+
transition:
40+
font-size 0.7scubic-bezier(0.61,-0.19,0.7,-0.11),
41+
flex 0.7scubic-bezier(0.61,-0.19,0.7,-0.11),
42+
background 0.2s;
43+
font-size:20px;
44+
background-size:cover;
45+
background-position:center;
46+
flex:1;
47+
justify-content: center;
48+
align-items: center;
49+
display: flex;
50+
flex-direction: column;
51+
}
52+
53+
54+
.panel1{background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500)}
55+
.panel2{background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500)}
56+
.panel3{background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d)}
57+
.panel4{background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500)}
58+
.panel5{background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500)}
59+
60+
.panel>*{
61+
margin:0;
62+
width:100%;
63+
transition:transform 0.5s;
64+
border:1px solid red;
65+
flex:10 auto;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
}
70+
71+
.panel>*:first-child{
72+
transform:translateY(-100%);
73+
}
74+
.panel.open-active>*:first-child{
75+
transform:translateY(0%);
76+
}
77+
78+
.panel>*:last-child{
79+
transform:translateY(100%);
80+
}
81+
.panel.open-active>*:last-child{
82+
transform:translateY(0%);
83+
}
84+
85+
.panelp{
86+
text-transform: uppercase;
87+
font-family:'Amatic SC', cursive;
88+
text-shadow:004pxrgba(0,0,0,0.72),0014pxrgba(0,0,0,0.45);
89+
font-size:2em;
90+
}
91+
.panelp:nth-child(2){
92+
font-size:4em;
93+
}
94+
95+
.panel.open{
96+
flex:5;
97+
font-size:40px;
98+
}
99+
100+
.cta{
101+
color:white;
102+
text-decoration: none;
103+
}
104+
105+
</style>
106+
107+
108+
<divclass="panels">
109+
<divclass="panel panel1">
110+
<p>Hey</p>
111+
<p>Let's</p>
112+
<p>Dance</p>
113+
</div>
114+
<divclass="panel panel2">
115+
<p>Give</p>
116+
<p>Take</p>
117+
<p>Receive</p>
118+
</div>
119+
<divclass="panel panel3">
120+
<p>Experience</p>
121+
<p>It</p>
122+
<p>Today</p>
123+
</div>
124+
<divclass="panel panel4">
125+
<p>Give</p>
126+
<p>All</p>
127+
<p>You can</p>
128+
</div>
129+
<divclass="panel panel5">
130+
<p>Life</p>
131+
<p>In</p>
132+
<p>Motion</p>
133+
</div>
134+
</div>
135+
136+
<script>
137+
constpanels=document.querySelectorAll('.panel');
138+
functiontoggleOpen(){
139+
this.classList.toggle('open');
140+
}
141+
functiontoggleActive(e){
142+
if(!e.propertyName.includes('flex-grow'))return;
143+
console.log(e.propertyName);
144+
this.classList.toggle('open-active');
145+
}
146+
panels.forEach(elm=>elm.addEventListener('click',toggleOpen));
147+
panels.forEach(elm=>elm.addEventListener('transitionend',toggleActive));
148+
</script>
149+
150+
151+
152+
</body>
153+
</html>

0 commit comments

Comments
(0)