We Keep Coding

Add missing squares when div is resized

I want to create a div, which has many smaller squares inside of it as such:
The problem is, is that when I resize my screen, the squares re-adjust making
the rows uneven:
In that image, I could add 4 more squares, and the div is filled again equally with squares.
So I am wondering how would I add the missing squares on resize.
Here is a jsfiddle of my project
below is my code laid out:
const container = document.querySelector(".container");
for (let i = 1; i <= 20; i++) {
// create dom elem
const square = document.createElement("div");
square.setAttribute("class", "square");
container.appendChild(square);
}
.container {
border: 3px solid black;
width: 50%;
height: 50%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
padding: 10px;
gap: 10px;
}
.square {
min-width: 40px;
min-height: 40px;
background-color: black;
}
<div class="container">
</div>

Add flex-grow: 1; on the item (the .square) see if the result fits your needs

Not sure if that what you want but this code will let u keep constant number of rows of boxes with constant size for each box
const container = document.querySelector(".container");
const boxWidth = 40;
const gap = 10;
const padding = 10;
const numberOfRows = 4;
let numberOfBoxes = 0;
window.addEventListener("resize", (e) => {
renderBoxes();
});
function renderBoxes() {
const containerWidth = container.clientWidth;
const boxesPerRow = ~~((containerWidth - padding) / (boxWidth + padding));
const n = boxesPerRow * numberOfRows;
if (n != numberOfBoxes) {
container.innerHTML = "";
for (let i = 1; i <= n; i++) {
const square = document.createElement("div");
square.setAttribute("class", "square");
container.appendChild(square);
}
}
}
renderBoxes();
padding constant refers to padding in one side only, the rest are clear

DOM assign an id to child Javascript

I have created a grid with div, class and id. I want to randomly create a yellow square and I want to assign an id= 'yellowSquare' how do I do it?
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
drawPone.style.backgroundColor = 'yellow';
}
}
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
<div id="grid-box"></div>
I am new to Javascript / jQuery. Any help will be much appreciated ! Thank you

There are two options to your question. You can either change the id of the yellow square which is already created from your code, or create a child element within the square, which looks the same as your current solution. Creating a new child element will let you keep the numeric id pattern for the grid:
Changing the ID :
var element = document.getElementById('square' + randomIndex)
element.id = "yellowSquare";
Adding new element inside:
var node = document.createElement("DIV");
node.id = "yellowSquare";
node.style = "background-color:yellow;height:100%;width:100%;";
var element = document.getElementById('square' + randomIndex)
element.appendChild(node);
I set the styling of the div child to 100% width and height, as it has no content, and would get 0 values if nothing was specified. This should make it fill the parent container.
There are also multiple other ways to achieve the same result, for instance with JQuery.

Use the HTMLElement method setAttribute (source);
...
var drawPone = document.getElementById('square' + randomIndex);
drawPone.style.backgroundColor = 'yellow';
drawPone.setAttribute('id', 'yellowSquare');
...

As you requested in your comment how to move the square i made an example how you can move it left and right using jQuery next() and prev() functions. However because your html elements are 1 dimensional it's not easy to move them up/down and check the sides for collisions. Better would be to create your html table like with rows and columns and this way create a 2 dimensional play field.
Also added a yellowSquery class for selection with $drawPone.addClass('yellowSquare');.
Also since you like to use jQuery I changed your existing code to jQuery function. Might help you learn the framework.
var $grid = $("#grid-box");
for (var i = 1; i <= 100; i++) {
var $square = $("<div>");
$square.addClass('square');
$square.attr('id','square' + i);
$grid.append($square);
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var $drawPone = $('#square' + randomIndex);
$drawPone.addClass('yellowSquare');
}
}
$('#button_right').on('click', function(){
$yellowSquare = $('.yellowSquare')
$yellowSquareNext = $yellowSquare.next();
$yellowSquare.removeClass('yellowSquare');
$yellowSquareNext.addClass('yellowSquare');
});
$('#button_left').on('click', function(){
$yellowSquare = $('.yellowSquare')
$yellowSquarePrev = $yellowSquare.prev();
$yellowSquare.removeClass('yellowSquare');
$yellowSquarePrev.addClass('yellowSquare');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.yellowSquare {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid-box"></div>
<button id="button_left">left</button>
<button id="button_right">right</button><br>

Change output image size from JS

I have made an array with a set of random images which works. I just don't know how I'm supposed to style the image as an image;
var imageURLs = [
"./images/404/random1.png"
, "./images/404/random2.png"
, "./images/404/random3.png"
, "./images/404/random4.png"
, "./images/404/random5.png"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"404 Image."/>';
img.className = "404image";
img.width = "10%"
return img;
}
document.write(getImageTag());
I'd assume you'd style it with the class name but I can't make .404image work for styling in CSS.
Any ideas? Thanks in advance, really stuck.

A CSS class name cannot start with a digit. If you name it image404 for instance it would be accessible with .image404
Edit: It is possible to use digit as first character in a class name if you escape it. I would still not recommend it since it causes a hassle and is against most naming standards in other languages.

One thing you can do to style create and style images as HTML elements with JS is this:
var fruit_pic = document.createElement("IMG")
fruit_pic.setAttribute("src", "https://melbournechapter.net/images/fruit-transparent-berry-6.png");
fruit_pic.setAttribute("width", "90");
fruit_pic.setAttribute("height", "60");
document.body.appendChild(fruit_pic);
body {
background-color: white;
text-align: center;
width: 450px;
margin: 0;
padding: 0;
}
p1 {
color: blue;
font-family: arial;
}
p2 {
color: blue;
font-family: arial;
}
p3 {
font-family: arial;
}
<body>
<h1>Fruit</h1>
</body>
I pulled this from this TryIt editor.
And also made a JSFiddle for it...

Use the Image() constructor.
var imageURLs = [
"./images/404/random1.png"
, "./images/404/random2.png"
, "./images/404/random3.png"
, "./images/404/random4.png"
, "./images/404/random5.png"
];
function getImageTag() {
var img = new Image();
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img.src = imageURLs[randomIndex]
img.alt = '404 image';
img.style.width = '10%';
img.className = '404image';
return img;
}
document.body.appendChild(getImageTag());

Try this:
img += ' class="404image" width="10%"'; /* add line */
img += '\" alt=\"404 Image."/>';
img.className = "404image"; /* remove line */
img.width = "10%"; /* remove line */
P.S. String does not have className or width property. Also 404image is invalid as it cannot start with a digit.
var urls = ['https://4.bp.blogspot.com/-u0ld9dGuSD4/WmzFFRAJSlI/AAAAAAAABxY/IMoM6ckwf0csjBWMkBNVxPLZSZCMIvULwCLcBGAs/s1600/404-page-not-found-200.gif', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuw1_2s5Ig8HtoQPV_qaP0AHeJzejhoeDDuW8u4VIYxslhYS1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUWkb3n7kAoqRDRe8wsEy3WqZlUaPkBH1MUWyahboi7buKUzd'];
document.querySelector('._404image').src = urls[Math.floor(Math.random() * urls.length)];
._404image {
margin: auto;
}
.container {
position: relative;
width: 80%;
text-align: center;
}
<div class="container">
<img class="_404image" />
</div>

Sizing image to Fill Divs Based on Orientation

Basically what I am trying to do is have images fill a div whilst maintaining their aspect ratio. So I am using jquery to identify whether they are portrait or landscape, and set either width or height from there.
My problem is the code gives all the images landscape class. I am at my wits end to know why...
Thank you!
HTML
<div class="prop">
<div class="propimage"><img src="{#image}" alt="{#prop_name}"></div>
<div class="propname">{#prop_name}</div>
<div class="propdescription">{#description}</div>
<div class="propprice">{#price}</div>
</div>
CSS
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
.propimage img {
display: block;
}
img {
max-width: none;
}
.propimage {
width: 100%;
height: 300px;
overflow: hidden;
float: left;
}
SCRIPT
<script>
$(".propimage").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ((imgW/imgH) < refRatio){
$(".propimage").addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
</script>

Please upload You code on js fiddle or paste the link so we can see working example of your code. Meanwhile just try this code
<script>
$(".propimage").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if (imgW=<200 || imgH<=300)){
$(this).children("img").css("width","100%");
$(this).css("width","100%");
} else {
$(this).children("img").css("height","100%");
$(this).css("height","100%");
}
})
</script>

How to clone the contents of a div into another div with JavaScript?

I want to clone the images of the div leftSide into the div rightSide. On each click on the body the images on the left div should be cloned into the right div. But I can't get the result with the code I'm doing. Is there any mistake in my code? I want to use JavaScript.
Here's my code:
var theLeftSide = document.getElementById("leftSide");
var width = 500; var height = 500;
top_position = 0; var left_position = 0,
var numberOfFaces = 5;
var theRightSide = document.getElementById("rightSide");
var leftSideImages = theLeftSide.cloneNode(true);
document.getElementById("rightSide").appendChild(leftSideImages);
for (var i = 0; i < 5; i++) {
createElement(i);
numberOfFaces += 5;
function createElement() {
var image = document.createElement('img');
image.src = "smile.png";
image.style.position = 'absolute';
image.style.top = top_position + "px";
image.style.left = left_position + "px";
theLeftSide.appendChild(image);
top_position = Math.random() * 500 ;
left_position = Math.random() * 500 ;

Here is a simple example that clones an HTMLElement in vanilla javascript:
additional information can be found in MDN
function CloneCtrl() {
'use strict';
var self = this;
self.source = document.querySelector('.source');
self.target = document.querySelector('.target');
self.cloneSource = function(event) {
var clone = self.source.cloneNode(true);
self.target.appendChild(clone);
}
document
.getElementById('cloneBtn')
.addEventListener('click', self.cloneSource)
;
}
document.addEventListener('DOMContentLoaded', CloneCtrl);
.source {
background: lightseagreen;
width: 100px;
height: 100px;
line-height: 100px;
overflow: hidden;
margin: 5px;
display: inline-block;
text-align: center;
color: #fff;
}
.target {
border: 1px solid lightcoral;
min-height: 110px;
}
<div><button id="cloneBtn">Clone Source</button></div>
<div class="source">SOURCE</div>
<hr>
<div class="target"></div>

With jQuery, you can do it kike that:
$('#div2').html($('#div1').html());
which is found from this question: Copy the content of a div into another div.
You don't actually provide many details, thus the best I can post, hope it helps!!

you could simply try this if you have second div on page.
document.getElementById("SecondDv").innerHTML = document.getElementById("FirstDv").innerHTML;
This will copy whatever is there in FirstDiv to Second. lmk if it works.