Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

Dynamic HTML Grids: Building a Responsive Social Site Showcase with JavaScript

Displaying four elements in same row

Displaying three elements in same row
Displaying three elements in single colunm

Displaying four elements in same row

Image description

 for (var i = 0; i < nonNullSocialPrices.length; i += 4) {
                // Add a row for each set of 4 social sites
                html += '<div class="row">';
                // Display each social site
                for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {
                    var site = nonNullSocialPrices[i + j].site.trim();
                    var site_url = nonNullSocialSites[i + j].site_url.trim();
                    console.log(site_url)
                    var cartSocialsObject = JSON.parse(item.cart_socials);
                    var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);
                    html += '<div class="col-md-3">';


                    if (hasPrice) {
    // Add a link with the site_url
    html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
    html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i + j].price;
    html += '</a>';
} else if (isAdded) {
    // Show the 'not added' icon in red with a checkbox and add a link with the site_url
    html += '<i class="fas fa-times" style="color:red"></i> ';
    html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' +  (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
    html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i + j].price;
} else {
    // Add a link with the site_url for the social site name
    html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
    // Just display the checkbox and social site name
    html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' +  (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
    html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i + j].price;
    html += '</a>';
}
                    html += '</div>';
                } // Display each social site

                html += '</div>';
            }
Enter fullscreen mode Exit fullscreen mode

Explanation

for (var i = 0; i < nonNullSocialPrices.length; i += 4) {
    // Outer loop: iterates over groups of 4 social sites

    for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {
        // Inner loop: iterates within each group of 4 social sites
        var currentIndex = i + j;

        if (currentIndex < nonNullSocialPrices.length) {
            var site = nonNullSocialPrices[currentIndex].site.trim();
            var site_url = nonNullSocialSites[currentIndex].site_url.trim();

            // ... rest of the loop body
            console.log('Site:', site, 'Site URL:', site_url);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

1.Outer Loop (for (var i = 0; i < nonNullSocialPrices.length; i += 4) {):

This loop iterates over the array nonNullSocialPrices in increments of 4, creating a new set of rows for each group of 4 social sites.

for (var i = 0; i < nonNullSocialPrices.length; i += 4) {
Enter fullscreen mode Exit fullscreen mode

2.Add a Row for Each Set of 4 Social Sites (html += '

';):

This line adds a new row (

) to the HTML for each set of 4 social sites.

html += '<div class="row">';

3.Inner Loop (for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {):

This nested loop iterates within each set of 4 social sites.
The condition j < 4 && i + j < nonNullSocialPrices.length ensures that the inner loop doesn't go beyond the bounds of the array.

for (var j = 0; j < 4 && i + j < nonNullSocialPrices.length; j++) {

4.Extract Site Information (var site = nonNullSocialPrices[i + j].site.trim();):

This line extracts the site name from the nonNullSocialPrices array, ensuring leading and trailing whitespaces are trimmed.

var site = nonNullSocialPrices[i + j].site.trim();

5.Extract Site URL Information (var site_url = nonNullSocialSites[i + j].site_url.trim();):

This line extracts the site_url from the nonNullSocialSites array, ensuring leading and trailing whitespaces are trimmed.

var site_url = nonNullSocialSites[i + j].site_url.trim();

Another Way

var sitesPerRow = 4;

for (var i = 0; i < nonNullSocialPrices.length; i++) {
    // Start a new row for every multiple of 'sitesPerRow'
    if (i % sitesPerRow === 0) {
        html += '<div class="row">';
    }

    var site = nonNullSocialPrices[i].site.trim();
    var site_url = nonNullSocialSites[i].site_url.trim();
    console.log(site_url);

    var cartSocialsObject = JSON.parse(item.cart_socials);
    var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);

    html += '<div class="col-md-3">';

    if (hasPrice) {
        // Add a link with the site_url
        html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
        html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
        html += '</a>';
    } else if (isAdded) {
        // Show the 'not added' icon in red with a checkbox and add a link with the site_url
        html += '<i class="fas fa-times" style="color:red"></i> ';
        html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
        html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i].price;
    } else {
        // Add a link with the site_url for the social site name
        html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
        // Just display the checkbox and social site name
        html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
        html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
        html += '</a>';
    }

html += '</div>';

// Close the row after 'sitesPerRow' items
if ((i + 1) % sitesPerRow === 0 || i === nonNullSocialPrices.length - 1) {
    html += '</div>';
}

}

Displaying three elements in same row 

// Assuming you want 3 social sites per row
var sitesPerRow = 3;

for (var i = 0; i < nonNullSocialPrices.length; i++) {
    // Start a new row for every multiple of 'sitesPerRow'
    if (i % sitesPerRow === 0) {
        html += '<div class="row">';
    }

    var site = nonNullSocialPrices[i].site.trim();
    var site_url = nonNullSocialSites[i].site_url.trim();
    console.log(site_url);

    var cartSocialsObject = JSON.parse(item.cart_socials);
    var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);

    html += '<div class="col-md-4">';

    if (hasPrice) {
        // Add a link with the site_url
        html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
        html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
        html += '</a>';
    } else if (isAdded) {
        // Show the 'not added' icon in red with a checkbox and add a link with the site_url
        html += '<i class="fas fa-times" style="color:red"></i> ';
        html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
        html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i].price;
    } else {
        // Add a link with the site_url for the social site name
        html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
        // Just display the checkbox and social site name
        html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
        html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
        html += '</a>';
    }

    html += '</div>';

    // Close the row after 'sitesPerRow' items
    if ((i + 1) % sitesPerRow === 0 || i === nonNullSocialPrices.length - 1) {
        html += '</div>';
    }
}

Image description

Image description

Displaying three elements in single colunm 

           var sitesPerRow = 3;

for (var i = 0; i < nonNullSocialPrices.length; i++) {
    // Start a new row for every multiple of 'sitesPerRow'
    if (i % sitesPerRow === 0) {
        html += '<div class="col">';
    }

    var site = nonNullSocialPrices[i].site.trim();
    var site_url = nonNullSocialSites[i].site_url.trim();
    console.log(site_url);

    var cartSocialsObject = JSON.parse(item.cart_socials);
    var hasPrice = item.cart_socials && Object.keys(cartSocialsObject).includes(site);

    html += '<div class="row-md-4">'; // Adjust the column size based on your layout

    if (hasPrice) {
        // Add a link with the site_url
        html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
        html += '<i class="fas fa-cart-plus"></i> <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
        html += '</a>';
    } else if (isAdded) {
        // Show the 'not added' icon in red with a checkbox and add a link with the site_url
        html += '<i class="fas fa-times" style="color:red"></i> ';
        html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
        html += ' <a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;"><span data-site="' + site + '">' + site + '</span>: </a>' + nonNullSocialPrices[i].price;
    } else {
        // Add a link with the site_url for the social site name
        html += '<a href="' + site_url + '" target="_blank" style="color: black; font-size: 16px;">';
        // Just display the checkbox and social site name
        html += '<input type="checkbox" name="socialSite" value="' + site_url + '" data-site="' + site + '" class="socialSite ' + (isAdded ? 'hideCheckboxes ' : '') + (!isLoggedIn ? 'notLoggedInClass' : '') + '">';
        html += ' <span data-site="' + site + '">' + site + '</span>: ' + nonNullSocialPrices[i].price;
        html += '</a>';
    }

    html += '</div>';

    // Close the row after 'sitesPerRow' items
    if ((i + 1) % sitesPerRow === 0 || i === nonNullSocialPrices.length - 1) {
        html += '</div>';
    }
}

Image description

Errors
Cannot read properties of undefined (reading 'site_currency')

  var site_currency = (nonNullSocialcurrency[i + j] && nonNullSocialcurrency[i + j].site_currency) ? nonNullSocialcurrency[i + j].site_currency.trim() : '';

another example

 $.each(paginatedData, function(index, item) {
        cardContent += '<div class="card">'; // Main card
        cardContent += '<div class="card-header row">';
        cardContent += '<div class="card-body row">'; 
        cardContent += '<div class="col-md-6">'; 
        cardContent += '<p class="black-text"><b>Influencer Name:</b> ' + item.slug + '</p>';
        cardContent += '<p class="black-text"><b>Task Id: </b>' + item.orders_id + '</p>';
        cardContent += '<p class="black-text"><b>Amount: </b>' + item.pay_amount + '</p>';  
        cardContent += '</div>';
        cardContent += '<div class="col-md-6">'; 
        cardContent += '<p class="black-text"><b>Task Title: </b>' + item.task_title + '</p>';
        cardContent += '<p class="black-text"><b>Influencer Status: </b>' + item.status + '</p>';   
        cardContent += '<p class="black-text"><b>Task Link: </b>' + (item.Video_link ? item.Video_link : 'not Available') + '</p>';  
        cardContent += '</div>';
        cardContent += '</div>';
        cardContent += '</div>';  
        cardContent += '<div class="card-body row">';
        cardContent += '<div class="left-content col-md-10">'; // Added 'col-md-10' class for the left content
        cardContent += '<p class="black-text"><b>Amount:</b> ' + item.amount + '</p>';  
        cardContent += '</div>';
        cardContent += '<div class="left-content col-md-1">'; // Added 'col-md-10' class for the left content
        cardContent += '<button class="btn btn-primary influencer-button"   data-orders_id="' + item.orders_id + '"   data-order_product_id="' + item.order_product_id + '" data-id="' + item.id + '">View Detail</button>';
        cardContent += '</div>';
        cardContent += '<div class="right-content col-md-1">'; // Added 'col-md-2' class for the right content
        cardContent += '<button class="btn btn-primary tasks-button" data-id="' + item.id + '">Update Status</button>';


        cardContent += '</div>';
        cardContent += '</div>';

    cardContent += '</div>'; // End of main card
});

Image description

Another Example

  $.each(paginatedData, function(index, item) {
        cardContent += '<div class="card">'; // Main card
        cardContent += '<div class="card-header row">';
        cardContent += '<div class="card-body row">'; 
        cardContent += '<div class="col-md-6">'; 
        cardContent += '<p class="black-text"><b>Influencer Name:</b> ' + item.slug + '</p>';
        cardContent += '<p class="black-text"><b>Task Id: </b>' + item.orders_id + '</p>';
        cardContent += '<p class="black-text"><b>Amount: </b>' + item.pay_amount + '</p>';  
        cardContent += '</div>';
        cardContent += '<div class="col-md-6">'; 
        cardContent += '<p class="black-text"><b>Task Title: </b>' + item.task_title + '</p>';
        cardContent += '<p class="black-text"><b>Influencer Status: </b>' + item.status + '</p>';   
        cardContent += '<p class="black-text"><b>Task Link: </b>' + (item.Video_link ? item.Video_link : 'not Available') + '</p>';  
        cardContent += '</div>';
        cardContent += '</div>';
        cardContent += '</div>';  
        cardContent += '<div class="card-body row">';
        cardContent += '<div class="left-content col-md-10">'; // Added 'col-md-10' class for the left content
        cardContent += '<p class="black-text"><b>Amount:</b> ' + item.amount + '</p>';  
        cardContent += '</div>';
        cardContent += '  <div class="right-content col-md-2" style="margin-top: 80px;">';
cardContent += '    <div class="nested-col">';
cardContent += '      <button class="btn btn-primary tasks-button" style="width: 150px;" data-id="' +item.id + '">Update Task</button>';
cardContent += '      <div style="margin-top: 5px;"></div>';
cardContent += '      <button class="btn btn-primary tasks-button" style="width: 150px;" data-id="'+item.id + '">Task Lock</button>';
cardContent += '    </div>';
cardContent += '  </div>';
        cardContent += '</div>';

    cardContent += '</div>'; // End of main card
});

Image description

Another Example

    $.each(paginatedData, function(index, item) {
    cardContent += '<div class="card">'; // Main card
    cardContent += '<div class="card-header row">';
    cardContent += '<div class="card-body row">'; 
    cardContent += '<div class="col-md-6">'; 
    cardContent += '<p class="black-text"><b>Order Id:</b> ' + item.order_id + '</p>';
    cardContent += '<p class="black-text"><b>Cart Id: </b>' + item.cart_id + '</p>';
    cardContent += '<p class="black-text"><b>Payment date: </b>' + item.cart_id + '</p>';
    cardContent += '</div>';
    cardContent += '<div class="col-md-6">'; 
    cardContent += '<p class="black-text"><b>Amount:</b> ' + item.amount + '</p>';
    cardContent += '<p class="black-text"><b>Payment ID:</b> ' + item.payment_id + '</p>'; 
    cardContent += '<p class="black-text"><b>payment status: </b>' + item.cart_id + '</p>';   
    cardContent += '</div>';
    cardContent += '</div>';
    cardContent += '</div>';

    var influencersNames = JSON.parse(item.influencer_name);
    var influencersEmails = JSON.parse(item.influencer_email);
    var productIds = JSON.parse(item.product_id);

    for (var i = 0; i < influencersNames.length; i++) {
    cardContent += '<div class="card-body row">';

    // Left content column with colspan for the p tag
    cardContent += '  <div class="left-content col-md-10">';
    cardContent += '    <div class="black-text"><b>Product Id:</b> ' + productIds[i] + ' |  ' + "   " + ' <b>Influencer email:</b> ' + influencersEmails[i] + ' |  ' + "   " + ' <b>Influencer name: </b>' + influencersNames[i] + '</div>';
    var orderStatuses = ['cart added', 'order created', 'task created', 'task locked', 'task approved', 'task completed'];

    var currentOrderStatus = 6; // You should replace this with your actual logic for the current order status

    cardContent += '    <div class="order-container">';
    for (var j = 0; j < orderStatuses.length; j++) {
        if (orderStatuses.length < 3) {
            // handle the case when there are less than 3 statuses
        } else {
            cardContent += '<div style="color: black; font-weight: bold; margin-top: 20px;">' + orderStatuses[j] + '</div>';
        }
    }
    cardContent += '    </div>';
    cardContent += '    <div class="order-container">';
    for (var j = 1; j <= orderStatuses.length; j++) {
        cardContent += '      <div class="circle' + (j <= 3 ? ' highlighted' : '') + '">' + j + '</div>';
        if (j < orderStatuses.length) {
            cardContent += '      <div class="arrow' + (j < 3 ? ' arrowhighlight' : '') + '"></div>';
        }
    }

    cardContent += '</div>';
    cardContent += '</div>';

    cardContent += '  <div class="right-content col-md-2" style="margin-top: 80px;">';
    cardContent += '    <div class="nested-col">';
    cardContent += '      <button class="btn btn-primary tasks-button" style="width: 150px;" data-id="' + productIds[i] + '">Update Task</button>';
    cardContent += '      <div style="margin-top: 5px;"></div>';
    cardContent += '      <button class="btn btn-primary tasks-lock" style="width: 150px;" data-id="' + productIds[i] + '">Task Lock</button>';
    cardContent += '    </div>';
    cardContent += '  </div>';

    // Additional CSS for the arrow and labels (moved outside the loop)
    cardContent += '<style>';
    cardContent += '  .order-container {';
    cardContent += '    position: relative;';
    cardContent += '  }';

    cardContent += '  .order-label {';
    cardContent += '    position: absolute;';
    cardContent += '    top: -20px;'; // Adjust the position of the text above the arrow
    cardContent += '    left: 50%;';
    cardContent += '    transform: translateX(-50%);'; // Center the text above the arrow
    cardContent += '  }';
    cardContent += '  .arrow {';
    cardContent += '    width: 220px;';
    cardContent += '    height: 0px;'; // Increase the height to fully connect circles
    cardContent += '    border-top: 2px solid #3498db;'; // Adjust the color as needed
    cardContent += '    border-bottom: 2px solid #3498db;'; // Adjust the color as needed
    cardContent += '    margin-top: 20px;'; // Adjust the spacing between circles
    cardContent += '  }';
    cardContent += '  .arrowhighlight {';
    cardContent += '    width: 220px;';
    cardContent += '    height: 0px;'; // Increase the height to fully connect circles
    cardContent += '    border-top: 2px solid #15e715;'; // Adjust the color as needed
    cardContent += '    border-bottom: 2px solid #15e715;'; // Adjust the color as needed
    cardContent += '    margin-top: 20px;'; // Adjust the spacing between circles
    cardContent += '  }';
    cardContent += '</style>';

    cardContent += '</div>';
}


    cardContent += '</div>'; // End of main card
});

Image description

Top comments (0)

Read next

goyalankita91 profile image

Services- Ankita

Ankita Goyal -

ykesharwaniutr_548 profile image

Question Day 3 -SVC

Yogansh -

eranshuman_339 profile image

Assignment #3 - Day 3

Anshuman Srivastava -

yashinjalal profile image

Kubernetes training -SVC

Yashin Jalal -