Published
Edited
Sep 28, 2018
html`<span id="example-1" style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>`
// let's grab it and turn it purple, why not?
color = document.getElementById('example-1').style.backgroundColor = "red"
form = document.getElementById('example-2')
input = document.getElementById('example-2-input-1')
input.value = "Mighty"
input.value = "Micky"
bullseye = svg`<svg id='bullseye-1' width=600 height=120>
<circle cx=60 cy=60 r=60 fill="red"'></circle>
<circle cx=60 cy=60 r=50 fill="orange"'></circle>
<circle cx=60 cy=60 r=40 fill="yellow"'></circle>
<circle cx=60 cy=60 r=30 fill="green"'></circle>
<circle cx=60 cy=60 r=20 fill="blue"'></circle>
<circle cx=60 cy=60 r=10 fill="purple"'></circle>
</svg>`
// make it more goth
// {
// bullseye.children[0].style = 'fill:rgb(0,0,0)'
// bullseye.children[1].style = 'fill:rgb(50,50,50)'
// bullseye.children[2].style = 'fill:rgb(100,100,100)'
// bullseye.children[3].style = 'fill:rgb(150,150,150)'
// bullseye.children[4].style = 'fill:rgb(200,200,200)'
// bullseye.children[5].style = 'fill:rgb(250,250,250)'
// }
html`
<style>
#circle-1 {
fill: red;
}
#circle-2 {
fill: orange;
}
#circle-3 {
fill: yellow;
}
#circle-4 {
fill: green;
}
#circle-5 {
fill: blue;
}
#circle-6 {
fill: purple;
}
</style>
`
document.getElementsByClassName('bullseye')
document.getElementById('circle-1').style.fill = 'black'
document.getElementById('circle-1').style.fill = 'red'
$ = require('jquery')
$('#bullseye-2')
$('a').on('click', function(event) {
console.log(event.target.innerText)
})
d3 = require('d3')
{
let myData = [344,436,180,502,299]
return d3.select('#bullseye-2')
.selectAll('circle')
.data(myData)
.attr('cx', d => d)
}
{
var event = new CustomEvent('my-custom-event-9999');
bullseyeThree.dispatchEvent(event);
}
bullseyeThree.addEventListener('my-custom-event-9999', function(evt) {
return console.log(evt);
})
bullseyeThree.addEventListener('my-custom-event', function(evt) {
console.log(evt);
})
// trigger an event
$('#bullseye-3 > circle').trigger('my-other-custom-event')
// listen for an event.
// This is the code for excercise 3
$('#bullseye-3').on('my-other-custom-event', function(evt){
console.log(evt) // your custom event will go here
})
bullseye.onclick = function () {
console.log("this");
}
$('#example-2').on('submit', function(){
console.log("This Form Has Been Submited")
})
message = new Promise(resolve => {
setTimeout(() => {
resolve("I am asynchronous!");
}, 3000);
})
message.toUpperCase()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
