Skip to content

Dev #123

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

Closed
wants to merge 3 commits into from
Closed

Dev #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94f9659
Fix 01 - JavaScript Drum Kit hold button
Feb 24, 2017
e2c623f
Distinguish between hour and minute hands
Feb 24, 2017
f5c1946
self
Mar 10, 2017
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
2 changes: 1 addition & 1 deletion 01 - JavaScript Drum Kit/index-FINISHED.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
if (!audio || e.repeat) return;

key.classList.add('playing');
audio.currentTime = 0;
Expand Down
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>
15 changes: 8 additions & 7 deletions 02 - JS and CSS Clock/index-FINISHED.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,18 @@
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
transform: translate(-3px, -3px); /* account for the height of the clock hands */
}

.hand {
width:50%;
height:6px;
background:black;
position: absolute;
top:50%;
transform-origin: 100%;
transform: rotate(90deg);
top: 50%;
left: 50%;
transform-origin: 0%;
transform: rotate(-90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
Expand All @@ -78,15 +79,15 @@
const now = new Date();

const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
const secondsDegrees = ((seconds / 60) * 360) - 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) - 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;

const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) - 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

Expand Down
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>
Loading