JSFiddle

  • React Base Fiddle (JSX) #4 is the latest revision

    Starting point for creating JSFiddles with React. This uses React with Addons.

    var AddProductForm = React.createClass({
        render: function(){
            return(
                <form >
                    <input type='text' placeholder='lablbalbalbal'/>
                </form>
            )
        }
    })
    
    var HeaderAction = React.createClass({
        render: function(){
            return(
                <button type="button" onClick={this.handleClick}  className="btn border-slate text-slate-800 btn-flat"><i className={this.props.icon + " position-left"}></i>{this.props.name}</button>
            )
        },
        handleClick: function(){
            var ...
  • checkered-board #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function setup() {
        var numberOfPositions = 8 * 8;
        
        for (var i = 0; i < numberOfPositions; i++) {
            var element = document.createElement('div');
            element.classList ...
  • Inline mentions #4 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var properties = [
      'boxSizing', 'width', 'height', 'overflowX', 'overflowY',
      'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
      'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
      'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize ...
  • :bitbucket-client-side-stream

    stream bitbucket repos

    function bbRepos(response) {
      var repos = response.repositories;
    
      var i = repos.length;
      while(i){
        i--;
        var repo = repos[i];
        var name ...
  • :github-client-side-stream

    stream github repos

    function ghRepos(response) {
      var meta = response.meta;
      var data = response.data;
    
      var i = response.data.length;
      while(i){
        i--;
        var ...
  • Coderwall Badges #1 is the latest revision

    Display coderwall badges

    function cw_badges(json) {
      var els = document.querySelectorAll(".cw_badges"), cw = json.data;
      var usr = cw.username;
    
      for (var eli in els ...
  • VERT AND HORIZ CENTERING #1 is the latest revision

    Vertical and Horizontal Centering given inline/inline-*, block, and flex box

    <!---------------------------------  KNOWN WIDTH HEIGHT    --------------------------------->
    
    <div class="c-known-height-and-width">
        <div>
            Ima a block level element with fixed width and height centered horizontally and vertically.
        </div>
    </div>    
    
    <hr>
    
    <div class="c-unknown-height-and-width">
        <div>
            Ima a block level element with ...</div></div></!--------------------------------->
  • Vertical Centering

    INLINE, BLOCK, FLEX

    <!--------------- INLINE INLINE-* ----------------------->
    <!--------------- Single Line ----------------------->
    <!-- PADDING -->
    <div class="cv-padding">
      <a href="#0">We're</a>
      <a href="#0">Centered</a>
      <a href="#0">Bits of</a>
      <a href="#0">Text</a>
    </div>
    
    
    
    <br><br><hr>
        
        
        
    <!-- LINE HEIGHT -->
    <div class="cv-line-height">
      <div>
        I'm a centered line.
      </div>
    </div>
    
    
    
    <hr>
        
        
         
    <!--------------- MULTI LINE ----------------------->
    <!-- TABLE -->
    <table>
      <tr>
        <td>
          I'm vertically centered multiple lines of text in ...</td></tr></table></!--></!---------------></!--></!--></!---------------></!--------------->
  • Horizontal Center

    Center Horizontally with inline/inline-* elements block element multiple block elements

    <!------------------------------------------------------->
    <header>
      This text is centered.
    </header>
    
    <nav role='navigation'>
      <a href="#0">One</a>
      <a href="#0">Two</a>
      <a href="#0">Three</a>
      <a href="#0">Four</a>
    </nav>  
    <!------------------------------------------------------->
    <br><br>
        
        
        
        
    <!------------------------------------------------------->
    <main>
      <div class="center">
        I'm a block level element and am centered.
      </div>
    </main>
    <!------------------------------------------------------->
    <br><br>
        
        
        
        
        
    <!------------------------------------------------------->
    <main class="inline-block-center">
      <div>
        I'm an ...</div></main></!-------------------------------------------------------></!-------------------------------------------------------></!-------------------------------------------------------></!-------------------------------------------------------></!------------------------------------------------------->
  • JS "classes"

    Use Function to simulate JS classes.

    //Define "class" like structures in JS
    
    
    /******************************************* 1 ***************************************/
    
    //Define a "class" using a function
    function AntiCar(model) {
         this.model = model;
         this ...