LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Random Quote Guessing Game

by Xerxes Clayton
CSS
html, body {
  margin: 0px;
  height: 100%;
  max-width: 100%;
  overflow-y: hidden;
  background-color: #e6e6e6;
}

#intro {
  margin: 10% 15% 0px 15%;
  padding: 0px;
  font-family: Brush Script MT;
  font-size: 10vmin;
  color: darkslategray;
  z-index: 0;
  display: flex;
}
@media screen and (max-width: 400px) {
  #intro {
    font-size: 40px;
  }
}

#background {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  padding-bottom: 0px;
}

.screen {
  background-image: url("");
  background-size: cover;
  background-position: center;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding-bottom: 0px;
  overflow-x: hidden;
}

.backup {
  background-image: url("");
  background-size: cover;
  background-position: center;
  overflow: auto;
  width: 100%;
  height: 100%;
  padding-bottom: 0px;
  overflow-x: hidden;
}

.title {
  margin: 0px 0px 0px 0px;
  padding: 15px 0px 100px 0px;
}

#quotePic {
  z-index: -2;
  position: relative;
  top: 200px;
  left: 200px;
}

.quoteBox {
  z-index: 1;
  min-width: 300px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
  position: relative;
  padding: 30px 20px 35px 20px;
  margin: 0% 30% 40px 30%;
  display: flex;
  flex-direction: row;
}

#quoteText {
  text-align: center;
  margin: auto !important;
  font-size: 18px;
  padding: 0px;
}

.infoBox {
  z-index: 2;
  border-radius: 6px;
  background: rgba(122, 154, 154, 0.7);
  color: white;
}

.infoBoxRefresh {
  position: absolute;
  top: -29px;
  right: -27px;
}

.infoBoxScore {
  position: absolute;
  top: -54px;
  left: 3px;
}

.infoBoxPhoto {
  position: absolute;
  bottom: 1px;
}

.infoBoxRefresh::after {
  content: " ";
  position: absolute;
  top: 100%;
  /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(122, 154, 154, 0.7) transparent transparent transparent;
}

.infoBoxScore::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: rgba(122, 154, 154, 0.7) transparent transparent transparent;
}

.infoBoxPhoto::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%;
  /* To the right of the tooltip */
  margin-top: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(122, 154, 154, 0.7);
}

.infoText {
  font-size: 14px !important;
  margin: auto;
  padding: 2px 5px;
}

#infoButton {
  background-color: transparent;
  outline: none !important;
  color: black;
  padding: 5px;
  position: absolute;
  bottom: -3px;
  left: 3px;
}

#tweetButton {
  background-color: transparent;
  outline: none !important;
  position: absolute;
  bottom: 5px;
  right: 8px;
}

#refreshButton {
  background-color: transparent;
  outline: none !important;
  color: black;
  padding: 5px;
  position: absolute;
  top: 3px;
  right: 4px;
  display: flex;
}

.answer {
  text-align: center;
  outline: none !important;
  margin: 10px;
  padding: 5px 13px 5px 13px;
  border: 2px solid black;
  border-radius: 12px;
  font-size: 20px;
  background-color: rgba(200, 200, 255, 0.8);
  animation-delay: 0.4s;
  transition-duration: 0.5s;
}

.answer:hover {
  background-color: rgba(160, 160, 255, 0.8);
}

#photographerCredit {
  color: black;
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 2px 5px;
  border: 1px solid black;
  background-color: rgba(160, 160, 255, 0.8);
}

#backupPhotographerCredit {
  color: black;
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 2px 5px;
  border: 1px solid black;
  background-color: rgba(160, 160, 255, 0.8);
}

.centered {
  text-align: center;
}

.correct {
  background-color: #1b9c08 !important;
}

.incorrect {
  background-color: rgba(216, 42, 7, 0.8) !important;
}

.loader-frame {
  width: 70px;
  height: 70px;
  margin: 5% 0px 0px -35px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.loader1, .loader2 {
  position: absolute;
  border: 5px solid transparent;
  border-radius: 50%;
}

.loader1 {
  width: 70px;
  height: 70px;
  border-top: 5px solid #9696ff;
  border-bottom: 5px solid #9696ff;
  animation: clockwisespin 2.5s linear infinite;
}

.loader2 {
  width: 60px;
  height: 60px;
  border-left: 5px solid #618181;
  border-right: 5px solid #618181;
  top: 5px;
  left: 5px;
  animation: counterclockwisespin 2.5s linear infinite;
}

@keyframes clockwisespin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes counterclockwisespin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.flexContainer {
  display: flex;
  justify-content: center;
}

.startButton {
  width: 15%;
  height: 10%;
  min-width: 100px;
  max-width: 150px;
  min-height: 50px;
  max-height: 100px;
  outline: none !important;
  font-size: 20px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 56%;
  background-color: #618181 !important;
}

.score {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px 8px 0px 0px;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  top: -21px;
  left: 13px;
  margin: auto !important;
  padding: 0px 10px 0px 10px;
}

#xerxes {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: Brush Script MT;
  font-size: 5vmin;
  color: darkslategray;
}

#authorHint {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translate(-50%);
  margin: auto;
  font-size: 16px;
}
JS
$(document).ready(function() {
  var randomImage = "";
  var randomImage2 = "";
  var realAuthor = "";
  var author = "";
  var randomNum = "";
  var myArr = [];
  var photoObj = {};
  var score = 0;
  var testVar;
  var firstClick = 0;

  function loadingPage() {
    testVar = setTimeout(showPage, 3000);
  }

  function showPage() {
    $(".loader-frame").fadeOut("slow", function() {
      $("#startButton").fadeIn("slow", function() {});
    });
  }

  function newImage() {
    var getPhoto = new XMLHttpRequest();
    getPhoto.open(
      "GET",
      "https://api.unsplash.com/photos/random/?client_id=165c0af0ea6f8f70a5c8f016a1df258ee7f957abfdb6d565cf0ec365a8561c6a&collections=140375"
    );

    function properCase(photographer) {
      var convertToArray = photographer.toLowerCase().split(" ");
      var result = convertToArray.map(function(val) {
        return val.replace(val.charAt(0), val.charAt(0).toUpperCase());
      });
      return result.join(" ");
    }

    getPhoto.onload = function() {
      var backgroundPhoto = JSON.parse(getPhoto.responseText);
      randomImage = backgroundPhoto["urls"]["full"];
      var photographer = backgroundPhoto["user"]["name"];
      var portfolioURL = backgroundPhoto["user"]["portfolio_url"];
      //console.log(randomImage);
      //getPhoto.onreadystatechange = function() {
      //if (this.readyState == 4 && this.status == 200) {
      $(".screen").css("background-image", "url('" + randomImage + "')");
      $("#anchor").attr("href", portfolioURL);
      $("#photographerCredit").text(properCase(photographer));
      //}
      //}
    };
    getPhoto.send();
  }

  function backupImage() {
    var getPhoto2 = new XMLHttpRequest();
    getPhoto2.open(
      "GET",
      "https://api.unsplash.com/photos/random/?client_id=165c0af0ea6f8f70a5c8f016a1df258ee7f957abfdb6d565cf0ec365a8561c6a&collections=140375"
    );

    function properCase(photographer) {
      var convertToArray = photographer.toLowerCase().split(" ");
      var result = convertToArray.map(function(val) {
        return val.replace(val.charAt(0), val.charAt(0).toUpperCase());
      });
      return result.join(" ");
    }

    getPhoto2.onload = function() {
      var backgroundPhoto2 = JSON.parse(getPhoto2.responseText);
      randomImage2 = backgroundPhoto2["urls"]["full"];
      var photographer = backgroundPhoto2["user"]["name"];
      var portfolioURL = backgroundPhoto2["user"]["portfolio_url"];
      //console.log(randomImage2);
      //console.log(portfolioURL);
      //console.log(photographer);
      //getPhoto.onreadystatechange = function() {
      //if (this.readyState == 4 && this.status == 200) {
      $(".backup").css("background-image", "url('" + randomImage2 + "')");
      $("#backupAnchor").attr("href", portfolioURL);
      $("#backupPhotographerCredit").text(properCase(photographer));
      //}
      //}
    };
    getPhoto2.send();
  }

  function nextQuote() {
    //newImage();
    jsonQuote(author, Math.floor(Math.random() * 100000));
    jsonQuote(author, Math.floor(Math.random() * 100000));
    jsonQuote(author, Math.floor(Math.random() * 100000));
  }

  function doubleAuthor() {
    if (
      myArr[0][0] == myArr[1][0] ||
      myArr[0][0] == myArr[2][0] ||
      myArr[2][0] == myArr[1][0]
    ) {
      nextQuote();
    }
  }

  function jsonQuote(author, randomNum) {
    var url =
      "https://api.forismatic.com/api/1.0/?method=getQuote&key=" +
      randomNum +
      "&lang=en&format=jsonp&jsonp=?";

    $.getJSON(url, function(json) {
      author = json.quoteAuthor;
      if (author == "" || author == " ") {
        author = "Anonymous";
      }
      myArr.push([author, randomNum]);
      //console.log(myArr)

      if (myArr.length === 3) {
        doubleAuthor();
        var jsonQuote = json.quoteText;
        realAuthor = author;

        // Sort Authors randomly
        myArr.sort(function(a, b) {
          return a[1] - b[1];
        });

        $("#authorButton").fadeIn(1500);

        // Add quotes and author buttons
        $(".message").text(jsonQuote);
        $("#answer0").text(myArr[0][0]);
        $("#answer1").text(myArr[1][0]);
        $("#answer2").text(myArr[2][0]);
        myArr = [];
      }
    });
  }

  function tweetQuote() {
    window.open(
      "https://twitter.com/intent/tweet?text=" +
        '"' +
        document.getElementById("quoteText").innerHTML +
        '"' +
        "  - " +
        realAuthor
    );
  }

  loadingPage();
  newImage();
  //backupImage();

  $(".startButton").on("click", function() {
    $("#startButton")
      .add($("#intro"))
      .fadeOut("fast", function() {});
    $("#xerxes").fadeOut("fast", function() {});
    $("#screen").fadeIn(2000, function() {
      $("#quoteBox")
        .css("display", "flex")
        .addClass("animated bounceInUp");
      $("#photographerCredit")
        .css("display", "inherit")
        .addClass("animated bounceInUp");
      $("#refreshButton").trigger("click");
    });
    /*setTimeout(function() {
        $("#screen").removeClass(".screen");
      }, 6000);
    setTimeout(function() {
        $("#backup").fadeIn("slow");
      }, 6500);*/
    //var testy = document.getElementById("screen")
    //console.log("test");
  });

  $("#refreshButton").on("click", function() {
    if (firstClick == 0) {
      $("#answer0")
        .css("display", "initial")
        .addClass("animated bounceInRight");
      $("#answer1")
        .css("display", "initial")
        .addClass("animated bounceInLeft");
      $("#answer2")
        .css("display", "initial")
        .addClass("animated bounceInRight");
      nextQuote();
      firstClick++;
    } else if (document.getElementById("answer0").innerHTML == realAuthor) {
      score = -1;
      $("#answer0").trigger("click");
      setTimeout(function() {
        newImage();
      }, 1500);
      //newImage();
    } else if (document.getElementById("answer1").innerHTML == realAuthor) {
      score = -1;
      $("#answer1").trigger("click");
      setTimeout(function() {
        newImage();
      }, 1500);
    } else if (document.getElementById("answer2").innerHTML == realAuthor) {
      score = -1;
      $("#answer2").trigger("click");
      setTimeout(function() {
        newImage();
      }, 1500);
    }
  }); //refreshButton Close

  $("#tweetButton").on("click", function() {
    tweetQuote();
  });

  // Show tooltips when mouse hovers over info
  document.getElementById("infoButton").onmouseenter = function() {
    $("#infoBoxRefresh")
      .fadeIn("slow")
      .css("display", "flex");
    $("#infoBoxScore")
      .fadeIn("slow")
      .css("display", "flex");
    $("#infoBoxPhoto")
      .fadeIn("slow")
      .css("display", "flex");
    $("#infoBox").css("height", "20px");
    $("#infoBox").css("width", "80px");
    var photoButtonWidth = $("#photographerCredit").innerWidth();
    $("#infoBoxPhoto").css("right", photoButtonWidth + 11);
  };

  // Remove toltips when mouse leaves info button
  document.getElementById("infoButton").onmouseleave = function() {
    $("#infoBoxRefresh").fadeOut("slow");
    $("#infoBoxScore").fadeOut("slow");
    $("#infoBoxPhoto").fadeOut("slow");
  };

  $("#answer0").click(function() {
    $(this)
      .prop("disabled", true)
      .css("opacity", 1);
    $("#answer1")
      .prop("disabled", true)
      .css("opacity", 1);
    $("#answer2")
      .prop("disabled", true)
      .css("opacity", 1);
    var answer0 = document.getElementById("answer0").innerHTML;
    var answer1 = document.getElementById("answer1").innerHTML;
    var answer2 = document.getElementById("answer2").innerHTML;

    if (answer0 == realAuthor) {
      score++;
      $("#answer0").addClass("correct");
      console.log("Answer0 is correct");
      $("#answer1").addClass("incorrect");
      $("#answer2").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer0")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
    } else if (answer1 == realAuthor) {
      $("#answer0").addClass("incorrect");
      $("#answer1").addClass("correct");
      $("#answer2").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer1")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer0")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
      score = 0;
    } else if (answer2 == realAuthor) {
      $("#answer0").addClass("incorrect");
      $("#answer1").addClass("incorrect");
      $("#answer2").addClass("correct");

      setTimeout(function() {
        nextQuote();
        $("#answer2")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer0")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
      score = 0;
    }
    $(".score").html(score);
  });

  $("#answer1").click(function() {
    $(this)
      .prop("disabled", true)
      .css("opacity", 1);
    $("#answer0")
      .prop("disabled", true)
      .css("opacity", 1);
    $("#answer2")
      .prop("disabled", true)
      .css("opacity", 1);
    var answer0 = document.getElementById("answer0").innerHTML;
    var answer1 = document.getElementById("answer1").innerHTML;
    var answer2 = document.getElementById("answer2").innerHTML;

    if (answer1 == realAuthor) {
      score++;
      $("#answer1").addClass("correct");
      $("#answer0").addClass("incorrect");
      $("#answer2").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer1")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer0")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
    } else if (answer0 == realAuthor) {
      $("#answer0").addClass("correct");
      $("#answer1").addClass("incorrect");
      $("#answer2").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer0")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
      score = 0;
    } else if (answer2 == realAuthor) {
      $("#answer0").addClass("incorrect");
      $("#answer1").addClass("incorrect");
      $("#answer2").addClass("correct");

      setTimeout(function() {
        nextQuote();
        $("#answer0")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("correct")
          .prop("disabled", false);
      }, 1500);
      score = 0;
    }
    $(".score").html(score);
  });

  $("#answer2").click(function() {
    $(this)
      .prop("disabled", true)
      .css("opacity", 1);
    $("#answer0")
      .prop("disabled", true)
      .css("opacity", 1);
    $("#answer1")
      .prop("disabled", true)
      .css("opacity", 1);
    var answer0 = document.getElementById("answer0").innerHTML;
    var answer1 = document.getElementById("answer1").innerHTML;
    var answer2 = document.getElementById("answer2").innerHTML;

    if (answer2 == realAuthor) {
      score++;
      $("#answer2").addClass("correct");
      $("#answer0").addClass("incorrect");
      $("#answer1").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer2")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer0")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
    } else if (answer1 == realAuthor) {
      $("#answer0").addClass("incorrect");
      $("#answer1").addClass("correct");
      $("#answer2").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer0")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
      score = 0;
    } else if (answer0 == realAuthor) {
      $("#answer0").addClass("correct");
      $("#answer1").addClass("incorrect");
      $("#answer2").addClass("incorrect");

      setTimeout(function() {
        nextQuote();
        $("#answer0")
          .removeClass("correct")
          .prop("disabled", false);
        $("#answer1")
          .removeClass("incorrect")
          .prop("disabled", false);
        $("#answer2")
          .removeClass("incorrect")
          .prop("disabled", false);
      }, 1500);
      score = 0;
    }
    $(".score").html(score);
  });
});

Description

FreeCodeCamp Project #1
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv