Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Random Beatles Lyric Generator</title>
  <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="wrapper">
   
  <div class="one">
    <h1>Random Beatles Lyric Generator</h1>
    <div class="image"> 
    <img src="https://68.media.tumblr.com/95313bca74191d8b4b980d5ad3121eda/tumblr_opsmmpF2RJ1vd2c8xo1_250.jpg" alt="The Beatles!">
    </div>
  </div>
  
   
<!-- lyric machine --> 
   
<div class="two"> 
    <div id="lyricDisplay">Click "New lyric"</div>
</div>

<!-- /lyric machine --> 
    
<!-- buttons -->     
   
<div class="three">
  <div id="clickme">
    <button onclick="newQuote()" class="btn btn-outline-info" id="new-quote">New lyric</button>
  </div>
  <div>
    <a id="btweet" href="https://twitter.com/share" target="_blank"><button class="btn btn-outline-info" id="tweet-quote">Tweet it</button></a>
  </div> 
</div>
 
<!-- /buttons -->
  
 </div>    
  
	 <script type="text/javascript" src="app.js"></script>
</body>
 
              
            
!

CSS

              
                /* css grid */

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 3px solid #98d0fb;
  border-radius: 5px;
  background-color: #eff1ef;
  padding: 3em 4em;
}.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';


body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
  
}
 
.one {
  grid-column: 1 / 8;
  grid-row: 1;
}
 
.two { 
   grid-column: 1 / 3;
   grid-row: 2 / 6;
}

.three { 
   grid-column: 3 / 8;
   grid-row: 2 / 6;
}

h1 {
  font-size: 3em;
  text-align: left;
}

.image {
  margin-top: 20px;
  width: 25%; 
}

 
#lyricDisplay {  
  color: black; 
  font-size:2em;
}
 
.btn {
  height:45px;
  width: 120px;
  color: black;
  background: white;
  border: solid 2px;
  border-color: #98d0fb;
  border-radius:3px;
  cursor: pointer;
  font-size:0.85em;
  padding: 8px 18px 6px 18px;
  margin-top:30px;
}

@media (max-width: 480px) {
  
.wrapper > div {
  border: 1px solid #98d0fb;
  background-color: white;
  padding: 3em 4em;
 }

.image {
  display: none;
 }

.one {
  grid-column: 1 / 8;
  grid-row: 1;
}
 
.two { 
   grid-column: 1 / 8;
   grid-row: 3;
}

.three { 
   grid-column: 1 / 8;
   grid-row: 2;
 }
}


              
            
!

JS

              
                var beatles = [
'\'Take a sad song and make it better\' <br>- Hey Jude',
'\'She\'s making me feel like I\'ve never been born\' <br>- She Said She Said',
'\'When you talk about destruction, don\'t you know that you can count me out\' <br>- Revolution',
'\'Had it been another day I might have looked the other way\' <br>- I\'ve Just Seen a Face',
'\'There\'s one for you, nineteen for me\' <br>- Taxman',
'\'When I think of things we did it makes me want to cry\' <br>- The Night Before',
'\'You say you will love me If I have to go\' <br>- Things We Said Today',
'\'It\'s such a feelin\' that my love I can\'t hide\' <br>- I Wanna Hold Your Hand',
'\'I\'ve got a word or two to say about the things that you do\' <br>- Think for Yourself',
'\'There\'s people standing round who screw you in the ground\' <br>- Love You To',
'\'So I looked around and I noticed there wasn\'t a chair\' <br>- Norwegian Wood',
'\'Your lips are moving, I cannot hear\' <br>- I\'m Looking Through You',
'\'Turn off your mind relax and float down stream\' <br>- Tomorrow Never Knows',
'\'Lend me your ears and I\'ll sing you a song\' <br>- With a Little Help from My Friends',
'\'You\'re holding me down filling me up with your rules\' <br>- Getting Better',
'\'Over men and horses hoops and garters lastly through a hogshead of real fire!\' <br>- Being for the Benefit of Mr. Kite!',
'\'We were talking about the space between us all\' <br>- Within You Without You',
'\'I read the news today, oh boy\' <br>- A Day in the Life',
'\'There is a fireman with an hourglass, and in his pocket is a portrait of the Queen\' <br>- Penny Lane',
'\'The clouds will be a daisy chain So let me see you smile again\' <br>- Dear Prudence',
'\'I wonder should I call you but I know what you\'d do\' <br>- I\'m So Tired',
'\'I look at the floor and I see it needs sweeping\' <br>- While My Guitar Gently Weeps',
'\'Yes we\'re going to a party party\' <br>- Birthday',
'\'Now the moon begins to shine\' <br>- Good Night',
'\'So many tears I was searching, so many tears I was wasting\' <br>- Long Long Long',
'\'A coffee dessert, yes you know it\'s good news\' <br>- Savoy Truffle',
'\'How does it feel to be one of the beautiful people\' <br>- Baby You\'re a Rich Man',
'\'There\'s a fog upon L.A. and my friends have lost their way\' <br>- Blue Jay Way',
'\'Without going out of my door I can know all things of earth\' <br>- The Inner Light',
'\'Sweet Loretta Martin thought she was a woman but she was another man\' <br>- Get Back',
'\'Nobody ever loved me like she does\' <br>- Don\'t Let Me Down',
'\'I do a road hog\' <br>- Dig a Pony',
'\'Everyone\'s saying it, flowing more freely than wine\' <br>- I Me Mine',
'\'On our way back home, we\'re on our way home\' <br>- Two of Us',
'\'One two three four, can I have a little more\' <br>- All Together Now',
'\'If you\'re listening to this song, you may think the chords are going wrong\' <br>- Only a Northern Song',
'\'I\'ll never do you no harm\' <br>- Oh! Darling',
'\'I don\'t want to leave her now, you know I believe and how\' <br>- Something',
'\'It\'s driving me mad, it\'s driving me mad\' <br>- I Want You (She\'s So Heavy)',
'\'You know my name, look up the number\' <br>- You Know My Name (Look Up the Number)',
'\'I want to tell her that I love her a lot, but I gotta get a bellyful of wine\' <br>- Her Majesty',
'\'And in the end the love you take is equal to the love you make\' <br>- The End'
]

function newQuote() {
  var random = Math.floor(Math.random() * (beatles.length)); 
  document.getElementById('lyricDisplay').innerHTML = beatles[random];
 
    $('#tweet-quote').click(function() {
      window.open('https://twitter.com/intent/tweet?text=' + $('#lyricDisplay').text()); 
 });
} 
              
            
!
999px

Console