Hey guys,
One last question: I found a bit of coding that creates a 3D cube and makes it rotate with selected radio buttons. I’m trying to edit it to make buttons with labels rather than the radio buttons and images instead of text. I’m relatively new at JavaScript, but I’ve been able to edit some of it. Could use a suggestion about what else I should change to make it work. Here is the link to the original code:
https://3dtransforms.desandro.com/cube
And this is what I’ve got so far:
<p class="button-group">
<label>
<input type="button" id="btn" name="rotate-cube-side" value="front" checked />
</label>
<label>
<input type="button" id="btn" name="rotate-cube-side" value="right" />
</label>
<label>
<input type="button" id="btn" name="rotate-cube-side" value="back" />
</label>
<label>
<input type="button" id="btn" name="rotate-cube-side" value="left" />
</label>
<label>
<input type="button" id="btn" name="rotate-cube-side" value="top" />
</label>
<label>
<input type="button" id="btn" name="rotate-cube-side" value="bottom" />
</label>
</p>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function () {
var cube = document.querySelector('.cube');
var buttonGroup = document.querySelector('.button-group');
var currentClass = '';
function changeSide() {
var checkedRadio = buttonGroup.querySelector(':checked');
var showClass = 'show-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
}
// set initial side
changeSide();
buttonGroup.addEventListener( 'change', changeSide );
</script>
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
Please use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks are not single quotes.
Sky020
May 27, 2020, 12:21am
3
Hello there,
Please note: in any given HTML page, the id attribute’s value should be unique.
Hope this helps
oh hey Dan, Thanks for letting me know. I was wondering how to make that work. I appreciate it!
Sky, I do know that the id element can be whatever I want it to be.
but they need to be unique, an id can’t be repeated, can be used only once in the page, or it break things
Okay,
I’ve edited the id elements to be unique, (see coding below). Now I’m noticing a const variable called btn in the sample coding, however, given the new edits, there is no longer any variable with that name. So here are my two questions:
Do I need any const variable at all, or should I now create six of them to match the new name?
Do I need to create six new querySelector and onClick methods to match each new id variable?
Sample Coding: - - - - - - - - - - - - - -
<html lang="en">
<head>
<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 80px;
perspective: 400px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
.cube__face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front { background: hsla( 0, 100%, 50%, 0.7); }
.cube__face--right { background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }
.cube__face--front { transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
label { margin-right: 10px; }
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<!-- Navigation starts here: -->
<p class="button-group">
<label>
<input type="button" id="cFront" name="rotate-cube-side" value="front" checked />
</label>
<label>
<input type="button" id="cRight" name="rotate-cube-side" value="right" />
</label>
<label>
<input type="button" id="cBack" name="rotate-cube-side" value="back" />
</label>
<label>
<input type="button" id="cLeft" name="rotate-cube-side" value="left" />
</label>
<label>
<input type="button" id="cTop" name="rotate-cube-side" value="top" />
</label>
<label>
<input type="button" id="cBottom" name="rotate-cube-side" value="bottom" />
</label>
</p>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function () {
var cube = document.querySelector('.cube');
var buttonGroup = document.querySelector('.button-group');
var currentClass = '';
function changeSide() {
var checkedRadio = buttonGroup.querySelector(':checked');
var showClass = 'show-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
}
// set initial side
changeSide();
buttonGroup.addEventListener( 'change', changeSide );
</script>
</body>
</html>
