Code Samples Archives — Results Website Design

HTML

<div class="panel-body">

  <div id="item-1" class="fruit-block peaches">
    <img src="https://resultswebsitedesign.com/path/red-peaches175x153.jpg">
    <div class="product-info-block">
      <h3>Our Finest Peaches</h3>
      <p class="product-description" data-fruit-name="peaches" data-size="6">Our peaches are grown...</p>
    </div>
    <span class="plus-or-minus icon-plus-circled"></span>
  </div>

  <div id="item-2" class="fruit-block blueberries">
    <img src="https://resultswebsitedesign.com/wp-content/path/blueberries175x153.jpg">
    <div class="product-info-block">
      <h3>Our Finest Blueberries</h3>
      <p class="product-description" data-fruit-name="blueberries" data-size="2">Our Blueberries radiate...</p>
    </div>
    <span class="plus-or-minus icon-plus-circled"></span>
  </div>

  <div id="item-3" class="fruit-block strawberries">
    <img src="https://resultswebsitedesign.com/path/strawberries175x153.jpg">
    <div class="product-info-block">
      <h3>Our Finest Strawberries</h3>
      <p class="product-description" data-fruit-name="strawberries" data-size="4">Our juicy and fresh...</p>
    </div>
    <span class="plus-or-minus icon-plus-circled"></span>
  </div>

  <div id="item-4" class="fruit-block elderberries">
    <img src="https://resultswebsitedesign.com/path/elderberries175x153.jpg">
    <div class="product-info-block">
      <h3>Our Finest Elderberries</h3>
      <p class="product-description" data-fruit-name="elderberries" data-size="1">Our signature elderberries...</p>
    </div>
    <span class="plus-or-minus icon-plus-circled"></span>
  </div>

  <div id="item-5" class="fruit-block apricots">
    <img src="https://resultswebsitedesign.com/path/apricots175x153.jpg">
    <div class="product-info-block">
      <h3>Our Finest Apricots</h3>
      <p class="product-description" data-fruit-name="apricots" data-size="5">Our plump apricots...</p>
    </div>
    <span class="plus-or-minus icon-plus-circled"></span>
  </div>

  <div id="item-6" class="fruit-block cherries">
    <img src="https://resultswebsitedesign.com/path/cherries175x153.jpg">
    <div class="product-info-block">
      <h3>Our Finest Cherries</h3>
      <p class="product-description" data-fruit-name="cherries" data-size="3">Deep red and delicious...</p>
    </div>
    <span class="plus-or-minus icon-plus-circled"></span>
  </div>

</div>

JavaScript

//ititialize click event for "largest-to-smallest"
$('.largest-to-smallest').click(function () {
  largestToSmallest = true;
  sortBySize();
});

//ititialize click event for "smallest to largest"
$('.smallest-to-largest').click(function () {
  smallestToLargest = true;
  sortBySize();
});

//ititialize click event for sorting alphabetically
$('.alphabetical').click(function () {
  alphabetize();
});

//initialize global variables to be used by sorting functions
var largestToSmallest = false;
var smallestToLargest = false;
var numberOfItems = document.getElementsByClassName('panel-body')[0].childElementCount;

//function to sort by size uses Bubble Sort algorithm
function sortBySize() {

  //Bubble Sort algorithm must run number of iterations equal to 1 less than number of items sorted to sort fully 
  for (i = 0; i < numberOfItems - 1; i++) {

    //compare each adjacent set of items, and move the larger item after the smaller item.  Number of comparisons required is one less than the number of items.
    for (j = 0; j < numberOfItems - 1; j++) {

      var $currentItem = $('.fruit-block:eq(' + j + ')');
      var $nextItem = $('.fruit-block:eq(' + (j + 1) + ')');

      //access the "data-size" attribute stored on the relevant fruit's HTML element
      var sizeOfCurrentItem = $currentItem.find('.product-description').get(0).getAttribute('data-size');
      var sizeOfNextItem = $nextItem.find('.product-description').get(0).getAttribute('data-size');

      //if "largest-to-smallest" was clicked, put larger of the two "fruit-block" compared first
      if (largestToSmallest) {

        if (sizeOfCurrentItem < sizeOfNextItem) {
          $($currentItem).insertAfter($nextItem);
        }
      }

      //if "smallest-to-largest" was clicked, put smaller of the two "fruit-block" compared first
      if (smallestToLargest) {

        if (sizeOfCurrentItem > sizeOfNextItem) {
          $($currentItem).insertAfter($nextItem);
        }
      }
    }
  }
  largestToSmallest = false;
  smallestToLargest = false;
}

//function to sort alphabetically
function alphabetize() {

  var alphabeticalArray = [];

  //cycle through each "fruit-block" 
  for (i = 0; i < numberOfItems; i++) {

    var $currentItem = $('.fruit-block:eq(' + i + ')');

    var $elementWithFruitName = $($currentItem).find('.product-description');
    var elementWithFruitName = $elementWithFruitName.get(0);

    //grab the "data-fruit-name" attribute for the current fruit being looped through
    var nameInDataAttribute = elementWithFruitName.getAttribute('data-fruit-name');

    //push fruit name coupled with the id of the larger "fruit-block" as an array of two items into the larger alphabeticalArray 
    alphabeticalArray.push([nameInDataAttribute, $($elementWithFruitName).parents('.fruit-block').attr('id')]);

  }

  //Now array is completed that contains pairs of [friut name, element id for that fruit block]
  //Sort this array alphabetically 
  alphabeticalArray.sort();

  //cycle through the alphabetized array
  for (i = 0; i < numberOfItems; i++) {

    //append the element id that is paired with each fruit as last on the page within the ".panel-body" container
    //the resulting order is aphabetical
    $(".panel-body").append($('#' + alphabeticalArray[i][1]));

  }
}

Animated Underscores

JavaScript

 jQuery(document).ready(function () {
     /*CSS transition on width of toggled class*/
     //toggle class with changed width
     jQuery(".width-parent").hover(
         //in
         function () {
             jQuery('.width-child').toggleClass('width-child-big width-child-small');

         },
         //out
         function () {
             jQuery('.width-child').toggleClass('width-child-big width-child-small');

         });
     /*CSS keyframe animation*/
     //remove class that hides .keyframe underline animation after the first requisite animation is complete.  This prevents the underline animation from being visible on page load, but allows it to happen thereafter on hover.
     setTimeout(function () {
         jQuery('.keyframe').removeClass('keyframe-temp-color');
     }, 1100);
 });
jQuery(window).on("load resize", function () {
     /*jQuery animation from center point*/
     //needs to run on load to get correct width measurement
     jQuery(".js-first").hover(
         //in 
         function () {
            var maxWidth = Math.round(jQuery('.js-first').width());
             jQuery('.js-second').animate({
                 width: maxWidth,
                 right: 0
             });
         },
         //out
         function () {
             jQuery('.js-second').animate({
                 width: 0,
                 right: '50%'
             });
         });
 });

CSS

/*heading text with changing colors*/
.see-through {
    background: url(https://resultswebsitedesign.com/wp-content/uploads/2017/10/green2-1000x100.jpg) center top;
    /* if we can clip, do it */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* fallback text color, which needs to work on the background for IE*/
    color: black;
    animation: hue 10s infinite;
    animation-delay: 3s;
}
/*color cycling animation in title text: credit animate.css website*/
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}
.rotate,
.scale,
.width-parent,
.keyframe,
.js-container {
    position: relative;
    display: inline-block;
}
.rotate::after,
.scale::after,
.keyframe::after {
    left: 0;
    top: 28px;
    position: absolute;
    content: "";
    height: 2px;
}
.rotate::after {
    width: 100%;
    background: black;
    transform: rotateY(270deg);
    transition: transform 1s ease-out;
}
.rotate:hover::after {
    transform: rotateY(180deg);
}
.scale::after {
    width: 100%;
    background: black;
    transform: scale(0);
    transition: transform 1s cubic-bezier(0.14, 0.77, 0.38, 0.97);
}
.scale:hover::after {
    transform: scale(1);
}
.keyframe::after {
    left: 50%;
    background: black;
    animation: shrink 1s;
}
/*temp bkgrnd color of .keyframe underline is transparent until the initial requisite animation completes.  This class is then removed*/
.keyframe-temp-color::after {
    background: transparent;
}
.keyframe:hover::after {
    animation: grow 1s;
}
@keyframes shrink {
    from {
        left: 0;
        width: 100%;
    }
    to {
        left: 50%;
        width: 0;
    }
}
@keyframes grow {
    from {
        left: 50%;
        width: 0;
    }
    to {
        left: 0;
        width: 100%;
    }
}
.width-child {
    position: absolute;
    height: 2px;
    background: black;
    left: 0;
    bottom: 2px;
    transition: all 1s;
}
.width-child-small {
    width: 0;
    left: 50%;
}
.width-child-big {
    width: 100%;
    left: 0;
}
.js-second {
    width: 0;
    height: 2px;
    position: absolute;
    background: black;
    right: 50%;
    bottom: 8px;
}

HTML

<div class="main-container">
    <h2 class="underline-title see-through">Expanding Underline from Center Point: 5 Approaches</h2>

    <p class="underlines-description">blah blah blah.</p>

    <h3 class="rotate">CSS transform: rotate.</h3>
    <br>
    <h3 class="scale">CSS transform: scale.</h3>
    <br>
    <h3 class="width-parent">CSS transition on width & position.<span class="width-child width-child-small"></span></h3>
    <br>
    <h3 class="keyframe keyframe-temp-color">CSS keyframe animation.</h3>
    <br>
    <div class="js-container">
        <h3 class="js-first">jQuery animation.</h3>
        <div class="js-second"></div>
    </div>
</div>

Local Weather App

JavaScript

//get date object
var date = new Date();
var hour = date.getHours();

jQuery(document).ready(function () {

  function getLocation() {
    //credit to W3schools.com for geolocation code
    //if a geolocation object exists...
    if (navigator.geolocation) {
      //call the object's getCurrentPosition() method; once a position is obtained, execute the callback function showPosition, and in the event a geolocation error occurs, execute the callback function showError
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    //if a geolocation object does not exist...
    else {
      jQuery('#details-container').css('display', 'block');
      jQuery('.weather-title').html('<span>Geolocation is not supported by your browser.<span>');
      jQuery('#veil').css('display', 'none');
    }
  }

  //the callback function which uses the geolocation object to display the weather
  function showPosition(position) {

    jQuery('#details-container').css('display', 'block');

    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    var weatherURL = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=KEYGOESHERE";

    //get weather object from open weather api
    jQuery.getJSON(weatherURL, function (json) {

      jQuery('#toggle-temp').addClass('wpforms-submit').css('display', 'block');

      jQuery('.weather-title').html('<span> Current Weather Report for ' + json["name"] + ':' + '</span>');

      jQuery('.conditions').html('<span>' + json["weather"][0]["description"] + '</span>');

      var weatherID = json["weather"][0]["id"];
      var baseURL = "https://openweathermap.org/img/w/";

      //if it is night based on the date object, do the following...
      if ((hour >= 0 && hour <= 5) || (hour >= 18 && hour <= 23)) {
        console.log("It's night (b/t midnight and 5:59am or b/t 6pm and 11:59pm)");

        //display a semi-transparent black layer over the weather image for night effect
        jQuery('#veil').css('display', 'block');

        //dispay a different weather background image and weather icon for each of six weather categories
        switch (true) {
        case (weatherID >= 200 && weatherID <= 232): //thunderstorm
          jQuery('#weatherIcon').attr('src', baseURL + "11n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/thunderstorm1080x720.jpg)');
          break;
        case ((weatherID >= 300 && weatherID <= 321) || (weatherID >= 500 && weatherID <= 531)): //"drizzle" or "rain" respectively, using same pic
          jQuery('#weatherIcon').attr('src', baseURL + "09n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/rain1080x760.jpg)');
          break;
        case (weatherID >= 600 && weatherID <= 622): //snow
          jQuery('#weatherIcon').attr('src', baseURL + "13n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/snow1080x810.jpg)');
          break;
        case (weatherID >= 701 && weatherID <= 781): //mist, smoke, haze, sand/dust whirls, fog, dust, volcanic ash, squalls, tornado
          jQuery('#weatherIcon').attr('src', baseURL + "50n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/windmill1080x810.jpg)');
          break;
        case (weatherID === 800): //clear
          jQuery('#weatherIcon').attr('src', baseURL + "01n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/clear1080x720.jpg)');
          break;
        case (weatherID >= 801 && weatherID <= 804): //clouds
          jQuery('#weatherIcon').attr('src', baseURL + "03n.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/cloudy1080x720.jpg)');
          break;
        }

        //if it is day based on the date object, do the following...
      } else {
        console.log("it's day");

        //dispay a different weather background image and weather icon for each of six weather categories
        switch (true) {
        case (weatherID >= 200 && weatherID <= 232): //thunderstorm
          jQuery('#weatherIcon').attr('src', baseURL + "11d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/thunderstorm1080x720.jpg)');
          break;
        case ((weatherID >= 300 && weatherID <= 321) || (weatherID >= 500 && weatherID <= 531)): //"drizzle" or "rain" respectively, using same pic
          jQuery('#weatherIcon').attr('src', baseURL + "09d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/rain1080x760.jpg)');
          break;
        case (weatherID >= 600 && weatherID <= 622): //snow
          jQuery('#weatherIcon').attr('src', baseURL + "13d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/snow1080x810.jpg)');
          break;
        case (weatherID >= 701 && weatherID <= 781): //mist, smoke, haze, sand/dust whirls, fog, dust, volcanic ash, squalls, tornado
          jQuery('#weatherIcon').attr('src', baseURL + "50d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/windmill1080x810.jpg)');
          break;
        case (weatherID === 800): //clear
          jQuery('#weatherIcon').attr('src', baseURL + "01d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/sunny1080x723.jpg)');
          break;
        case (weatherID >= 801 && weatherID <= 804): //clouds
          jQuery('#weatherIcon').attr('src', baseURL + "03d.png");
          jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/05/cloudy1080x720.jpg)');
          break;
        }
      }

      //convert source Kelvin temp to Fahrenheit and Celsius
      var kelvinTemp = json["main"]["temp"];
      var fahrTemp = Math.round(((kelvinTemp - 273.15) * (9 / 5)) + 32);
      var celsTemp = Math.round(kelvinTemp - 273.15);

      //display Fahrenheit temp by default
      jQuery('#temp-report').html("Temperature: " + fahrTemp + "°" + " F");

      //when the toggle-temp button is clicked, check to see if it reads Celsius or Fahrenheit
      jQuery('button#toggle-temp').click(function () {

        //if the button reads "Celsius"...
        if (jQuery('button#toggle-temp:contains(Celsius)').length !== 0) {
          //display the temp in Celsius
          jQuery('#temp-report').html('Temperature: ' + celsTemp + '°' + ' C');
          //make the button text read "to Fahrenheit"
          jQuery('button#toggle-temp').html('to Fahrenheit');
        }
        //if the button reads "Fahrenheit"...
        else if (jQuery('button#toggle-temp:contains(Fahrenheit)').length !== 0) {
          //display the temp in Fahrenheit
          jQuery('#temp-report').html('Temperature: ' + fahrTemp + '°' + ' F');
          //make the button text read "to Celsius"
          jQuery('button#toggle-temp').html('to Celsius');
        }
      });
    });
  }
  getLocation();

  //callback function which handles getGeolocation() errors    
  function showError(error) {
    //credit to W3schools.com for error handling
    jQuery('#toggle-temp').css('display', 'none');
    jQuery('#details-container').css('display', 'block');
    switch (error.code) {
    case error.PERMISSION_DENIED:
      jQuery('.weather-title').html('<span>Your settings denied the request for geolocation.  Please allow geolocation in your browser and/or OS settings so your local weather may be displayed.<span>');
      jQuery('#veil').css('display', 'none');
      break;
    case error.POSITION_UNAVAILABLE:
      jQuery('.weather-title').html('<span>Location information is unavailable, so the weather for your location cannot be displayed.<span>');
      jQuery('#veil').css('display', 'none');
      break;
    case error.TIMEOUT:
      jQuery('.weather-title').html('<span>The request to get your location timed out, so weather for your location cannot be displayed.<span>');
      jQuery('#veil').css('display', 'none');
      break;
    case error.UNKNOWN_ERROR:
      jQuery('.weather-title').html('<span>An unknown error occurred, so weather for your location cannot be displayed. <span>');
      //    jQuery('#weather-report').css('background-image', 'url(https://resultswebsitedesign.com/wp-content/uploads/2017/06/geolocation1080x720.jpg)');
      jQuery('#veil').css('display', 'none');
      break;
    }
  }

  //prevent default api service failure message from flashing before a successful api call can complete and populate the widget
  setTimeout(function () {

    //detect if .weather-title has been populated due to successful api call or geolocation error info
    if (jQuery('.weather-title').text().length === 0) {

      jQuery('.weather-title').html('<span>An API service required to fetch the weather for your location is temporarily unavailable.  Please try again later.<span>');
    }
  }, 1000);
});

CSS

  .weather-title {
    text-align: center;
    padding-top: 15px;
  }  
  .conditions {
    text-align: center;
    text-transform: capitalize;
  } 
  .flex-container {
    display: flex;
    justify-content: center;
    width: 100%;
  } 
  #weather-report {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    min-height: 720px;
    position: relative;
    border-radius: 10px;
    background-position: center;
  } 
  #veil,
  #default-background {
    width: 100%;
    min-height: 720px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
  }  
  #veil {
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    display: none;
  }  
  #default-background {
    z-index: -1;
    background: url(https://resultswebsitedesign.com/wp-content/uploads/2017/06/geolocation1080x720.jpg) center;
    display: block;
  }
  #details-container {
    /*prevent display until it is known whether geolocation is allowed*/
    display: none;
    position: relative;
    /*position weather details in layer above veil*/
    z-index: 2;
    max-width: 500px;
    background: rgba(255, 255, 255, .5);
    padding: 0 10px;
    margin: 0 auto;
    border-radius: 10px;
    top: 15px;
  } 
  #toggle-temp {
    /*prevent display until it is known whether geolocation is allowed*/
    display: none;
  }

Category: Code Samples

Pomodoro Clock

Wikipedia Viewer

Twitch Live Stream Status

Tic Tac Toe Game

Electronic Calculator

Simon Game

CSS Grid and Flexbox

Bubble Sort Algorithm

Animated Underscores

Local Weather App