Skip to content

Instantly share code, notes, and snippets.

@mikeyb
Created Aug 23, 2017
Embed
What would you like to do?
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