A Pen by clevrmonkey

Thumbnail
This awesome code was written by clevrmonkey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright clevrmonkey ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <div id="head">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</div>
<div id="body" class="Zero">
  <div id="quote">
    <h1 id="saying">Quotation, n: The act of repeating erroneously the words of another.</h1>
    <h3 id="author"><em> -Ambrose Bierce </em></h3>
  </div>
  <div id="controls">
    <div id="share">
    <a href="https://twitter.com/home/?status=quote about stuff"><span class="fa fa-twitter fa-3x"></span></a>
</div>
    <div id="next_button">
    <input type="submit"
           class="newQuote"
           value="new quote">
</div>
  </div>
</div>



/*Downloaded from https://www.codeseek.co/clevrmonkey/a-pen-by-clevrmonkey-YWVxqQ */
    .Zero {
  background-image: url('http://vikramedke.com/wp-content/uploads/2013/08/invite.jpg');
  color: rgb(0,0,0);
  font-size: 50%;
}
.One {
    background-image: url("http://static.allbackgrounds.com/bg/new-york.jpg");
    color: rgb(255,255,255);
  font-size: 50%;
}
.Two {
    background-image: url('http://i.huffpost.com/gen/1849033/thumbs/o-SKULL-570.jpg?5');
    color: rgb(255,255,255);
  font-size: 70%;
}
.Three {
  background-image: url('http://eskipaper.com/images/flower-field-pictures-1.jpg');
color: rgb(0,0,0);
font-size: 70%;
}
.Four {
  background-image:  url(https://upload.wikimedia.org/wikipedia/commons/7/71/PaleBlueDot.jpg);
  color: rgb(255,255,255);
  font-size: 40%;
}
.Five {
background-image:  url('http://kirtsy.com/wp-content/uploads/2011/08/6Confetti_InTheAir.png');
  color: rgb(0,0,0);
  font-size: 65%;
}
.Six {
  background-image:  url('https://static1.squarespace.com/static/55c3f0f5e4b005b7fa5d10af/t/55cbcc67e4b0513a93e20b71/1439419495183/far_sunset_in_te_ocean_horizon-wide.jpg');
  color: rgb(0,0,0);
  font-size: 40%;
}
.Seven {
  background-image:  url('http://wallpaper.zone/img/4146737.jpg');
  color: rgb(255,255,255);
  font-size: 50%;
}
.Eight {
  background-image:  url('http://pre02.deviantart.net/a1b8/th/pre/f/2012/271/0/7/simple_bob_marley_based_on_one_love_poster_by_arand4-d5g6l0t.jpg');
  color: rgb(255,255,255);
  font-size: 70%;
}
.Nine {
  background-image:  url('https://cdn1.vox-cdn.com/thumbor/vY3JgaUmHgzxGZLppYT_vryHz1Y=/0x0:4500x3000/1280x853/cdn0.vox-cdn.com/uploads/chorus_image/image/47547403/shutterstock_152293880.0.0.0.0.jpg');
  color: rgb(0,0,0);
  font-size: 60%;
}

html, body, #body {
  height: 100%;
    width: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

#quote {
  position: absolute;
  whitespace: nowrap;
  margin: 20% 0 0 25%;
  height: 30%;
  width: 50%;
  font-family: 'Raleway';
}
#saying {
  text-align: center;
}
#author {
  text-align: right;
  margin: -1vh 3vw 3vh 0; 
}

#controls {
  size: 3vh;
  width: 20%;
  height: 10%;
  align: left;
}
#share {
position: absolute;
transform: translate(45%,30%);
  border-radius: 10px;
  border: solid;
  border-color: rgb(0,0,0);
  width: 7vh;
  height: 5vh;
}
.fa {
  transform:translate(35%,10%);
  font-size: 4.5vh!important;
}
#next_button {
  position: absolute;
  transform:translate(90%, 30%);
  border: solid;
  border-color: rgb(0,0,0);
  border-radius: 10px;
}
input.newQuote {
  width: 13vh;
  height: 5vh;
  border-radius: 10px;
  box-sizing: box;
  border-color: transparent;
  background-color: rgba(255,255,255,0.5);
  font-size: 2.1vh;
}


/*Downloaded from https://www.codeseek.co/clevrmonkey/a-pen-by-clevrmonkey-YWVxqQ */
    var bodyObj, sayingObj, authorObj, nextButton, className, quote, author, index, count;

bodyObj = document.getElementById('body');
sayingObj = document.getElementById('saying');
authorObj = document.getElementById('author');
nextButton = document.getElementById('next_button');
index = 0;
count = 8;
className = [
    'One',
    'Two',
    'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine'
];

saying = [
"There's something in the New York air that makes sleep useless.",
"To be or not to be?",
"The earth laughs with flowers.",
  "To my mind, there is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world. To me, it underscores our responsibility to deal more kindly and compassionately with one another and to preserve and cherish that pale blue dot, the only home we've ever known.",
  "If you want to turn your life around, try thankfulness.  It will change your life mightily.",
  "I saw a man pursuing the horizon; round and round they sped. I was disturbed at this; I accosted the man. “It is futile,” I said, “You can never —”     “You lie,” he cried, and ran on.",
"Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while.",
  "Don't worry, be happy!",
  "To achieve great things, two things are needed: a plan and not quite enough time."
  
]

author = [
"-Simone de Beauvoir",
"-Shakespeare",
"-Ralph Waldo Emerson",
"-Carl Sagan",
  "-Gerald Good",
  "-Stephen Crane",
  "-Steve Jobs",
  "-Bob Marley",
  "-Leonard Bernstein"
]

function updateIndex(){
  if(index==count) {
    index = 0;
  }
  else(index++);
  }    
  
  /*index_old = index;
      index = Math.floor(Math.random() * (count));
      if (index_old == index){
      index = count - index_old;
      }
      */

nextButton.onclick = function(e){
    bodyObj.className = className[index];
    sayingObj.innerHTML = saying[index];
    authorObj.innerHTML = author[index];
    updateIndex();
}







Comments