Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <div id="wrap">
    <div id="main" class="container clear-top text-center">

      <!--  nav menu sticky -->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="https://en.wikipedia.org/wiki/FreeCodeCamp" target="_blank">&nbsp;<i class="fa fa-wikipedia-w fa-1" title="wikipedia!" aria-hidden="true"></i>&nbsp;</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
              <div class="input-group">
                <input id="searchText" type="text" class="form-control" placeholder="Search for..." />
                <span class="input-group-btn">
                  <button id="searchButton" class="btn btn-secondary" type="button">Go!</button>
                </span>
              </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a id="randomArticleButton" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Random page!</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!--  nav menu sticky -->

      <div id="idPaddingPanel" style="height:130px">
      </div>

      <!-- suggestion, totalhits -->
      <div class="container-fluid">
        <div id="idResultsPanel" class="panel panel-default">
          <!-- Default panel contents -->
          <div id="idResultsNotFoundPanel" class="panel-heading hidden">
            Found 0 results for <span class="clsSearchTextLabel"></span></div>
          <div id="idResultsFoundPanel" class="panel-heading hidden">Showing <span id="idShownHits">10</span> of <span id="idTotalHits">234053</span> results for <span class="clsSearchTextLabel">"italia"</span></div>

          <div id="idSearchSomethingPanel" class="panel-body">
            Search something!
          </div>

          <!-- list of results -->
          <ul id="idResultList" class="list-group hidden">
          </ul>
          <!-- end: list of results -->
        </div>
      </div>
      <!-- end: suggestion, totalhits -->

      <!-- button more -->
      <div class="container-fluid">
        <!-- warning alert -->
        <div  id="warningAlert" class="alert alert-danger alert-dismissible hidden" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <i class="fa fa-exclamation-triangle fa-1x" aria-hidden="true"></i><strong> Oh snap!</strong> There seems to be a problem loading the data. Try again later!
        </div>
        <!-- spinning icon -->
        <div id="spinningIcon" class="hidden"><i class="fa fa-refresh fa-spin fa-2x"></i></div>
        <!-- button more -->
        <button id="showMoreButton" type="button" class="btn btn-primary hidden">Show More</button>
        <input id="idNextOffset" type="hidden" name="idNextOffset" value="0">
        <input id="idPreviousSearchText" type="hidden" name="idPreviousSearchText" value="">
      </div>

      <!-- end: button more -->


    </div><!-- container -->
  </div><!--   wrap -->

  <!-- footer -->
  <footer class="bg-footer footer-app-colophon text-gray-light text-sm text-center">
    <p>Bootstrap theme designed and coded with &nbsp;<i class="fa fa-floppy-o fa-1" title="floppy!" aria-hidden="true"></i>&nbsp; by
      <a href="https://codepen.io/lorepirri/full/WpBJKO/" title="lorepirri" target="_blank">lorepirri</a>
      :)</p>
  </footer>

              
            
!

CSS

              
                $widget-bg-color: #0095FF;
$widget-color: white;
$widget-greyed-color: grey;

$body-bg-color: white;
$body-color: #435071;

  .bg1 {
    background-color: yellow;
  }
  .bg2 {
    background-color: green;
  }
  .bg3 {
    background-color: brown;
  }

  body {
    padding-top: 70px; // needed for the sticky nav bar
    background-color: $body-bg-color;
    color: $body-color;
    font-size: 14px;
    font-weight: 300;
    font-family: RobotoDraft, Roboto, sans-serif;
  }

  .fa-twitter:hover {
    color: #1da1f2;
    text-decoration: none;
  }

  .fa-exclamation-triangle {
    color: orange;
    text-decoration: none;
  }

  #spinningIcon {
    color: grey;
  }

  .itemSnippet {
    text-align: left;
    padding-top: 5px;
  }
  .itemTitle {
    font-weight: 400;    
    text-align: left;
    padding-top: 10px;
  }
  .itemTimestamp {
    color: green;
    text-align: left;
    font-size: 12px;
    padding-top: 5px;
  }
  .searchmatch {
    background-color: yellow;
  }

  // a {
  // //color: #435071;
  //   text-decoration: none;
  // }
  // a.disabled {
  //   pointer-events: none;
  //   cursor: default;
  // }
  //
  // a:hover {
  //   color: $widget-color;
  //   text-decoration: none;
  // }

  // a:-webkit-any-link {
  // text-decoration:none !important;
  // /* https://www.google.com/support/forum/p/Chrome/thread?tid=44100701f93d5951&hl=en */
  // }

  footer {
    font-size: 14px;
    font-weight: 300;
    padding-top: 30px;
    padding-bottom: 30px;
    color: grey;
    position: relative;
    margin-top: -60px; /* negative value of footer height */
    height: 60px;
    clear:both;
    padding-top:20px;
  }

/* this makes the footer stays always down */
html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

              
            
!

JS

              
                
function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

var defaultResponse = {"batchcomplete":"","query":{"searchinfo":{"totalhits":1,"suggestion":"italian","suggestionsnippet":"<em>italian</em>"},"search":[{"ns":0,"title":"Vincenzo Rossello","size":1605,"wordcount":70,"snippet":"Vincenzo Rossello (16 February 1923 – 20 January 1989) was an <span class=\"searchmatch\">Italiay</span> professional road bicycle racer from 1946 to 1957. He won two stages in the Tour","timestamp":"2017-02-16T12:42:10Z"}]}};

function showWarning() {
  $("#warningAlert").removeClass("hidden"); // show warning
}
function hideWarning() {
  $("#warningAlert").addClass("hidden"); // hide warning
}
function showSpinning() {
  $("#spinningIcon").removeClass("hidden");
}
function hideSpinning() {
  $("#spinningIcon").addClass("hidden"); // hide warning
}
function showShowMore() {
  $("#showMoreButton").removeClass("hidden");
}
function hideShowMore() {
  $("#showMoreButton").addClass("hidden");
}

function disableUIinteraction() {

  $("#idSearchSomethingPanel").addClass('hidden');

  $("#searchButton").addClass('disabled'); // disable
  $("#searchText").addClass('disabled'); // disable
  $("#warningAlert").addClass("hidden");

  hideShowMore();
  hideWarning();
  showSpinning();
  console.log("disable UI interaction");
}

function enableUIinteraction() {
  $("#searchButton").removeClass('disabled'); // disable
  $("#searchText").removeClass('disabled'); // disable
  $("#warningAlert").addClass("hidden");

  hideSpinning();
  console.log("enable UI interaction");
}

function resetSearchUI() {
  // when a new search is done
  $("#idResultsPanel").addClass('hidden'); // show results panel
  $("#idPaddingPanel").removeClass("hidden"); // hide a padding
  $("#idResultList").html(""); // reset list
  $("#idResultList").addClass("hidden");
}

function listResultsToHtml(ListResults) {
  var newElements = "";
  // for each result in list, apply an HTML template
  for (var i = 0; i < ListResults.length; i++) {
    newElements += '<li class="list-group-item"><div class="itemTitle">';
    newElements += '<a href="http://en.wikipedia.org/wiki/' + fixedEncodeURIComponent(ListResults[i].title) + '" target="_blank">';
    newElements += ListResults[i].title + '</a></div>';
    newElements += '<div class="itemSnippet">' +  ListResults[i].snippet + '</div>';
    newElements += '<div class="itemTimestamp"><i>' + ListResults[i].timestamp + '</i></div></li>';
  }
  //console.log(newElements);
  return newElements;
}

function updateUI(UIParams) {
  // after each search/show more

  $("input#idPreviousSearchText").val(UIParams.searchText);
  $("input#idNextOffset").val(UIParams.nextOffset);

  // set search text in label
  $(".clsSearchTextLabel").html("\"" + UIParams.searchText + "\"");

  if (UIParams.totalHits > 0) {
    // if some result found...

    $("#idPaddingPanel").addClass("hidden"); // hide a padding

    $("#idTotalHits").html(UIParams.totalHits); // set total hits found
    $("#idResultsNotFoundPanel").addClass("hidden"); // hide "no result" panel
    $("#idResultsFoundPanel").removeClass('hidden'); // show "results found" panel

    // convert result list into "<li>" elements
    var newElements = listResultsToHtml(UIParams.listResults);
    // append them into existing search (it was zeroed for new searches)
    $("#idResultList").append(newElements);
    // show the whole class
    $("#idResultList").removeClass("hidden");
    // show total hints shown in the label
    $("#idShownHits").html($("#idResultList li").length);
  } else {

    // no results
    resetSearchUI();
    // show  "no result" panel
    $("#idResultsNotFoundPanel").removeClass("hidden");
    // hide "results found" panel
    $("#idResultsFoundPanel").addClass('hidden');
  }

  // show the whole thing
  $("#idResultsPanel").removeClass('hidden'); // show results panel

  if (UIParams.showShowMore) {
    showShowMore();
  } else {
    hideShowMore();
  }

  console.log("update UI");
}

function formatData(response, searchText) {
  // convert response into UIParams
  var showShowMore = ("continue" in response); // true if "continue" obj was specified

  var nextOffset = 0;
  if (showShowMore && response.continue.sroffset) {
    nextOffset = response.continue.sroffset;
  }
  var totalhits = 0;
  var suggestion = "";
  var suggestionSnippet = "";
  var listResults = [];
  if (response.query) {

    if (response.query.searchinfo) {
      totalhits = response.query.searchinfo.totalhits;
      suggestion = response.query.searchinfo.suggestion?response.query.searchinfo.suggestion:"";
      suggestionSnippet = response.query.searchinfo.suggestionsnippet?response.query.searchinfo.suggestionsnippet:"";
    }

    if (response.query.search) {
      listResults = response.query.search;
    }
  }

  console.log("format data");
  var UIParams = {
    searchText: searchText,
    totalHits: totalhits,
    suggestion: suggestion,
    suggestionSnippet: suggestionSnippet,
    nextOffset: nextOffset,
    showShowMore: showShowMore,
    listResults: listResults
  };
  //console.log("=======================================");
  //console.log(UIParams);
  return UIParams;
}

function fetchData(searchText, nextOffset) {

  disableUIinteraction(); // update UI

  var endpoint = "https://en.wikipedia.org/w/api.php";
  var querystring = "?format=json&action=query&list=search&callback=?";
  querystring += "&srsearch=" + searchText + "&sroffset=" + nextOffset;
  var requestURL = endpoint + querystring;

   $.getJSON(requestURL ,function(response) {
       console.log('success!');
       enableUIinteraction(); // update UI
       showShowMore();
       updateUI(formatData(response, searchText)); // update UI
       //console.log(JSON.stringify(response));
    }).fail( function(d, textStatus, error) {
        console.error("getJSON failed, status: " + textStatus + ", error: "+error);
        enableUIinteraction(); // update UI
        showWarning();
        showShowMore();
        updateUI(formatData(defaultResponse, searchText)); // update UI
    });

}

//

$(document).ready(function() {

  $("#showMoreButton").on("click", function() {

    //search with an offset
    var searchText = $("input#idPreviousSearchText").val();
    var nextOffset = $("input#idNextOffset").val();
    console.log("show more search: " + searchText + ", starting from: " + nextOffset);
    fetchData(searchText, nextOffset);
  });

  $("#searchButton").on("click", function() {

    //search with an offset
    var searchText = $("input#searchText").val();
    var nextOffset = "0";
    console.log("new search: " + searchText + ", starting from: " + nextOffset);
    resetSearchUI();
    fetchData(searchText, nextOffset);
  });

  $('#searchText').keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13') {
      $("#searchButton").click(); // simulate a click on search button
      event.preventDefault(); // prevent form submission on enter
      return false;           // http://stackoverflow.com/questions/13551668/how-prevent-submit-on-press-enter-in-twitter-bootstrap-typeahead-plugin
    }
  });

});

              
            
!
999px

Console