I've put together a Codepen by mashing together a couple different examples by other people in order to get something pretty close to what I'm actually looking for. The only problem I have now is that I'd like to give the button in my example a default value of 3, rather than have somebody input a value of their choice, so that when the button is clicked, three images are selected at random.
I've tried
$(shuffle($all).slice(0, $("input").val(3))).addClass("selected");
whilst commenting out the input type, but that didn't work.
Thanks in advance for any tips!
http://codepen.io/asyi/pen/XMVwVg
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css"> <title>This Webpage</title>
</head>
<body>
<div id="container">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
<button>Click to win!:</button>
<input type="text" size="3" value="3" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts/script.js"></script>
</body>
CSS
* {
box-sizing: border-box;
}
#container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#container > div {
width: 50%;
height: 20vw;
border: white 10px solid;
}
.selected {
background: tan;
border: red 2px solid;
}
.square {
background-image: url('https://placebear.com/300/200');
background-repeat: no-repeat;
background-size: 85%;
background-position: center;
}
jQuery
$(document).ready(function(){
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
$(function() {
$("button").click(function() {
var $all = $(".square").removeClass("selected");
$(shuffle($all).slice(0, $("input").val())).addClass("selected");
});
});
});
Related
On my website, I would like to add a grid consisting of square images (album covers). I also want to add this hover effect to said images: https://codepen.io/jarvis-ai/pen/GRJpQWO. How would I do this?
I have already tried a couple of things I found while researching my question but I never got the result I wanted. I have always had issues with the sizing of the images and making the sizes responsive. Here is a visualization of what I want it to look like and what I to happen:
Grid on a normal-sized monitor:
Grid on a smaller monitor or window:
Image on hover:
Pretty much: If the page is viewed on a normal-sized monitor, there should be 4 images in one row. If the page is viewed on a phone or if the window is resized, the images split into more rows with one row containing less than 4 now. If the mouse is being hovered over an image, the image should do the effect thing.
Notice: I should be able to do the hover effect by myself since there is already a working demo. I am just mentioning that I want the effect so that you can give me a solution that works with the effect.
Here is the last thing I have tried:
:root {
--grey: grey;
--white: white;
}
#music {
width: 100%;
min-height: 100vh;
background-color: var(--grey);
display: flex;
color: var(--white);
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
#cover-section {
display: flex;
align-items: center;
vertical-align: middle;
justify-content: center;
flex-direction: row;
}
.cover {
flex: 1 0 21%;
width: 100%;
height: auto;
background-image: url(https://commons.wikimedia.org/wiki/File:Stack_Overflow_icon.svg);
}
<div id="music">
<div id="cover-section">
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
</div>
</div>
Thanks in advance for your help!
By the way: If I need JavaScript to achieve this, please do not tell me to just use JavaScript but give me some code I could use, as I have done next to nothing with JavaScript before.
Something that works is that.
I cant implement all the part you want, but for use this example in a mobile view use the media-query css.
Something to start, not a definitive solution! It would be expensive to do it all here.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Document</title>
<style>
#music {
width: 100%;
height: 100vh;
text-align: center;
margin-top: 60px;
}
#cover-section {
width: 100%;
height: 100vh;
}
.b-game-card {
width: 20%;
height: 30%;
float: left;
}
.cover {
width: 90%;
height: 90%;
background: url('https://m.media-amazon.com/images/I/81aTawcGdmL._AC_SL1500_.jpg');
background-size: cover;
background-position: center;
float: left;
}
</style>
</head>
<body>
<div id="music">
<div id="cover-section">
<div class="b-game-card">
<div class="cover">
</div>
</div>
<div class="b-game-card">
<div class="cover">
</div>
</div>
<div class="b-game-card">
<div class="cover">
</div>
</div>
<div class="b-game-card">
<div class="cover">
</div>
</div>
</div>
</body>
<script>
const maxTilt = 50; // Max card tilt (deg).
$(".b-game-card")
.mousemove(function (evt) {
let bounding = mouseOverBoundingElem(evt);
let posX = bounding.width / 2 - bounding.x;
let posY = bounding.height / 2 - bounding.y;
let hypotenuseCursor = Math.sqrt(Math.pow(posX, 2) + Math.pow(posY, 2));
let hypotenuseMax = Math.sqrt(Math.pow(bounding.width / 3, 2) + Math.pow(bounding.height / 3, 2));
let ratio = hypotenuseCursor / hypotenuseMax;
$(".cover", this).css({
transform: `rotate3d(${posY / hypotenuseCursor}, ${-posX / hypotenuseCursor}, 0, ${ratio * maxTilt}deg)`,
filter: `brightness(${2 - bounding.y / bounding.height})`
});
$(".gloss", this).css({
transform: `translateX(${posX * ratio * 1}px) translateY(${posY * ratio}px)`
});
})
.mouseleave(function () {
let css = {
transform: "",
filter: ""
};
$(".cover, .gloss", this).css(css);
});
function mouseOverBoundingElem(evt) {
let bounding = evt.target.getBoundingClientRect();
let x = evt.originalEvent.pageX - Math.round(bounding.left);
let y = evt.originalEvent.pageY - Math.round(bounding.top);
return {
x: Math.max(0, x),
y: Math.max(0, y),
width: Math.round(bounding.width),
height: Math.round(bounding.height)
};
}
</script>
</html>
I managed to figure out a solution by myself. Here is the code:
HTML:
<div id="music">
<div id="cover-section">
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover">
<!--Cover-->
</div>
<div class="cover" id="tablet-cover">
<!--Cover-->
</div>
</div>
</div>
The tablet cover does not actually exist and is just a placeholder in case there are an uneven amount of squares in one row. As you can see in the...
CSS:
#music {
width: 100%;
min-height: 100vh;
background-color: var(--grey);
display: flex;
color: var(--white);
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
#cover-section {
display: flex;
flex-wrap: wrap;
width: 80%;
}
.cover {
margin: 0px;
flex: 1 0 21%;
background-color: blue;
border: 2px solid black;
}
#tablet-cover {
display: none;
}
#media only screen and (max-width: 768px) {
/* For phones: */
.cover {
flex: 1 0 41%;
}
#waving-hand span {
font-size: 30pt;
}
}
#media only screen and (min-width: 600px) and (max-width: 800px) {
/* For tablets: */
.cover {
flex: 1 0 31%;
}
#tablet-cover {
display: block;
}
#waving-hand span {
font-size: 70pt;
}
}
The tablet cover is being removed on smaller or larger screens, where there would be an even number of squares in one row. It gets added once there is an uneven amount of covers in a row so that the last row has two squares instead of two rectangles.
Now for the self-engineered JavaScript code:
let coverWidth = document.querySelector('.cover').offsetWidth;
const allCovers = document.getElementsByClassName('cover')
for (var i = 0; i < allCovers.length ; i++){
allCovers[i].style.height= coverWidth + "px";
}
function coverheight(){
let coverWidth = document.querySelector('.cover').offsetWidth;
const allCovers = document.getElementsByClassName('cover')
for (var i = 0; i < allCovers.length ; i++){
allCovers[i].style.height= coverWidth + "px";
}
}
window.onresize = coverheight;
This is what the code basically does:
Check the width of the divs and then apply the value of the div-width to the height attribute of the divs
Every time the screen is resized, it re-checks the values and sets the new values accordingly
I do not know if this code is the "cleanest" code, but as long as it works, I am happy. What sucks to me is that I had to work with media queries, because the flex layout is usually used for when you want a layout that is responsible by default, AFAIK.
Thanks to everyone who tried helping me out though! I hope I can help someone else with my spaghetti code.
I am trying to make a simple slide show by changing the pics in a DOM element.
Here is the HTML and the JavaScript..
The pics do NOT show up
What am I missing ?
here is the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<img id="pictures" style = "width:50%">
<div>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
Here is the JavaScript Part
function slideshow(){
'use strict';
let i = 0;
// array to hold the pictures
let pics = [];
pics [0] = cave.jpg;
pics [1] = creek.jpg;
pics [2] = entrance.jpg;
pics [3] = tree.jpg;
// making the pictures the dom element
document.getElementById('pictures').value = pics[i];
// make the buttons rotate through the pics
document.getElementById('forward').onclick = i++;
document.getElementById('reverse').onclick = i--;
}
window.onload = init;
Any pointers would be most appriciated.
Few things are missing in your solution, so feel free to run and inspect the code below. Also, put images in HTML at the beginning. JS code running is making sure they are changing the order. Only the middle one is passing through the window (#pictures-container) - this code works only for the odd number of images.
Here's the code that will work:
HTML (index.html)
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pictures-container">
<div id="pictures">
<img class="picture" alt="pic 1" data-id="1">
<img class="picture" alt="pic 2" data-id="2">
<img class="picture" alt="pic 3" data-id="3">
</div>
</div>
<div id="slideshow-actions">
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
CSS (css/style.css)
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
#pictures-container {
width: 110px;
height: 90px;
border: 1px solid red;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#pictures {
display: flex;
gap: 5px;
z-index: -1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.picture {
width: 100px;
height: 80px;
display: block;
padding: 5px;
background-color: #dedede;
}
.picture[data-id="1"] {
background-color: yellow;
}
.picture[data-id="2"] {
background-color: magenta;
}
#slideshow-actions {
margin-top: 15px;
}
JS (js/script.js)
function registerEvents() {
let btnReverse = document.getElementById('reverse');
let btnForward = document.getElementById('forward');
btnReverse.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let firstPic = pictures[0];
let parent = firstPic.parentElement;
parent.removeChild(firstPic);
parent.append(firstPic);
}
btnForward.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let lastPic = pictures[pictures.length - 1];
let parent = lastPic.parentElement;
parent.removeChild(lastPic);
parent.prepend(lastPic);
}
}
registerEvents();
Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>
Right now my webpage has vertical snap to scroll to each of the three 100vh sections.
In the second section, I have 3 100vw divs lined up horizontally with { overflow-x: scroll }. So I went ahead and try to link the my button that would help translate x using the following code:
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('wrapper').scrollLeft += 20;
};
I guess right now the numbers doesn't matter. I just want to see it moving, but I can't get it to move on-click. Any ideas?
codepen.io/brandoniscool/pen/vYBMZyM
300% width is set on the wrapper, so it is the wrapper parent (id special) which needs to scroll.
Setting scrollLeft on the special element works as expected. document.getElementById('special').scrollLeft += 20;
const button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('special').scrollLeft += 20;
};
* {
margin: 0;
font-family: 'Montserrat', sans-serif;}
body {
scroll-snap-type: y mandatory;
overflow-x: hidden;
width: 100vw;
height: 100%;
}
section {
scroll-snap-align: start;
height: 100vh;
outline: 1px dashed lightgray;
background-color: #c1d37f;
overflow-x: scroll;
}
.verticalSection {
display: flex;
justify-content: center;
flex-direction: row;
height: inherit;
border: 0.5px dashed #664e4c;
box-sizing: border-box;
/* so the border doesnt increase over the 100% width and heights */
}
#wrapper {
height: 100%;
width: 300%;
display: flex;
}
.horizontalSection {
background-color: #f9d4bb;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: row;
border: 0.5px dashed #664e4c;
box-sizing: border-box; /* so the border doesnt increase over the 100% width and heights */
}
h1 {
color: #664e4c;
font-size: 3em;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>vertical snap and horizontal snap integration</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<section>
<div class="verticalSection"> <h1> BOX 1</h1> </div>
</section>
<section id="special">
<div id="wrapper">
<div class="horizontalSection"> <h1> BOX 2.1</h1> <button id="slide" type="button">Next</button></div>
<div class="horizontalSection"> <h1> BOX 2.2</h1> </div>
<div class="horizontalSection"> <h1> BOX 2.3</h1> </div>
</div>
</section>
<section>
<div class="verticalSection"> <h1> BOX 3</h1> </div>
</section>
</body>
</html>
I am making an etch-a-sketch in browser. Currently when I enter a size of 7200 it works fine, but I want to be able to enter a number and make a grid out of it. So say when one enters 16 it creates 16x16, or 100, 100x100 etc. Additionally, how do I get my div's to respond dynamically to that so that it fills up the screen regardless of the amount of divs I have?
My HTML:
<DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="JS/jquery-1.12.0.js"></script>
<script type="text/javascript" src="JS/etch.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div class="button">
<button type="button" id="clear-button">Clear Board</button>
</div>
<div id="game"></div>
</div>
</body>
</html>
My CSS:
#wrapper {
width: 1000px;
height: 760px;
background-color: gray;
}
.grid {
width: 10px;
height: 10px;
float: left;
}
.draw {
background-color: black;
}
.button {
width: 1000px;
height: 40px;
}
#clear-button {
margin: auto;
display: block;
}
My .Js
var count = 0;
$(document).ready(function() {
while(count < 7200){
$('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
count++;
};
$('.grid').on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
$('button').click(function() {
$('#game').empty();
count = 0;
var size = prompt("What size would you like the new etch-a-sketch to be?");
while(count < size){
$('#game').append('<div id="grid-"'+ count +' class="grid"></div>');
count++;
};
$('.grid').on({
mouseenter: function () {
$(this).addClass('draw');
},
mouseleave: function () {
$(this).addClass('draw');
}
});
});
});
I think you would like to read more about flexbox layouts. Here is a basic example in which you can add as many elements in a single row.
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 250px;
background-color: lightgrey;
}
.flex-item {
-webkit-flex: 1;
flex: 1;
margin: 10px;
background: blue;
}
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>