css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Star Wars random quote generator</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
  <div class="container-fluid">
  <img src="https://www.planwallpaper.com/static/images/1280px-Star_Wars_Logo.svg.png" width="200px"></img> 
  <h3 class="subtitle">QUOTES</h3>

  <div class="quote" id ='quoteDisplay'>Fear is the path to the Dark Side. Fear leads to anger. Anger leads to hate. Hate leads to suffering. – Yoda

    <!-- quotes will display here -->
  </div>
  <button class="button" onclick='newQuote()'><i class="fa fa-rebel"></i></button>
  <button class="button" onclick='tweet()'><i class="fa fa-twitter"></i></button>
  <script src='javascript.js'></script>
  </div>
</body>
</html>
            
          
!
            
              body {
  background-color: black;
  text-align: center;
  font-family: Arial;
	color: yellow;
  }

.container-fluid{
  padding: 50px 0px 50px 0px;
  position: relative;
  margin: auto;
  width: 80%;
}

.subtitle{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.quote {
  padding: 10px 0px 10px 0px;
  }

.button{
  background-color: black;
  color: yellow;
  border: none;
}

            
          
!
            
              var quotes = [
  'It\'s not my fault. – Han Solo',
  'Your focus determines your reality. – Qui-Gon Jinn',
  'Do. Or do not. There is no try. – Yoda',
  'Somebody has to save our skins. – Leia Organa',
  'In my experience there is no such thing as luck. – Obi-Wan Kenobi',
  'I find your lack of faith disturbing. – Darth Vader',
  'I’ve got a bad feeling about this. – Han Solo',
  'So this is how liberty dies…with thunderous applause. – Padmé Amidala',
  'Your eyes can deceive you. Don’t trust them. – Obi-Wan Kenobi',
  'Never tell me the odds. – Han Solo',
  'Mind tricks don’t work on me. – Watto',
  'Fear is the path to the Dark Side. Fear leads to anger. Anger leads to hate. Hate leads to suffering. – Yoda',
  'The Dark Side of the Force is the pathway to many abilities some consider to be...Unnatural. – Senator Palpatine',
  'You don\’t know how hard I found it, signing the order to terminate your life – Governor Grand Moff Tarkin',
	'He\’s holding a thermal detonator! – C3PO',
  'I sense great fear in you, Skywalker. You have hate...you have anger...but you don’t use them. – Count Dooku',
	'Great, kid. Don\’t get cocky – Han Solo',
	'Luke, you can destroy the Emperor. He has foreseen this. It is your destiny. Join me, and together we can rule the galaxy as father and son. – Darth Vader',
	'You can\’t win, Darth. Strike me down, and I will become more powerful than you could possibly imagine. – Obi Wan Kenobi',
  'It\'s a trap!  – Admiral Ackbar',
	'Aren\'t you a little short for a storm trooper? – Leia Organa',
  'Why you stuck-up, half-witted, scruffy-looking nerf-herder! – Leia Organa',
  'Don’t you call me a mindless philosopher, you overweight glob of grease! — C-3PO',
  'We\’re doomed. — C-3PO',
  'But I was going into Tosche Station to pick up some power converters! — Luke Skywalker',
  'Help me, Obi-Wan Kenobi. You’re my only hope. — Leia Organa',
  'An elegant weapon for a more civilized age. — Obi-Wan Kenobi',
  'Mos Eisley spaceport. You will never find a more wretched hive of scum and villainy. — Obi-Wan Kenobi',
  'It\’s the ship that made the Kessel Run in less than 12 parsecs. — Han Solo',
  'Sorry about the mess. — Han Solo',
  'She may not look like much, but she’s got it where it counts, kid. — Han Solo',
  'Governor Tarkin, I should’ve expected to find you holding Vader’s leash. I recognized your foul stench when I was brought on board. — Leia Organa',
  'I felt a great disturbance in the Force. As if millions of voices suddenly cried out in terror and were suddenly silenced. — Obi-Wan Kenobi',
  'I suggest a new strategy, Artoo: Let the Wookiee win. — C-3PO',
 	'Hokey religions and ancient weapons are no match for a good blaster at your side, kid. — Han Solo',
	'That’s no moon. It\’s a space station. — Obi-Wan Kenobi',
	'Who\’s the more foolish? The fool or the fool who follows him? – Obi-Wan Kenobi',
	'Somebody has to save our skins. Into the garbage chute, flyboy! — Leia Organa',
 	'When I left you I was but the learner. Now I am the master. — Darth Vader',
	'If you strike me down I shall become more powerful than you can possibly imagine. — Obi-Wan Kenobi',
	'It\’s not impossible. I used to bullseye womp rats in my T-16 back home, they’re not much bigger than 2 meters. — Luke Skywalker',
  'Use the Force, Luke. — Obi-Wan Kenobi',
  'These aren’t the droids you’re looking for... — Obi-Wan Kenobi',
	'Traveling through hyperspace ain\'t like dusting crops, farm boy. — Han Solo',
	'You were the chosen one! It was said that you would destroy the Sith, not join them. — Obi-Wan Kenobi',
	'You came in that thing? You\'re braver than I thought. — Leia Organa',
  'Laugh it up, Fuzz ball. — Han Solo',
];

function newQuote() {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  document.getElementById("quoteDisplay").innerHTML = quotes[randomNumber];
}
function tweet(){
  var url = "https://www.twitter.com/intent/tweet";
  var text = document.getElementById("quoteDisplay").innerHTML;
  var hashtag = "StarWarsQuotes";
  window.open(url+"?text="+text+";hashtags="+hashtag);
	}



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console