I start my coding bootcamp tomorrow and I have been able to complete all my pre-work modules except this one.
Using only html and Javascript, I am to try to get these buttons to work to change this object in the following code:
<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<!-- <script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> .
</div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
Here is where I am at, and I am obviously having issues. I feel like I know just enough to make a mess.
//the following is the fade function,
//currently unattached to button:
//source: https://stackoverflow.com/questions/28662893/fade-in-and-fade-out-in-pure-javascript-without-jquery
var box = document.getElementById('box');
function fadeOut(elem, speed) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
var outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
} // end if
}, speed / 50);
}
fadeOut(box, 2000);
// end fadeOut()<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"> .
</div>
<button id="growBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeBtn">Fade</button>
<button id="resetBtn">Reset</button>
<script type="text/javascript">
document.getElementById("growBtn").addEventListener("click", function() {
document.getElementById("box").style = "height:250px; width:250px;background-color: orange;margin: 25px";
});
document.getElementById("blueBtn").addEventListener("click", function() {
document.getElementById("box").style = "height:150px; width:150px;background-color: blue;margin: 25px";
});
document.getElementById("fadeBtn").addEventListener("click", function() {
document.getElementById("box").onclick.fadeOut();
});
document.getElementById("resetBtn").addEventListener("click", function() {
document.getElementById("box").style = "height:150px; width:150px;background-color: orange;margin: 25px";
});
</script>
<!-- Linking the JavaScript file -->
</body>
</html>I have been researching for days but have found so many different options and none seem to be the right fit.
Here are the issues as they stand right now:
Grow button: Well, I can make it get bigger, but just once, not every time the button is clicked.
Blue button: I can make it blue when the button is clicked, but the size changes back to the original if the grow button was clicked first.
Fade button: I found the code to a fadeOut function on this site (referenced in the code), but I don't know how to apply it to my fadeBtn so the box fades immediately upon opening the page. This is currently the only code in my js file.
Reset button: This works! Not sure that the code I used to make it work is the appropriate way, but I will take any win at this point!
I will take absolutely any advice/guidance/google links anyone is willing to share to help me! I'd like to start bootcamp out on the right foot and figure this out.
Thanks in advance!
Firstly, there's no reason to continually fetch the element on the page - assign it to a variable once at the start, and then reference that variable through your functions.
const box = document.getElementById('box');
Also, when updating an Element's styles, you should be targeting a specific style that you want to change, and then updating it directly
// Instead of this
document.getElementById("box").style = "height:250px; width:250px;
// Do this ( Also applying the above tip )
const box = document.getElementById('box');
box.style.height = '250px';
box.style.width = '250px';
Grow button: Well, I can make it get bigger, but just once, not every time the button is clicked
Your code currently doesn't do anything dynamic - You're just setting it to a hard-coded size. What you want to do instead is get the current size of the element, increase this, and then assign that value back to your element
You can use offsetHeight and offsetWidth to get the height / width of an element as a Number for easier addition
let height = box.offsetHeight + 50; // Increasing the current size by 50
let width = box.offsetWidth + 50;
box.style.height = height + 'px'; // Assigning our increased size back to the box
box.style.width = width + 'px';
Blue button: I can make it blue when the button is clicked, but the size changes back to the original if the grow button was clicked first.
Throughout your functions, you're overwriting every style on the box element for no reason. Unless you are overwriting a style, or removing a style, the values for each style will stay the same. When you're updating backgroundColor, just update backgroundColor.
box.style.backgroundColor = 'blue'; // This is all you need to change
Fade button: I found the code to a fadeOut function on this site (referenced in the code), but I don't know how to apply it to my fadeBtn so the box fades immediately upon opening the page
I'm a little confused as to why you would want this applied to the box as soon as the page loads, surely applying this style to the box on the button press is more appropriate? If that's the case, just move your function call into the click handler on the button
document.getElementById("fadeBtn").addEventListener("click", function() {
fadeOut(box, 2000);
});
Reset button: This works! Not sure that the code I used to make it work is the appropriate way, but I will take any win at this point!
It does, but you don't need to reset margin because you're never changing it.
Also, because your fadeOut function is running it's setInterval until the opacity is 0, we need a way to access and cancel this interval or else the element will keep fading - I've moved the outInterval declaration outside of the function for this, so you can call clearInterval(outInterval) inside your reset function (this is more visible in the Code Snippet at the bottom)
// Reset 'Grow'
box.style.height = '150px';
box.style.width = '150px';
// Reset 'Blue'
box.style.backgroundColor = 'orange';
// Reset 'Fade'
clearInterval(outInterval);
box.style.opacity = 1;
Here's a Snippet with these changes implemented so you can have a look how it works - Feel free to ask any questions if you're not sure on something, or I've missed a detail
const box = document.getElementById('box');
let outInterval = null;
document.getElementById("growBtn").addEventListener("click", function() {
let height = box.offsetHeight + 50;
let width = box.offsetWidth + 50;
box.style.height = height + 'px';
box.style.width = width + 'px';
});
document.getElementById("blueBtn").addEventListener("click", function() {
box.style.backgroundColor = 'blue';
});
document.getElementById("fadeBtn").addEventListener("click", function() {
fadeOut(box, 2000);
});
document.getElementById("resetBtn").addEventListener("click", function() {
// Reset 'Grow'
box.style.height = '150px';
box.style.width = '150px';
// Reset 'Blue'
box.style.backgroundColor = 'orange';
// Reset 'Fade'
clearInterval(outInterval);
box.style.opacity = 1;
});
function fadeOut(elem, speed) {
if (!elem.style.opacity) {
elem.style.opacity = 1;
} // end if
outInterval = setInterval(function() {
elem.style.opacity -= 0.02;
if (elem.style.opacity <= 0) {
clearInterval(outInterval);
} // end if
}, speed / 50);
};<body>
<p>Press the buttons to change the box!</p>
<div id="box" class="box" style="height:150px; width:150px; background-color:orange; margin:25px"> . </div>
<button id="growBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeBtn">Fade</button>
<button id="resetBtn">Reset</button>
</body>