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

              
                <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Spiffy Quiz</title>
  </head>
  <body>
    <section class="section">
      <div class="container content">
        <p><h2 class="has-text-centered">Welcome to the Spiffy Quiz!</h2></p>
        <p>
          Here you will be tested on javascript skills along with your troubleshooting skills if you have never used the <a href="//mithril.js.org" target="_blank">Mithril</a> framework ;)  We use it a lot.  You are not expected to know it initially, but you should be able to show the ability to learn it.  It is a simple yet complex framework.  We will focus on the simple side, those who are well versed in Mithril should fly through this and get to the top of our radar.
        </p>
        <p>
          <h4>About</h4>
          This is a simple page using Bulma CSS framework and Mithril CSS framework.  Personally I love them, a lot.  You don't have to, but you should be comfortable using non standard libraries.  Keeping library bloat to a minimum is a goal and we aren't afraid to learn new things.
        </p>
        <p>
          <h5 class="has-text-centered">There are a few tasks required of you.  Fork this Pen and complete the work and submit your pen url along with your response to Spiffy.</h5>
        </p>
      </div>
    </section>
    <div class="columns">
      <div class="column is-half is-offset-one-quarter">
        <div id="task1">Hint:  Attach to me somewhere...</div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-half is-offset-one-quarter">
        <div id="task2"></div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-half is-offset-one-quarter">
        <div id="task3"></div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-half is-offset-one-quarter">
        <div id="bonus1"></div>
      </div>
    </div>
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                var App = App || {};

App = {
  data: {
    counter: 0
    //  Other things might be useful here
  },

  //
  //  TASK 1
  //
  task1: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Task 1"),
              m("p", {class: "card-header-title"}, "Increment counter onclick")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"},
              m("div", {class: "content has-text-centered"}, App.counter_input())
            )
          ),
          m("footer", {class: "card-footer button"}, App.counter_increment())
        ]
      )
    ]
  },
  
  counter_input: function ()
  {
    return m("input[disabled]",
      {
        id: "counter",
        class: "has-text-centered has-text-centered is-half is-offset-one-quarter",
        type: "text",
        value: App.data.counter
      }
    )
  },
  
  counter_increment: function ()
  {
    return m("a",
      {
        id: "clicker",
        class: "card-footer-item",
        onclick: function ()
        {
          // Task 1 - Question 1  - How are we tracking clicks?
          //
          // Answer = 

          // It won't be this easy forever..
          // Uncomment line below to continue on your journey..
          // App.data.counter++;

          // Might be handy for Task 2..
          // App.multiply_it();
        }
      },
      "Increment"
    );
  },

  //
  //  TASK 2
  //
  task2: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Task 2"),
              m("p", {class: "card-header-title"}, "Multiply increment value by ϕ")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"},
              [
                App.multiplier_input(),
                "*",
                App.phi_input(),
                "=",
                App.multiplied_input()
              ]
            )
          )
        ]
      )
    ];
  },
  
  multiplier_input: function ()
  {
    //  What would an input with a dynamic value look like?
    return m("input[disabled]", {id: "multiplier", class: "has-text-centered", type: "text", size: "2", value: "hmmm"});
  },
  
  phi_input: function ()
  {
    return m("input[disabled]", {class: "has-text-centered", type: "text", id: "phi", value: "1.618", size: "4"})
  },
  
  multiplied_input: function ()
  {
    //  What would an input with a dynamic value look like?
    return m("input[disabled]", {class: "has-text-centered", type: "text", id: "multiplied", size: "16", value: "hmmm"})
  },
  
  multiply_it: function ()
  {
    // We should probably store some value somewhere
  },

  //
  // Task 3
  //
  task3: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Task 3"),
              m("p", {class: "card-header-title"}, "Reset Counter")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"}, "The button below should reset the above counter.")
          ),
          m("footer", {class: "card-footer"},
            m("a",
              {
                class: "card-footer-item button",
                onclick: function ()
                {
                  // Don't overthink this one
                }
              },
              "Reset"
            )
          )
        ]
      )
    ];
  },
  
  //
  //  Bonus 1
  //
  bonus1: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Bonus 1"),
              m("p", {class: "card-header-title"}, "Get current BTC price")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"},
              m("p",
                [
                  m("a", {id: "btcprice", class: "button is-success", value: "hmmm"}, "$" + "hmmm"),
                  m("h6",
                    [
                      m("br"),
                      "You can use ",
                      m("a", {href: "https://coinmarketcap.com/api/", target: "_blank"}, "coinmarketcap.com"),
                      "'s API"
                    ]
                  )
                ]
              )
            )
          ),
          m("footer", {class: "card-footer"},
            m("a",
              {
                class: "card-footer-item button",
                onclick: App.get_bitcoin_price
              },
              "Update Bitcoin Price"
            )
          )
        ]
      )
   ];
  },
  
  get_bitcoin_price: function ()
  {
    return m.request(
      {
        method: "GET",
        url: "https://api.coinmarketcap.com/v1/ticker/bitcoin/"
      }
    ).then(
      function (items)
      {
        // What are we storing and where?
      }
    ).catch(
      function ()
      {
        // Do something sane on failure
      }
    );
  }
  
};

var Task1 = {
  view: function ()
  {
    return App.task1();
  }
};

var Task2 = {
  view: function ()
  {
    return App.task2();
  }
};

var Task3 = {
  view: function ()
  {
    return App.task3();
  }
};

var Bonus1 = {
  view: function ()
  {
    return App.bonus1();
  }
};

m.mount(document.getElementById("task1"), Task1);
m.mount(document.getElementById("task2"), Task2);
m.mount(document.getElementById("task3"), Task3);
m.mount(document.getElementById("bonus1"), Bonus1);

// 1.0.0
              
            
!
999px

Console