How can I get the squares to appear properly across the grid rather than just stretching across it! When the Chapters button is pushed.
The add a Div button is just to show how the squares should appear (obviously the numbers should nicely increment from 1 to 50! not changing all squares to the same number).
*currently with the code below the Chapters button does not retrieve the data properly from the .jason file (I don't know why!)
the link below does retrieve the data properly:
https://appworx.org/newSQ.html
I very much appreciate anyone's help in providing the simplest solution.
let BkValues = '{ "Books" : [' +
'{ "Book":"Chapters" , "id":"1" , "BkChaps":"50" , "LocalRec":"Gen" } ]}';
const obj = JSON.parse(BkValues);<script src="https://appworx.org/Chap-Resource-Loader.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
<title>NewSquaresList</title>
<script src="https://appworx.org/Chap-Resource-Loader.js"></script>
<script>
var myData;
$.getJSON('https://appworx.org/storage.json', function(data) {
myData = data;
})
</script>
<style>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 900px) {
.grid {
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 600px;
}
.grid .grid-item {
background-color: #e0e0e0;
padding: 10px;
height: 170px;
font-size: 40px;
text-align: center;
line-height: 170px;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
}
/* Larger screen (portrait tablets and large phones, 900px and up) */
@media only screen and (min-width: 900px) {
.grid {
margin: auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
width: 900px;
}
.grid .grid-item {
background-color: #e0e0e0;
padding: 10px;
height: 150px;
font-size: 45px;
text-align: center;
line-height: 150px;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
}
/* Largest screen (desktop, 1600px and up) */
@media only screen and (min-width: 1600px) {
.grid {
margin: auto;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 10px;
width: 1200px;
}
.grid .grid-item {
background-color: #e0e0e0;
padding: 10px;
height: 140px;
font-size: 45px;
text-align: center;
line-height: 140px;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
}
</style>
</head>
<body>
<br>
<div class="likes" >0</div>
<br>
<br>
<button id="1" class="book" >Chapters</button><br><button id="btn_add" class="btn">Add a Div</button><br><button hidden class="btn" >Increment</button>
<br>
<div id="header" class="text" >Chapters</div>
<div id="header2" class="text" ></div>
<br>
<div id="grab" >X</div> <div hidden id="LocRec2" >X</div> <div hidden id="Rec" >X</div>
<div id="books" class="grid" ></div>
<div id="board" class="grid" ></div>
<br><br><br>
<div class="grid" id="myGrid"></div>
<script>
// This is set with a click...
$("#btn_add").click(function(e) {
var times = 3;
for(var i = 0; i < times; i++){
}
$("#board").append("<div class='grid-item' class='likes' >0</div>");
});
$(".book").on("click", function(){
//console.log(this.id); //This is the book #
var name = this.innerHTML;
var Bkid = this.id;
var num = this.id-1;
//console.log( num );
//alert(id);
document.getElementById("grab").innerHTML = Bkid ;
document.getElementById("header").innerHTML = name ;
document.getElementById('books').style.display = 'none';
//document.getElementById('header2').style.display = 'none';
window.location.href = "#start";
document.getElementById('board').style.display = 'block';
var LocRec = obj.Books[num].LocalRec; // LocRec will = Gen
//console.log( myData.Books.GenRec );
var LocRec2 = LocRec + "Rec";
document.getElementById('LocRec2').innerHTML = LocRec2;
var varKey = LocRec2;
var Rec = myData.Books[varKey]; // This is the cool bit of code that refers to the key dynamically
console.log( Rec );
var Chap = obj.Books[num].BkChaps;
var times = Chap;
for(var j = 0; j < times; j++){
var num = j +1;
var string = LocRec+num ; // This is the dynamic string ref to: Gen1
if (Rec.includes(string) == true) {
console.log( "Yes, is in array" );
$("#board").append("<div class='grid-item' class='square highlight' class='number'>" + num + "</div>");
/* gridContainer.appendChild(gridItem); */
} else {
console.log( "No, is not in array" );
/* $("#board").append("<div class='grid-item'></div>"); */
$("#board").append("<div class='grid-item' class='square' class='number'>" + num + "</div>");
}
}
});
$('.btn').click(function() {
var num = parseInt($('.likes').text());
$('.likes').text(num+1);
$('.grid-item').text(num+1);
});
</script>
</body>
</html>
This is what currently happens when the Chapters button is clicked... the Squares do not maintain their aspect but just stretch and fill the width.
Update:
I managed to resolve the issue of why the squares were not respecting the grid and stretching across the whole container...
The line of code above was the culprit!!! haha
So after removing that line... the grid squares maintain their proper aspect.
Phew, never thought I would solve it lol.
Thanks for reading.
M.