Codepen fails to function properly after being uploaded to a server

Question

Codepen fails to function properly after being uploaded to a server

I have encountered an issue with my code on CodePen. After exporting it as a .zip file and attempting to run it on a local server, it failed to work. I am unsure of the exact reason behind this. I made sure to include all the necessary dependencies in the HTML file by choosing to export as .zip, which should have done it automatically. Here is the code snippet:

$(function() {
  // JavaScript code here
});

@charset "UTF-8";
  /* CSS code here */
}

<script src="https://example.com/script.js"></script>
<link href="https://example.com/style.css" rel="stylesheet" />
<div class="container">
  <!-- HTML code here -->
</div>

If you want to view the actual pen, you can access it through this link:

https://codepen.io/example

javascript html css json rss

Answer 1

Answer №1

The content delivery network (cdn) is currently unavailable. It is also necessary to ensure that jquery is loaded before the date-format script.

$(function() {
  var $content = $('#jsonContent');
  var data = {
    rss_url: 'https://medium.com/feed/@SwachhCoin'
  };
  $.get('https://api.rss2json.com/v1/api.json', data, function(response) {
    if (response.status == 'ok') {
      var output = '';
      $.each(response.items, function(k, item) {
        var visibleSm;
        if (k < 3) {
          visibleSm = '';
        } else {
          visibleSm = ' visible-sm';
        }
        output += '<div class="col-sm-6 col-md-4' + visibleSm + '">';
        output += '<div class="blog-post"><header>';
        output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
        var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
        var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
        var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
        var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
        var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
        output += '<div class="blog-element"><img class="img-responsive col-12" src="' + src + '" style="padding:1px!important"></div></header>';
        output += '<div class="blog-content"><h4><a href="' + item.link + '">' + item.title + '</a></h4>';
        output += '<div class="post-meta"><span>By ' + item.author + '</span></div>';
        var yourString = item.description.replace(/<img[^>]*>/g, ""); //replace with your string.
        var maxLength = 120 // maximum number of characters to extract
        //trim the string to the maximum length
        var trimmedString = yourString.substr(0, maxLength);
        //re-trim if we are in the middle of a word
        trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
        output += '<p>' + trimmedString + '...</p>';
        output += '</div></div></div>';
        return k < 3;
      });
      $content.html(output);
    }
  });
});

@charset "UTF-8";
/* CSS styles here... */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="section blog" id="blog">
  <div class="container">
    <!---->
    <header class="section-heading">
      <h2>From The Blog</h2><span>Awesome articles from the blog</span>
    </header>
    <!---->
    <div class="section-content" id="blogContent">
      <div class="row" id="jsonContent"></div>
    </div>
    <div class="text-center"><a class="btn btn-dark" id="loadBlogPosts" href="//medium.com/@SwachhCoin">View All<span class="fa fa-angle-double-right"></span></a></div>
  </div>
  </section>
</div>

Answer 2

The content delivery network (cdn) is currently unavailable. It is also necessary to ensure that jquery is loaded before the date-format script.

$(function() {
  var $content = $('#jsonContent');
  var data = {
    rss_url: 'https://medium.com/feed/@SwachhCoin'
  };
  $.get('https://api.rss2json.com/v1/api.json', data, function(response) {
    if (response.status == 'ok') {
      var output = '';
      $.each(response.items, function(k, item) {
        var visibleSm;
        if (k < 3) {
          visibleSm = '';
        } else {
          visibleSm = ' visible-sm';
        }
        output += '<div class="col-sm-6 col-md-4' + visibleSm + '">';
        output += '<div class="blog-post"><header>';
        output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
        var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
        var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
        var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
        var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
        var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
        output += '<div class="blog-element"><img class="img-responsive col-12" src="' + src + '" style="padding:1px!important"></div></header>';
        output += '<div class="blog-content"><h4><a href="' + item.link + '">' + item.title + '</a></h4>';
        output += '<div class="post-meta"><span>By ' + item.author + '</span></div>';
        var yourString = item.description.replace(/<img[^>]*>/g, ""); //replace with your string.
        var maxLength = 120 // maximum number of characters to extract
        //trim the string to the maximum length
        var trimmedString = yourString.substr(0, maxLength);
        //re-trim if we are in the middle of a word
        trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
        output += '<p>' + trimmedString + '...</p>';
        output += '</div></div></div>';
        return k < 3;
      });
      $content.html(output);
    }
  });
});

@charset "UTF-8";
/* CSS styles here... */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="section blog" id="blog">
  <div class="container">
    <!---->
    <header class="section-heading">
      <h2>From The Blog</h2><span>Awesome articles from the blog</span>
    </header>
    <!---->
    <div class="section-content" id="blogContent">
      <div class="row" id="jsonContent"></div>
    </div>
    <div class="text-center"><a class="btn btn-dark" id="loadBlogPosts" href="//medium.com/@SwachhCoin">View All<span class="fa fa-angle-double-right"></span></a></div>
  </div>
  </section>
</div>

Codepen fails to function properly after being uploaded to a server

Answer №1

Similar questions

Creating a customized SelectField component for Material-UI v1.0.0-alpha.21 with a fix for the Menu anchorEl problem

Place the divs over the background image by using relative positioning

Achieve an exceptional design by organizing the elements to gracefully drift from the left side to the right, seamlessly cascading from

Can you tell me the name of the scrolling effect used for the background on this website?

Create a duplicate of the table and remove specific rows

Seeking out the correct method for structuring loops and callbacks within nodejs with an emphasis on asynchronous operations

Updating a specific property for each object within an array of objects in MongoDB, and inserting the object if it does not already exist

When the filter feGaussianBlur is applied to an SVG circle, it disappears on Safari but not on Chrome

Refining Calculated Attributes

Is there a way to place two input fields from different forms side by side on the same line?

What is the best way to flip the direction of the text input for a Calculator?

``There seems to be an issue with the alignment of items in the

AngularJS Dropdown in ASP.NET MVC 3

The Image component in a test within Next.js was not wrapped in an act(...) during an update

Making several fadeToggle functions with the same class name operate independently from each other

Struggling to display AJAX GET results on my webpage, although they are visible in the Google Element Inspector

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

The absence of a property map within String Flowtype has caused an issue

What is the best way to align a search box within a Bootstrap navbar?

Getting information from a JSON file with several variables: A guide for using node.js, express, and jQuery