Sophia Wokoma
New Coder
so i'm currently working on a project which fetches product information from a JSON file and inputs it onto a HTML page via js. I've managed to get the fetch function working, however I would like to a "Load More" function/button so that my page originally displays 12 (4x3 grid) items and when user clicks on the button it displays the remaining 12 items. Would anyone be able to help me out or push me into the right direction?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Product List Front End Test</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="#" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<main class="container">
<section class="row">
<div clas="col-6">
<h1>Product List Page Test by ______</h1>
</div>
</section>
<section class="row" id="productList">
<div id="myData"></div>
</section>
<div class="btncontainer">
<button id="lmbutton" onclick="loadMore">Load more</button>
</div>
</main>
<script src="js/main.js"></script>
</body>
</html>
JavaScript:
const productUrl = "products/products.json";
let products = "";
fetch("products/products.json")
.then((response) => response.json())
.then((data) => {
console.log(data);
for (var i = 0; i < data.productList.length; i++) {
console.log(data.productList[i].images);
// if (i <= 11) {
products =
products +
`
<div class=card>
<img src="${data.productList[i].images[2]}">
<h4>${data.productList[i].designer}</h4>
<p>${data.productList[i].name}</p>
<p>${data.productList[i].price}</p>
</div>
`;
}
document.querySelector("#myData").innerHTML = products;
// }
});
CSS:
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
/* UNIVERSAL */
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
font-size: 100%;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* FONT & TYPOGRAPHY STYLES */
p,
h1,
h2,
h3,
h4,
body,
html,
label {
font-family: "Lato", Helvetica, sans-serif;
color: #333447;
line-height: 1;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.375rem;
}
h4 {
font-size: 1.125rem;
}
p {
font-size: 1.125rem;
font-weight: 300;
}
strong {
font-weight: 700;
}
/* POSITIONING */
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* button */
.btncontainer {
display: flex;
justify-content: center;
}
button {
background-color: #000; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: "Lato", Helvetica, sans-serif;
}
button:hover {
background-color: #fff;
color: #000;
border: #000 solid 1px;
}
/* CLASSES */
.product-img {
max-width: 90%;
}
/* GRID SYSTEM */
.container {
margin-bottom: 2rem;
margin-top: 2rem;
}
.row {
display: flex;
justify-content: space-between;
text-align: center;
}
#myData {
display: grid;
grid-gap: 20px;
padding: 20px;
}
@media (min-width: 980px) {
.container {
padding-left: 6%;
padding-right: 6%;
}
.row {
margin-top: 2rem;
flex-flow: row wrap;
}
.row:first-child {
margin-top: 0;
}
.col-1 {
width: 7.05%;
}
.col-2 {
width: 15.5%;
}
.col-3 {
width: 23.95%;
}
.col-4 {
width: 32.4%;
}
.col-5 {
width: 40.85%;
}
.col-6 {
width: 49.3%;
}
.col-7 {
width: 57.75%;
}
.col-8 {
width: 66.2%;
}
.col-9 {
width: 74.65%;
}
.col-10 {
width: 83.1%;
}
.col-11 {
width: 91.55%;
}
.col-12 {
width: 100%;
}
}
@media only screen and (min-width: 661px) and (max-width: 979px) {
.container {
padding-left: 5%;
padding-right: 5%;
}
.row {
flex-flow: row wrap;
}
.t-col-4,
.t-col-6,
.t-col-12 {
margin-top: 2rem;
}
.t-col-4 {
width: 31.46%;
}
.t-col-6 {
width: 48.6%;
}
.t-col-12 {
width: 100%;
}
.row:first-child .t-col-4,
.row:first-child .t-col-6,
.row:first-child .t-col-12 {
margin-top: 0;
}
}
@media only screen and (min-width: 0px) and (max-width: 660px) {
.container {
padding-left: 3%;
padding-right: 3%;
}
.row {
flex-flow: row wrap;
}
.m-col-6,
.m-col-12 {
margin-top: 2rem;
}
.m-col-6 {
width: 47.2%;
}
.m-col-12 {
width: 100%;
}
.row:first-child .m-col-6,
.row:first-child .m-col-12 {
margin-top: 0;
}
}
@media (min-width: 768px) {
#myData {
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 960px) {
#myData {
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
#myData {
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
}
JSON:
{ "productList": [
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454160_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454160_6_medium.jpg"
],
"name": "Fringed checked wool-blend coat",
"designer": "Marni",
"url": "/products/Marni-Fringed-checked-wool-blend-coat-1454160",
"price": "£1,790",
"index": 0,
"code": "1454160"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454112_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454112_6_medium.jpg"
],
"name": "Shopping logo-jacquard tote bag & leather pouch",
"designer": "Marni",
"url": "/products/Marni-Shopping-logo-jacquard-tote-bag-%26-leather-pouch-1454112",
"price": "£890",
"index": 1,
"code": "1454112"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454159_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454159_6_medium.jpg"
],
"name": "Suede and silk-knit midi skirt",
"designer": "Marni",
"url": "/products/Marni-Suede-and-silk-knit-midi-skirt-1454159",
"price": "£1,690",
"index": 2,
"code": "1454159"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454108_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454108_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454108_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454108_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454108_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454108_6_medium.jpg"
],
"name": "Gathered-leather platform clogs",
"designer": "Marni",
"url": "/products/Marni-Gathered-leather-platform-clogs-1454108",
"price": "£750",
"index": 3,
"code": "1454108"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1474365_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1474365_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1474365_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1474365_4_medium.jpg"
],
"name": "Rainbow diamond, enamel & 18kt gold ring",
"designer": "Bea Bongiasca",
"url": "/products/Bea-Bongiasca-Rainbow-diamond%2C-enamel-%26-18kt-gold-ring-1474365",
"price": "£6,330",
"index": 4,
"code": "1474365"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1457993_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1457993_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1457993_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1457993_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1457993_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1457993_6_medium.jpg"
],
"name": "Linear-print denim jacket",
"designer": "Ahluwalia",
"url": "/products/Ahluwalia-Linear-print-denim-jacket-1457993",
"price": "£440",
"index": 5,
"code": "1457993"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1454847_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454847_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454847_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1454847_4_medium.jpg"
],
"name": "Cubi small Anagram-jacquard canvas and leather bag",
"designer": "Loewe",
"url": "/products/Loewe-Cubi-small-Anagram-jacquard-canvas-and-leather-bag-1454847",
"price": "£850",
"index": 6,
"code": "1454847"
},
{
"images": [
"//assetsprx.matchesfashion.com/img/product/1458005_1_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1458005_2_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1458005_3_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1458005_4_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1458005_5_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1458005_6_medium.jpg",
"//assetsprx.matchesfashion.com/img/product/1458005_7_medium.jpg"
],
"name": "Laser-print wide-leg jeans",
"designer": "Ahluwalia",
"url": "/products/Ahluwalia-Laser-print-wide-leg-jeans-1458005",
"price": "£370",
"index": 7,
"code": "1458005"
},
