<!-- you don't need to touch HTML in this exercise -->
/* it is not required to use CSS in this exercise */
/* BUT I DON'T LIKE FOLLOWING RULES... */

.foo {
  color: blue;
}
/*
DOM Element APIs are quite powerful,
but the code will get messy with weird
variable names quite fast...

... that's why frameworks like React
or Vue.js exist!
*/

// Create an image
const i1 = document.createElement('img')
i1.alt = 'HTML5'
i1.width= 80
i1.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png'

// Create a paragraph with some text
const p1 = document.createElement('p')
const t1 = document.createTextNode('HTM5 is Cool!')
p1.appendChild(t1)

// Create another paragraph with a link
const p2 = document.createElement('p')
const a1 = document.createElement('a')
const t2 = document.createTextNode('Open LearnJS')
a1.href = '//learnjs.today'
a1.title = 'Go to LearnJS Today'
a1.appendChild(t2)
p2.appendChild(a1)

// Create a wrapper for paragraph and image
const d1 = document.createElement('div')
d1.appendChild(i1)
d1.appendChild(p1)
d1.appendChild(p2)

// Append our DOM structure to the page's
// BODY tag.
document.body.appendChild(d1)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.