Fancy A Quote?

Fancy A Quote?.markdown

Fancy A Quote?

A simple quote generator written in vanilla JavaScript. Additionally, almost a complete response to the quote challenge of FreeCodeCamp.

A Pen by Maya Shankar on CodePen.

License.

index.html

<script src="https://use.fontawesome.com/04ee9d7103.js"></script>

<div class="container">
  <hr />
  <div id="quote"><span id="text">“I leaned on the wall and the wall leaned away.”</span><br>-<span id="author">The National</span></div>
  <hr />
  <div class="generate">
    <button type="button" class="btn btn-default btn-transparent">Another quotation, if you please.</button>
    <button type="button" class="btn btn-default btn-transparent"><i class="fa fa-twitter" aria-hidden="true"></i></button>
  </div>
</div>

script.js

var quotes = ['“I leaned on the wall and the wall leaned away.”',
           '"Love me when I least deserve it, because that’s when I really need it."', 
           '“I feel shame, not for the wrong things I have done, but for the right things that I have failed to do.”',
           '“For each person there is a sentence—a series of words—which has the power to destroy them.”',
           '“But remember, there are two ways to dehumanize someone: by dismissing them, and by idolizing them.”',
           '“I wanted to tell you that it’s my birthday on Thursday and I would have wanted you to give me the gift of your guts on the floor, one last time, to see if you still had it in you.”',
           '“We’re neither pure, nor wise, nor good; we do the best we know.”',
           '"I sit before flowers/hoping they will train me in the art/of opening up.”'];

var authors = ['The National', 'Swedish Proverb', 'Mercel Duchamp', 'Philip K. Dick', 'David Wong',
              'Lucas Regazzi', 'Voltaire', 'Shane Koyczan'];

// start outside the array
var curQuote = 0;

document.getElementsByClassName('btn')[0].addEventListener("click", click);

function click() {
  curQuote++; // get each quote
  if (curQuote == quotes.length) { curQuote = 0; }
  document.getElementById('quote').getElementsByTagName('span')[0].innerHTML = quotes[curQuote]; // change the quote
  document.getElementById('quote').getElementsByTagName('span')[1].innerHTML = authors[curQuote]; // change the author
}

document.getElementsByClassName('btn')[1].addEventListener("click", tweet);

function tweet() {
  window.open('http://twitter.com/share?text=' + quotes[curQuote] + ' -' + authors[curQuote]);
}

scripts

<script src="https://use.fontawesome.com/04ee9d7103.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,300italic,400italic|Titillium+Web:200);

body, .btn {
  background-color: #fdf7ef;
}

.container {
  width: 40vw;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#quote {
  text-align: center;
  font-family: 'Raleway';
  font-weight: 300;
  font-size: 2em;
}

.generate {
  text-align: center;
  font-family: 'Raleway';
}

#author {
  font-family: 'Titillium Web';
}

.btn:hover, .btn:focus, .btn:active {
  outline: none !important;
  background: #fdf4ef !important;
  box-shadow: none !important;
}