Created
August 23, 2017 23:24
-
-
Save mikeyb/1c0452a794d4bc1a85de7db5c040a626 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment