CODEWITHSUNDEEP
javascripthtmlapitwitteriife
DGAcode
DGAcode

Reputation: 37

Twitter button and IIFE

While I am playing a little with this quick creation of mine. I came into two doubts.
The first is, how can I wrap with an IIFE all the JS code without breaking it.
The second is how to finish the twitter's button to send the active quote into a tweet. 

  "use strict";

  var quotes = [
    'Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.',
    'There are things known and things unknown and in between are the doors.',
    'I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.',
    'A friend is someone who gives you total freedom to be yourself.',
    'Where\'s your will to be weird?',
    'Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.',
    'I like people who shake other people up and make them feel uncomfortable.',
    'This is the strangest life I\'ve ever known.',
    'I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.',
    'Whoever controls the media, controls the mind.'
  ];

  function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));

    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  }
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: 'Barrio', cursive;
  font-size: 62.5%;
  background: url('http://cdn.wallpapersafari.com/11/52/eQLxD8.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  text-align: center;
  width: 90%;
}

.title {
  font-size: 4.5em;
}

.image {
   max-width: 100%;
  height: auto;
  border-radius: 20px;
}
.quo {
  background: #fff;
  font-family: 'Comfortaa', cursive;
  font-size: 2.5em;
}

.button {
  background: black;
  color: white;
  padding: 20px;
  border: 5px solid black;
  font-size: 1.2em;
  border-radius: 100px;
}
.button:active {
  background: red;
}
<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<body class="container">
  <div class="wrapper">
    
    <h3 class="title">
      Jim Morrison's<br> Quote Machine
    </h3>
    <div>
      <img class="image" src="http://www.thefashionisto.com/wp-content/uploads/2016/04/Jim-Morrison-Style-Picture-Leather-Pants-Suede-Jackets-800x1093.jpg">
    </div>
    <button class="button" onclick="newQuote()">
      Touch me 
    </button>
          <a href="https://twitter.com/intent/tweet?text=yoyo"><button><i class ="fa fa-twitter"></i></button></a>
    <div class="quo" id="quoteDisplay">

    </div>
  </div>
</body>

Upvotes: 0

Views: 37

Answers (1)

Shaggy
Shaggy

Reputation: 6796

Rather than an inline event handler, you should use an event listener within your JavaScript like so:

(function(d,M){
  var quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
      len=quotes.length,
      p=d.querySelector("p");
  p.appendChild(d.createTextNode(""));
  d.querySelector("button").addEventListener("click",function(){
    p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))];
  },0);
 })(document,Math);
*{font-family:sans-serif;}
<p></p>
<button>New Quote</button>

ES6 version:

{
  let quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
      len=quotes.length,
      d=document,
      M=Math,
      p=d.querySelector("p");
  p.append(d.createTextNode(""));
  d.querySelector("button").addEventListener("click",()=>p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))],0);
 }
*{font-family:sans-serif;}
<p></p>
<button>New Quote</button>

Upvotes: 1

Related Questions