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. 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

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

              
                <div class="form">
  <h1>Welcome Back!</h1>
  <form role="form" action="/login" method="POST" name="login" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off">
    <div class="field-wrap">
      <div class="form-group input-group"><span id="basic-addon1" class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input type="text" name="username" placeholder="Username" aria-describedby="basic-addon1" class="form-control" />
      </div>
    </div>

    <div class="field-wrap">
      <div class="form-group input-group"><span id="basic-addon2" class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
        <input type="password" name="password" placeholder="Password" aria-describedby="basic-addon2" autocomplete="off" class="form-control" />
      </div>
    </div>
    <p class="forgot"><a href="/forgot">Forgot Password?</a></p>
    <button type="button" class="btn btn-danger button button-block" onclick="logIn()">Log In</button>
  </form>
</div>

<div class="form">
  <form role="form" action='/signup' , method='POST' , name='signup' , accept-charset='UTF-8' , enctype='application/x-www-form-urlencoded' , autocomplete='off'>

    <div class="field-wrap">
      <div class="form-group input-group">
        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-tags"></span></span>
        <input type="text" name="firstname" class="form-control" placeholder="First Name *" aria-describedby="basic-addon1">

        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-tags"></span></span>
        <input type="text" name="lastname" class="form-control" placeholder="Last Name *" aria-describedby="basic-addon1">
      </div>
    </div>

    <div class="field-wrap">
      <div class="form-group input-group">
        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
        <input type="text" name="username" class="form-control" placeholder="Username *" aria-describedby="basic-addon1">

        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-envelope"></span></span>
        <input type="text" name="email" class="form-control" placeholder="E-Mail *" aria-describedby="basic-addon1">
      </div>
    </div>

    <div class="field-wrap">
      <div class="form-group input-group">
        <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span>
        <input type="password" name="password" class="form-control" placeholder="Password *" aria-describedby="basic-addon2" , autocomplete='off'>

        <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span>
        <input type="password" name="password2" class="form-control" placeholder="Comfirm Password *" aria-describedby="basic-addon2" , autocomplete='off'>
      </div>
    </div>

    <button type="button" class="button button-block btn btn-danger" onclick="regUser()">Register</button>
  </form>
</div>

<div class="form">
  <br><br>
  <input type="submit" value="Log Out" onclick="logOut()">
  <input type="submit" value="Clear" onclick="clean()">
  <br>
  <br>
  <div class="field-wrap">
    <input type="text" name="manga" id="manga" value="Terra Formars">
  </div>
  <input type="submit" value="List Manga" onclick="getManga()">
  <input type="submit" value="Find by Title" onclick="findManga()">
  <input type="submit" value="Chapter +1" onclick="oneUp()">

</div>
<section class="mangas" id="manga-area"></section>
              
            
!

CSS

              
                $body-bg: #c1bdba
$form-bg: #13232f
$white: white

$main: #c83636
$main-light: lighten($main, 5%)
$main-dark: darken($main, 5%)

$gray-light: #a0b3b0
$gray: #dddddd

$thin: 300
$normal: 400
$bold: 600
$br: 4px
$size: 100%
$text-color: lightgrey
$font-stack: "Titillium Web", sans-serif

*, *:before, *:after
  box-sizing: border-box

html
  overflow-y: scroll

body
  background: $body-bg
  font-family: 'Titillium Web', sans-serif
  background-image: url(http://images8.alphacoders.com/545/545905.jpg)
  background-position: center
  background-attachment: fixed
  background-repeat: no-repeat
  background-size: $size $size

a
  text-decoration: none
  color: $main
  transition: .5s ease
  &:hover
    color: $main-dark

.form
  background: rgba($form-bg, 0.9)
  padding: 40px
  max-width: 600px
  margin: 10% auto
  border-radius: $br
  box-shadow: 0 4px 10px 4px rgba($form-bg, 0.3)

.tab-group
  list-style: none
  padding: 0
  margin: 0 0 40px 0
  &:after
    content: ""
    display: table
    clear: both
  li a
    display: block
    text-decoration: none
    padding: 15px
    background: rgba($gray-light, 0.25)
    color: $gray-light
    font-size: 20px
    float: left
    width: 50%
    text-align: center
    cursor: pointer
    transition: .5s ease
    &:hover
      background: $main-dark
      color: $white
  .active a
    background: $main
    color: $white

.tab-content > div:last-child
  display: none

h1
  text-align: center
  color: $white
  font-weight: $thin
  margin: 0 0 40px

label
  position: absolute
  transform: translateY(6px)
  left: 13px
  color: rgba($white, 0.5)
  transition: all 0.25s ease
  -webkit-backface-visibility: hidden
  pointer-events: none
  font-size: 22px
  .req
    margin: 2px
    color: $main

label.active
  transform: translateY(50px)
  left: 2px
  font-size: 14px
  .req
    opacity: 0

label.highlight
  color: $white

input, textarea
  font-size: 22px
  display: block
  width: 100%
  height: 100%
  padding: 5px 10px
  background: none
  background-image: none
  border: 1px solid $gray-light
  color: $white
  border-radius: 0
  transition: border-color .25s ease, box-shadow .25s ease
  &:focus
    outline: 0
    border-color: $main

textarea
  border: 2px solid $gray-light
  resize: vertical

.field-wrap
  position: relative
  margin-bottom: 40px

.top-row
  &:after
    content: ""
    display: table
    clear: both
  > div
    float: left
    width: 48%
    margin-right: 4%
    &:last-child
      margin: 0

.button
  border: 0
  outline: none
  border-radius: 0
  padding: 15px 0
  font-size: 2rem
  font-weight: $bold
  text-transform: uppercase
  letter-spacing: .1em
  background: $main
  color: $white
  transition: all 0.5s ease
  -webkit-appearance: none
  &:hover, &:focus
    background: $main-dark

.button-block
  display: block
  width: 100%

.forgot
  margin-top: -20px
  text-align: right

footer
  background-color: #222222
  color: $text-color
  position: absolute
  text-align: center
  width: $size
  right: 0
  bottom: 0
  left: 0
  padding-top: 10px
  font-family: $font-stack

/* MANGA STUFF

#otherPages
  margin: 5% 2%

#manga-area
  margin: 15px 10px

/* TABLE STYLE

.manga-panel
  background-color: Gray
  opacity: 0.9
  margin: 5%

.thumbnail
  width: 150px

.tg
  border-collapse: collapse
  border-spacing: 0
  border-color: #ccc
  border: none

.tg td
  font-family: Arial, sans-serif
  font-size: 14px
  padding: 10px 5px
  border-style: solid
  border-width: 0px
  overflow: hidden
  word-break: normal
  border-color: #ccc
  color: #333
  background-color: #fff

.tg th
  font-family: Arial, sans-serif
  font-size: 14px
  font-weight: normal
  padding: 10px 5px
  border-style: solid
  border-width: 0px
  overflow: hidden
  word-break: normal
  border-color: #ccc
  color: #333
  background-color: #f0f0f0

.tg .tg-yw4l
  vertical-align: top

@media screen and (max-width: 767px)
  .tg
    width: auto !important
  .tg col
    width: auto !important
  .tg-wrap
    overflow-x: auto
    -webkit-overflow-scrolling: touch

              
            
!

JS

              
                
var base_url = 'https://mangadb-r282.herokuapp.com';

// HELPER FUNCTIONS

// Retrieves the token from local storage and returns it.
function getToken() {
  return window.localStorage.getItem("token");
}

// Retrieves the token from local storage and returns it.
function getPrevManga() {
  return JSON.parse(window.localStorage.getItem("prevManga"));
}

// Deletes the token from local storage and removes manga from display.
function logOut() {
  window.localStorage.removeItem("token");
  window.localStorage.removeItem("prevManga");
  clean();
  console.log('Bye bye');
}

// Removes manga from display
function clean() {
  $(".mangas").empty();
}

// Retires the manga information and turns it into html and returns it
function mangaInfo(manga) {
  var title = '<h1>' + window.s.titleize(manga.title) + '</h1>';
  var photo = '<img class="thumbnail" src="' + manga.thumbnail + '"</img>';
  var author = '<span id="author"> <strong>Author:</strong> ' + window.s.titleize(manga.author) + '</span>';
  var status = '<span id="status"> <strong>Status:</strong> ' + window.s.humanize(manga.seriesStatus) + '</span>';
  var userStats = '<span id="userStats"> <strong>My Status:</strong> ' + window.s.humanize(manga.userStatus) + '</span>';
  var chapter = '<span id="chapter"> <strong>Current Chapter:</strong> <a href="' + manga.url + '" target="_blank">' + manga.chapter + '</a></span><br>';
  var type = '<span id="type"> <strong>Type:</strong> ' + window.s.humanize(manga.type) + '</span>';
  var direction = '<span id="direction"> <strong>Reading Direction:</strong> ' + window.s.titleize(manga.direction) + '</span>';
  var altName = '<span id="altName"> <strong>Other Names:</strong> ' + window.s.titleize(window.s.toSentence(manga.altName, ", ", ", ")) + '</span>';
  var categories = '<span id="categories"> <strong>Categories:</strong> ' + window.s.titleize(window.s.toSentence(manga.categories, ", ", ", ")) + '</span>';
  var plot = '<p id="plot"> <strong>Plot:</strong> ' + window.s.humanize(manga.plot) + '</p>';
  var html = '<div class="manga-panel tg-wrap"><table><tr><th colspan="3">' + title + '</th></tr><tr><td rowspan="4">' + photo + '</td><td>' + status + '</td><td>' + userStats + '</td></tr><tr><td>' + author + '</td><td>' + direction + '</td></tr><tr><td>' + chapter + '</td><td>' + type + '</td></tr><tr><td>' + categories + '</td><td>' + altName + '</td></tr><tr><td colspan="3">' + plot + '</td></tr></table></div>';
  return html;
  
  
}

// FORM FUNCTIONS

// Register new user.
function regUser() {
  var username = document.forms["signUp"]["username"].value;
  var firstname = document.forms["signUp"]["firstname"].value;
  var lastname = document.forms["signUp"]["lastname"].value;
  var email = document.forms["signUp"]["email"].value;
  var password = document.forms["signUp"]["password"].value;
  var password2 = document.forms["signUp"]["password2"].value;

  var settings = {
    "async": true,
    "crossDomain": true,
    "url": base_url + "/api/users",
    "method": "POST",
    "headers": {
      "content-type": "application/x-www-form-urlencoded"
    },
    "data": {
      "username": username,
      "password": password,
      "email": email,
      "firstname": firstname,
      "lastname": lastname
    }
  };

  if (password === password2) {
    $.ajax(settings).done(function(response) {
      console.log(response);
    });
  } else {
    alert("No Matching password");
  }
}

// Logs in the user
function logIn() {
  var username = document.forms["login"]["username"].value;
  var password = document.forms["login"]["password"].value;
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": base_url + "/api/auth",
    "method": "POST",
    "headers": {
      "content-type": "application/x-www-form-urlencoded"
    },
    "data": {
      "username": username,
      "password": password
    }

  };

  $.ajax(settings).done(function(data) {
    window.localStorage.setItem('token', data.token);
    console.log('Welcome back!');
  });
}

// Displays all mangas for current user.
function getManga() {
  var token = window.localStorage.getItem("token");
  var username = document.forms["login"]["username"].value;
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": base_url + "/api/mangas/" + username,
    "method": "GET",
    "headers": {
      "x-access-token": token
    }
  };

  $.ajax(settings).done(function(data) {
    clean();
    data.map(function(manga) {
      var html = mangaInfo(manga);
      $(".mangas").append(html);
    });
  });
}

// Updates manga, currenlty increase manga chapter by one.
function oneUp() {
  var username = document.forms["login"]["username"].value;
  var manga = encodeURI(document.getElementById('manga').value.toLowerCase());
  var prevManga = getPrevManga();
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": base_url + "/api/mangas/" + username + "/" + manga,
    "method": "PUT",
    "headers": {
      "x-access-token": getToken(),
      "content-type": "application/x-www-form-urlencoded"
    },
    "data": {
      //"title": "Aiki",
      //"author": "Isutoshi",
      //"url": "http://www.readmanga.today/aiki",
      //"userStatus": "finished",
      //"type": "Japanese",
      //"categories": "Action, Ecchi, Martial Arts, Mature, Seinen",
      "chapter": prevManga.chapter + 1,
      //"seriesStatus": "Completed",
      //"plot": "There is fighting at the high school due to a power struggle for control. The granddaughter of the chief director requests help from the Aikido fighting style genius. Will he help? Or will he show his true colors with his bad boy ways?",
      //"altName": "Love Air",
      //"direction": "Right to Left",
      //"thumbnail": "http://www.readmanga.today/uploads/posters/aiki.jpg"
    }
  };

  $.ajax(settings).done(function(response) {
    clean();
    console.log(response);
    window.localStorage.setItem('prevManga', manga);
    findManga();    
  });
}

// Finds manga by title
function findManga() {
  var username = document.forms["login"]["username"].value;
  var manga = encodeURI(document.getElementById('manga').value.toLowerCase());
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": base_url + "/api/mangas/" + username + "/" + manga,
    "method": "GET",
    "headers": {
      "x-access-token": getToken()
    }
  };

  $.ajax(settings).done(function(manga) {
    window.localStorage.setItem('prevManga', JSON.stringify(manga));
    clean();
    var html = mangaInfo(manga);
    $(".mangas").append(html);
  });
}
              
            
!
999px

Console