Skip to content
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

Jump to bottom

Changes commited #662

Closed
wants to merge 1 commit into from
Closed

Changes commited #662

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
152 changes: 91 additions & 61 deletions 01 - JavaScript Drum Kit/index-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="https://fav.farm/🔥" />
</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>
<head>
<meta charset="UTF-8" />
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="https://fav.farm/🔥" />
</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>
<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>

</script>

<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>

</body>
<script>
const keys = document.querySelectorAll(".key");
function removeTransition(e) {
//only check for the transitions that are transformed
if (e.propertyName !== "transform") return;
console.log(e.propertyName);
//this refers to the key
this.classList.remove("playing");
}
function playSound(e) {
//select the audio linked with the key
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
//select the div linked with the keys
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if (!audio) return;
//rewinding audio to start
audio.currentTime = 0;
//play the audio
audio.play();
key.classList.add("playing");
}
/*
The removeTransition function is set as an event handler for the "transitionend" event on each element with
the class "key". When a CSS transition on one of these elements comes to an end, a TransitionEvent object is
created and passed to the event handler function.
The TransitionEvent object contains information about the transition that just ended, such as the name
of the CSS property that was transitioned, the time it took to complete the transition, and other relevant
details.
By logging the event object e inside the removeTransition function, you are able to see the details of
the TransitionEvent and understand more about the transition that just occurred. This allows you to perform
additional actions or make decisions based on the specific details of the transition event.
*/
keys.forEach((key) =>
key.addEventListener("transitionend", removeTransition)
);
window.addEventListener("keydown", playSound);
</script>
</body>
</html>
170 changes: 113 additions & 57 deletions 02 - JS and CSS Clock/index-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>


<head>
<meta charset="UTF-8" />
<title>JS + CSS Clock</title>
<link rel="icon" href="https://fav.farm/🔥" />
</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 class="flex">
<button class="btn start" type="button">Start</button>
<button class="btn stp" type="button">Stop</button>
</div>
</div>

<style>
:root {
--border-radius: 50%;
--hand-width: 6px;
--shadow-color-1: rgba(0, 0, 0, 0.1);
--shadow-color-2: rgba(0, 0, 0, 0.2);
--shadow-color-3: #efefef;
--shadow-inset: inset 0 0 0;
--shadow-blur: 10px;
--shadow: 0 0 0 var(--shadow-color-1),
var(--shadow-inset) 0 0 var(--shadow-color-3),
var(--shadow-inset) 0 var(--shadow-blur) var(--shadow-color-2),
0 var(--shadow-blur) var(--shadow-color-2);
}

<style>
html {
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
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);
}
html {
background: #018ded url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: "helvetica neue";
text-align: center;
font-size: 10px;
}
.flex {
display: flex;
justify-content: space-evenly;
}
body {
margin: 0;
display: flex;
flex: 1;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.clock {
width: 30rem;
height: 30rem;
border: 15px solid white;
border-radius: var(--border-radius);
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow: var(--shadow);
}

.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(
-3px
); /* account for the height of the clock hands */
}

</style>
.hand {
width: 50%;
height: var(--hand-width);
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.btn {
font-size: large;
font-weight: 750;
padding: 5%;
border-radius: 50%;
background-color: #efefef85;
}
.second-hand {
background-color: red;
font-size: 1.5rem;
}
.min-hand {
background-color: blue;
font-size: 2rem;
}
.hour-hand {
background-color: green;
font-size: 40px;
}
</style>

<script>
<script>
const secondHand = document.querySelector(".second-hand");
const minsHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
const start = document.querySelector(".start");
const stp = document.querySelector(".stop");
function setClock() {
var date = new Date();
let hours = date.getHours() % 12 || 12; // to handle 12am as 12pm
let minutes = date.getMinutes();
let seconds = date.getSeconds();

const secondsDegrees = (seconds / 60) * 360 + 90;
const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90;
const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90;

</script>
</body>
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minsHand.style.transform = `rotate(${minutesDegrees}deg)`;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
start.addEventListener("click", () => setInterval(setClock, 1000));
</script>
</body>
</html>