IT2 - Record Player

Developer
Samuel
Size
2,907 Kb
Views
14,168
  1. IT2 - Record Player Previews
  2. IT2 - Record Player HTML Codes
  3. IT2 - Record Player CSS Codes
  4. IT2 - Record Player JS Codes

How do I make an it2 - record player?

What is a it2 - record player? How do you make a it2 - record player? This script and codes were developed by Samuel on 10 November 2022, Thursday.

IT2 - Record Player Previews
IQ Test

IT2 - Record Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT2 - Record Player</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <div id="buttons"> <button data-id="song1">Electric Relaxation</button> <button data-id="song2">Excursions</button> <button data-id="song3">Can I Kick It&#63;</button> <button data-id="stop">Stop</button> </div> <div id="recordplayer"> <div id="record"></div> <div id="needle"></div> </div> <iframe width="1" height="1" src="" frameborder="0"></iframe>
</main> <script src="js/index.js"></script>
</body>
</html>

IT2 - Record Player - Script Codes CSS Codes

/* main */
*:focus { outline: 0;
}
html, body { height: 100%;
}
body { background: #262626; font-family: 'Helvetica Neue', sans-serif; font-size: 62.5%; overflow: hidden;
}
div#buttons { height: auto; margin: 0 auto; width: 500px;
}
main { margin-top: -239px; position: absolute; top: 50vh; width: 100%;
}
button { background: #1c1c1c; border: 0; box-shadow: inset 0 -4px 0 0 #8e2800; color: #fff; font-size: 1em; font-weight: 100; letter-spacing: 0.1em; margin-right: 3px; padding: 20px; text-transform: uppercase; -webkit-transition: background 1s; transition: background 1s;
}
button:nth-child(2) { box-shadow: inset 0 -4px 0 0 #ffb03b;
}
button:nth-child(3) { box-shadow: inset 0 -4px 0 0 #468966;
}
button:last-child { box-shadow: inset 0 -4px 0 0 #000;
}
button:hover { background-color: #8e2800;
}
button:nth-child(2):hover { background-color: #ffb03b;
}
button:nth-child(3):hover { background-color: #468966;
}
button:last-child:hover { background-color: #000;
}
/* player */
div#recordplayer { background: url('https://i.imgsafe.org/fd8f3e4f3f.png') no-repeat center center / contain; height: 386px; margin: 20px auto 0 auto; overflow: inherit; width: 500px;
}
div#record { background: url('https://i.imgsafe.org/fd8f36be33.png') no-repeat center center / contain; height: 330px; margin: 25px 0 0 33px; position: absolute; width: 330px; z-index: 100;
}
div#needle { background: url('https://i.imgsafe.org/fd8f2b6098.png') no-repeat center center / contain; height: 325px; margin: 22px 0 0 358px; position: absolute; -webkit-transform-origin: 57px 80px; transform-origin: 57px 80px; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; width: 80px; z-index: 200;
}
iframe { display: none;
}
/* animations */
@-webkit-keyframes rotation { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotation { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* query */
@media screen and (max-width: 726px) { main { -webkit-transform: scale(0.75); transform: scale(0.75); }
}

IT2 - Record Player - Script Codes JS Codes

function main() { var buttons = document.getElementsByTagName("button"); var needle = document.getElementById("needle"); var record = document.getElementById("record"); var sound = document.getElementsByTagName("iframe")[0]; var src = ['https://www.youtube.com/embed/cG_wNxi8z8o?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1', 'https://www.youtube.com/embed/NZWS6CITutY?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1', 'https://www.youtube.com/embed/71ubKHzujy8?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1' ]; for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function() { if (this.getAttribute("data-id") === "song1") { needle.style.transform = "rotate(38deg)"; if (record.style.animation != "rotation 1.2s infinite linear") { record.style.animation = "rotation 1.2s infinite linear"; } sound.src = ''; setTimeout(function() { sound.src = src[0]; }, 1000); } if (this.getAttribute("data-id") === "song2") { needle.style.transform = "rotate(30deg)"; if (record.style.animation != "rotation 1.2s infinite linear") { record.style.animation = "rotation 1.2s infinite linear"; } sound.src = ''; setTimeout(function() { sound.src = src[1]; }, 1000); } if (this.getAttribute("data-id") === "song3") { needle.style.transform = "rotate(22deg)"; if (record.style.animation != "rotation 1.2s infinite linear") { record.style.animation = "rotation 1.2s infinite linear"; } sound.src = ''; setTimeout(function() { sound.src = src[2]; }, 1000); } if (this.getAttribute("data-id") === "stop") { needle.style.transform = "rotate(0)"; setTimeout(function() { record.style.animationPlayState = "paused"; }, 1000); sound.src = ''; } } }
}
window.onload = function() { main();
}
IT2 - Record Player - Script Codes
IT2 - Record Player - Script Codes
Home Page Home
Developer Samuel
Username SamuelVDP
Uploaded November 10, 2022
Rating 3
Size 2,907 Kb
Views 14,168
Do you need developer help for IT2 - Record Player?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Samuel (SamuelVDP) Script Codes
Name
IT3 - Opdracht 05 - Battery API
IT3 - Opdracht 01 - Drop The Needle
IT3 - Opdracht 04 - Responsive Weekplanner
IT3 - Opdracht 09 - RellaxJS
IT3 - Opdracht 06 - PureCSS
CMT3 - Opdracht 07 - Flickity
CMT3 - Herhalingsoefening 02
CMT3 - Herhalingsoefening 03
CMT3 - Opdracht 02 - OBEY
CMT3 - Herhalingsoefening 01
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!