After posting a question on Stack Overflow yesterday, I was advised to create a new one in order to receive a more specific answer.
The code I have currently displays words on the page when a button is clicked.
Everything works perfectly, but I am wondering if it is possible to contain the word display within a designated container?
I would like the words to only be displayed on mobile devices, as on desktop there is a lot of scrolling required to see all the words. I attempted to place the display in a 300x300px box, but the words are still appearing everywhere. Is it achievable using Bootstrap grid, media queries, or another type of container? Or maybe I need to apply a different Javascript rule?
Thank you for your assistance!
var words = [
'Hello',
'No',
'Hi',
'Banana',
'Apple'
];
var visible = 0;
document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault();
var fullWidth = window.innerWidth;
var fullHeight = window.innerHeight;
var elem = document.createElement("div");
elem.textContent = words[visible];
elem.style.position = "absolute";
elem.style.left = Math.round(Math.random() * fullWidth) + "px";
elem.style.top = Math.round(Math.random() * fullHeight) + "px";
document.body.appendChild(elem);
visible++;
});<form>
<input type="submit">
</form>