Skip to content

self #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emodo merged 1 commit into from
Mar 10, 2017
Merged

self #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 90 additions & 0 deletions 01 - JavaScript Drum Kit/index-SELF.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

<script>
const keys = document.querySelectorAll('.key');

document.addEventListener('keydown', keydown, false);

function keydown(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio || e.repeat) {
return;
}

key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}

function removeTransition(e) {
if (e.propertyName !== 'transform') {
return;
}

this.classList.remove('playing');
}

keys.forEach(key => key.addEventListener('transitionend', removeTransition));
</script>


</body>
</html>
108 changes: 108 additions & 0 deletions 02 - JS and CSS Clock/index-SELF.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
</head>
<body>


<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>


<style>
html {
background:#018DED;
background-size:cover;
font-family:'helvetica neue';
text-align: center;
font-size: 10px;
}

body {
margin: 0;
font-size: 2rem;
display:flex;
flex:1;
min-height: 100vh;
align-items: center;
}

.clock {
width: 30rem;
height: 30rem;
border:20px solid white;
border-radius:50%;
margin:50px auto;
position: relative;
padding:2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translate(-3px, -3px); /* account for the height of the clock hands */
}

.hand {
width:50%;
height:6px;
background: #d50000;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0;
transform: rotate(-90deg);
transition: all .3s;
}

.hour-hand {
width: 40%;
background: #ff6d00;
}

.min-hand {
width: 48%;
background: #00bfa5;
}
</style>

<script>
var transformProp = (function(){
var testEl = document.createElement('div');
if(testEl.style.transform == null) {
var vendors = ['Webkit', 'Moz', 'ms'];
for(var vendor in vendors) {
if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
return vendors[vendor] + 'Transform';
}
}
}
return 'transform';
})();

setInterval(clock, 1000);

function clock() {
const now = new Date();
const minutes =
document.querySelector('.second-hand').style[transformProp] = `rotate(${now.getSeconds() / 60 * 360 - 90}deg)`;
document.querySelector('.min-hand').style[transformProp] = `rotate(${(now.getMinutes() / 60 * 360) + now.getSeconds() / 60 * 6 - 90}deg)`;
document.querySelector('.hour-hand').style[transformProp] = `rotate(${(now.getHours() / 12 * 360) + now.getMinutes() / 60 * 30 - 90}deg)`;
}

</script>
</body>
</html>
74 changes: 74 additions & 0 deletions 03 - CSS Variables/index-SELF.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>

<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

img {
padding: var(--spacing);
filter: blur(var(--blur));
background: var(--base);
}

.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/

body {
text-align: center;
}

body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}

.controls {
margin-bottom: 50px;
}

input {
width:100px;
}
</style>

<script>
const inputs = document.querySelectorAll('.controls input');
inputs.forEach(input => input.addEventListener('input', onChange));
function onChange(e) {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
</script>

</body>
</html>
97 changes: 97 additions & 0 deletions 04 - Array Cardio Day 1/index-SELF.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Cardio 💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// Get your shorts on - this is an array workout!
// ## Array Cardio Day 1

// Some data we can work with

const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];

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'];

// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600) );
// Array.prototype.map()
// 2. Give us an array of the inventors' first and last names
const fandl = inventors.map((inventor) => `${inventor.first} ${inventor.last}`);

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
const birthdate = inventors.sort((a, b) => {
return b.year - a.year;
})

// Array.prototype.reduce()
// 4. How many years did all the inventors live?

const live = inventors.reduce((total, inventor) => {
return total + (inventor.passed - inventor.year);
}, 0);

// lived

const lived = inventors.reduce((total, inventor) => {
total.push(Object.assign({}, inventor, {
lived: inventor.passed - inventor.year
}));
return total;
}, []);

// 5. Sort the inventors by years lived

const yearsLived = lived.sort((a, b) => b.lived - a.lived);

// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris


// 7. sort Exercise
// Sort the people alphabetically by last name
// const peopleMap = people
// .map(peo => peo.split(', '))
// .reduce((next, prev) =>{
// next.push(prev[1]);
// return next;
// });
// console.log(peopleMap.sort());
const alpha = people.sort((lastOne, nextOne) => {
const [aLast, aFirst] = lastOne.split(', ');
const [bLast, bFirst] = nextOne.split(', ');
return aLast > bLast ? 1 : -1;
});

// 8. Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
const transportation = data.reduce((obj, item) => {
if (!obj[item]) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
console.log(transportation);
</script>
</body>
</html>
Loading