cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <h1>Search Netflix Movies by Genre</h1>
<select id="selectGenre">
<option selected>Select a genre</option>
<option>Action &amp; Adventure: 1365</option>
<option>Action Comedies: 43040</option>
<option>Action Sci-Fi &amp; Fantasy: 1568</option>
<option>Action Thrillers: 43048</option>
<option>Adult Animation: 11881</option>
<option>Adventures: 7442</option>
<option>African Movies: 3761</option>
<option>Alien Sci-Fi: 3327</option>
<option>Animal Tales: 5507</option>
<option>Anime: 7424</option>
<option>Anime Action: 2653</option>
<option>Anime Comedies: 9302</option>
<option>Anime Dramas: 452</option>
<option>Anime Fantasy: 11146</option>
<option>Anime Features: 3063</option>
<option>Anime Horror: 10695</option>
<option>Anime Sci-Fi: 2729</option>
<option>Anime Series: 6721</option>
<option>Art House Movies: 29764</option>
<option>Asian Action Movies: 77232</option>
<option>Australian Movies: 5230</option>
<option>B-Horror Movies: 8195</option>
<option>Baseball Movies: 12339</option>
<option>Basketball Movies: 12762</option>
<option>Belgian Movies: 262</option>
<option>Biographical Documentaries: 3652</option>
<option>Biographical Dramas: 3179</option>
<option>Boxing Movies: 12443</option>
<option>British Movies: 10757</option>
<option>British TV Shows: 52117</option>
<option>Campy Movies: 1252</option>
<option>Children &amp; Family Movies: 783</option>
<option>Chinese Movies: 3960</option>
<option>Classic Action &amp; Adventure: 46576</option>
<option>Classic Comedies: 31694</option>
<option>Classic Dramas: 29809</option>
<option>Classic Foreign Movies: 32473</option>
<option>Classic Movies: 31574</option>
<option>Classic Musicals: 32392</option>
<option>Classic Romantic Movies: 31273</option>
<option>Classic Sci-Fi &amp; Fantasy: 47147</option>
<option>Classic Thrillers: 46588</option>
<option>Classic TV Shows: 46553</option>
<option>Classic War Movies: 48744</option>
<option>Classic Westerns: 47465</option>
<option>Comedies: 6548</option>
<option>Comic Book and Superhero Movies: 10118</option>
<option>Country &amp; Western/Folk: 1105</option>
<option>Courtroom Dramas: 2748</option>
<option>Creature Features: 6895</option>
<option>Crime Action &amp; Adventure: 9584</option>
<option>Crime Documentaries: 9875</option>
<option>Crime Dramas: 6889</option>
<option>Crime Thrillers: 10499</option>
<option>Crime TV Shows: 26146</option>
<option>Cult Comedies: 9434</option>
<option>Cult Horror Movies: 10944</option>
<option>Cult Movies: 7627</option>
<option>Cult Sci-Fi &amp; Fantasy: 4734</option>
<option>Cult TV Shows: 74652</option>
<option>Dark Comedies: 869</option>
<option>Deep Sea Horror Movies: 45028</option>
<option>Disney: 67673</option>
<option>Disney Musicals: 59433</option>
<option>Documentaries: 6839</option>
<option>Dramas: 5763</option>
<option>Dramas based on Books: 4961</option>
<option>Dramas based on real life: 3653</option>
<option>Dutch Movies: 10606</option>
<option>Eastern European Movies: 5254</option>
<option>Education for Kids: 10659</option>
<option>Epics: 52858</option>
<option>Experimental Movies: 11079</option>
<option>Faith &amp; Spirituality: 26835</option>
<option>Faith &amp; Spirituality Movies: 52804</option>
<option>Family Features: 51056</option>
<option>Fantasy Movies: 9744</option>
<option>Film Noir: 7687</option>
<option>Food &amp; Travel TV: 72436</option>
<option>Football Movies: 12803</option>
<option>Foreign Action &amp; Adventure: 11828</option>
<option>Foreign Comedies: 4426</option>
<option>Foreign Documentaries: 5161</option>
<option>Foreign Dramas: 2150</option>
<option>Foreign Gay &amp; Lesbian Movies: 8243</option>
<option>Foreign Horror Movies: 8654</option>
<option>Foreign Movies: 7462</option>
<option>Foreign Sci-Fi &amp; Fantasy: 6485</option>
<option>Foreign Thrillers: 10306</option>
<option>French Movies: 58807</option>
<option>Foreign Horror Movies: 8654</option>
<option>Foreign Movies: 7462</option>
<option>Foreign Sci-Fi &amp; Fantasy: 6485</option>
<option>Foreign Thrillers: 10306</option>
<option>French Movies: 58807</option>
<option>Gangster Movies: 31851</option>
<option>Gay &amp; Lesbian Dramas: 500</option>
<option>German Movies: 58886</option>
<option>Greek Movies: 61115</option>
<option>Historical Documentaries: 5349</option>
<option>Horror Comedy: 89585</option>
<option>Horror Movies: 8711</option>
<option>Independent Action &amp; Adventure: 11804</option>
<option>Independent Comedies: 4195</option>
<option>Independent Dramas: 384</option>
<option>Independent Movies: 7077</option>
<option>Independent Thrillers: 3269</option>
<option>Indian Movies: 10463</option>
<option>Irish Movies: 58750</option>
<option>Italian Movies: 8221</option>
<option>Japanese Movies: 10398</option>
<option>Jazz &amp; Easy Listening: 10271</option>
<option>Kids Faith &amp; Spirituality: 751423</option>
<option>Kids Music: 52843</option>
<option>Kids’ TV: 27346</option>
<option>Korean Movies: 5685</option>
<option>Korean TV Shows: 67879</option>
<option>Late Night Comedies: 1402</option>
<option>Latin American Movies: 1613</option>
<option>Latin Music: 10741</option>
<option>Martial Arts Movies: 8985</option>
<option>Martial Arts, Boxing &amp; Wrestling: 6695</option>
<option>Middle Eastern Movies: 5875</option>
<option>Military Action &amp; Adventure: 2125</option>
<option>Military Documentaries: 4006</option>
<option>Military Dramas: 11</option>
<option>Military TV Shows: 25804</option>
<option>Miniseries: 4814</option>
<option>Mockumentaries: 26</option>
<option>Monster Movies: 947</option>
<option>Movies based on children’s books: 10056</option>
<option>Movies for ages 0 to 2: 6796</option>
<option>Movies for ages 2 to 4: 6218</option>
<option>Movies for ages 5 to 7: 5455</option>
<option>Movies for ages 8 to 10: 561</option>
<option>Movies for ages 11 to 12: 6962</option>
<option>Music &amp; Concert Documentaries: 90361</option>
<option>Music: 1701</option>
<option>Musicals: 13335</option>
<option>Mysteries: 9994</option>
<option>New Zealand Movies: 63782</option>
<option>Period Pieces: 12123</option>
<option>Political Comedies: 2700</option>
<option>Political Documentaries: 7018</option>
<option>Political Dramas: 6616</option>
<option>Political Thrillers: 10504</option>
<option>Psychological Thrillers: 5505</option>
<option>Quirky Romance: 36103</option>
<option>Reality TV: 9833</option>
<option>Religious Documentaries: 10005</option>
<option>Rock &amp; Pop Concerts: 3278</option>
<option>Romantic Comedies: 5475</option>
<option>Romantic Dramas: 1255</option>
<option>Romantic Favorites: 502675</option>
<option>Romantic Foreign Movies: 7153</option>
<option>Romantic Independent Movies: 9916</option>
<option>Romantic Movies: 8883</option>
<option>Russian: 11567</option>
<option>Satanic Stories: 6998</option>
<option>Satires: 4922</option>
<option>Scandinavian Movies: 9292</option>
<option>Sci-Fi &amp; Fantasy: 1492</option>
<option>Sci-Fi Adventure: 6926</option>
<option>Sci-Fi Dramas: 3916</option>
<option>Sci-Fi Horror Movies: 1694</option>
<option>Sci-Fi Thrillers: 11014</option>
<option>Science &amp; Nature Documentaries: 2595</option>
<option>Science &amp; Nature TV: 52780</option>
<option>Screwball Comedies: 9702</option>
<option>Showbiz Dramas: 5012</option>
<option>Showbiz Musicals: 13573</option>
<option>Silent Movies: 53310</option>
<option>Slapstick Comedies: 10256</option>
<option>Slasher and Serial Killer Movies: 8646</option>
<option>Soccer Movies: 12549</option>
<option>Social &amp; Cultural Documentaries: 3675</option>
<option>Social Issue Dramas: 3947</option>
<option>Southeast Asian Movies: 9196</option>
<option>Spanish Movies: 58741</option>
<option>Spiritual Documentaries: 2760</option>
<option>Sports &amp; Fitness: 9327</option>
<option>Sports Comedies: 5286</option>
<option>Sports Documentaries: 180</option>
<option>Sports Dramas: 7243</option>
<option>Sports Movies: 4370</option>
<option>Spy Action &amp; Adventure: 10702</option>
<option>Spy Thrillers: 9147</option>
<option>Stage Musicals: 55774</option>
<option>Stand-up Comedy: 11559</option>
<option>Steamy Romantic Movies: 35800</option>
<option>Steamy Thrillers: 972</option>
<option>Supernatural Horror Movies: 42023</option>
<option>Supernatural Thrillers: 11140</option>
<option>Tearjerkers: 6384</option>
<option>Teen Comedies: 3519</option>
<option>Teen Dramas: 9299</option>
<option>Teen Screams: 52147</option>
<option>Teen TV Shows: 60951</option>
<option>Thrillers: 8933</option>
<option>Travel &amp; Adventure Documentaries: 1159</option>
<option>TV Action &amp; Adventure: 10673</option>
<option>TV Cartoons: 11177</option>
<option>TV Comedies: 10375</option>
<option>TV Documentaries: 10105</option>
<option>TV Dramas: 11714</option>
<option>TV Horror: 83059</option>
<option>TV Mysteries: 4366</option>
<option>TV Sci-Fi &amp; Fantasy: 1372</option>
<option>TV Shows: 83</option>
<option>Urban &amp; Dance Concerts: 9472</option>
<option>Vampire Horror Movies: 75804</option>
<option>Werewolf Horror Movies: 75930</option>
<option>Westerns: 7700</option>
<option>World Music Concerts: 2856</option>
<option>Zombie Horror Movies: 75405</option>
</select>

<input type="submit" id="goToPage" value="Go to Netflix" />
<!--<p><a id="getLink"></a></p>-->
            
          
!
            
              body {margin: 24px;text-align: center;background: #FFEFEA;}
p,h1,select{margin-top: 24px}
h1 {font: normal 18px/1.2 sans-serif;color: #005A56;}
select{height: 30px;}
input[type="submit"] {
  color: #005a56;
  background-color: #aed7d6;
  border: 0;
  line-height: 28px;
  border-radius: 3px;
  padding: 0 1em;
}
            
          
!
            
              (function() {
  var optTxt, newTxt, optVal;
  $('#selectGenre option:not(":selected")').each(function(i) {
   optTxt = $(this).text().split(":");
    newTxt = optTxt[0];
    optVal = optTxt[1].trim();
    $(this).text(newTxt);
    $(this).val(optVal);
  });
})();

$('#goToPage').on('click', function() {
  var genre = $('#selectGenre option:selected').val();
  if ($.isNumeric(genre)) {
    var netflxURL = 'http://netflix.com/browse/genre/' + genre;
    window.open(netflxURL, '_blank');
  }
});
            
          
!
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