Tutorial 03

  1. Create an HTML document containing a <div> element. Using JavaScript and the document.createElement method, create a <p> element. Set its text content to "Hello, World!" using the innerText property. Finally, append the paragraph to the <div> element using the append or appendChild method.


    Solution 
    <html lang="en">
<head>
    <script src="script.js" defer></script>
</head>

<body>
    <div></div>
</body>
</html>

    const divElement = document.querySelector("div")
const pElement = document.createElement("p")
pElement.innerText = "Hello, World!"
divElement.append(p)

  2. Create an HTML document with a <section> element. Using JavaScript and the document.createElement method, create a <div> element. Define a constant named message containing the string "Hello, World!". Using Template Strings, create a <p> element with message as its content. Set the innerHTML of the <div> to this paragraph. Finally, append the <div> to the <section> element using the appendChild or append method.


    Solution 
    <html lang="en">
<head>
    <script src="script.js" defer></script>
</head>

<body>
    <section></section>
</body>
</html>

    const divElement = document.createElement("div")
const message = "Hello, World!"
const p = `<p>${message}</p>`
divElement.innerHTML = p

const sectionElement = document.querySelector("section")
sectionElement.append(divElement)

  3. Create an HTML document with a <figure> element. Using JavaScript and the document.createElement method, create an <img> element. Define a constant named link with the value "https://www.mtroyal.ca/_files/img/mru-logo-152x100.png". Use the setAttribute method to set the src attribute of the <img> to link. Finally, append the <img> to the <figure> element using the appendChild or append method.


    Solution 
    <html lang="en">
<head>
    <script src="script.js" defer></script>
</head>

<body>
    <figure></figure>
</body>
</html>

    const imgElement = document.createElement("img")
const imageLink = "https://www.mtroyal.ca/_files/img/mru-logo-152x100.png"
imgElement.setAttribute("src", imageLink)

const figureElement = document.querySelector("figure")
figureElement.append(imgElement)

  4. Create an HTML document with a <figure> element. Use the fetch API to request data from https://randomfox.ca/floof and extract the image URL from the response. Store this URL in a constant. Using Template Strings, create an <img> element with its src attribute set to the image URL. Finally, use the innerHTML method to insert the <img> element into the <figure> element.


    Solution 
    <html lang="en">
<head>
    <script src="script.js" defer></script>
</head>

<body>
    <figure></figure>
</body>
</html>

    const figureElement = document.querySelector("figure")
const getData = async function() {
    const res = await fetch("https://randomfox.ca/floof")
    const data = await res.json()
    const imageURL = data.image
    const imgElement = `<img src="${imageURL}" />`

    figureElement.innerHTML = imgElement
}

getData() // call the function

  5. Repeat exercise 4, but this time fetch data from https://api.thecatapi.com/v1/images/search.


    Solution

    Same as above, only change the API address in fetch and the line that creates the imageURL constant:

    const imageURL = data[0].url

    Code is correct, but the server may block the request due to security reasons.


  6. Repeat exercise 4, but this time fetch data from https://random-d.uk/api/v2/random.


    Solution

    Same as above, only change the API address in fetch and the line that creates the imageURL constant:

    const imageURL = data.url

    Code is correct, but the server may block the request due to security reasons.


  7. Repeat exercise 4, but this time fetch data from https://random.dog/woof.json.


    Solution

    Same as above, only change the API address in fetch and the line that creates the imageURL constant:

    const imageURL = data.url

    Code is correct, but the server may block the request due to security reasons.


  8. Repeat exercise 4, but add a <button> element to the HTML document with the text Load Image. When the user clicks the button, fetch data from the API, extract the image URL, and store it in a constant. Using Template Strings, create an <img> element with its src attribute set to the image URL. Finally, use the innerHTML method to insert the <img> element into the <figure> element.


    Solution 
    <html lang="en">
<head>
    <script src="script.js" defer></script>
</head>

<body>
    <figure></figure>
    <button>Load Image</button>
</body>
</html>

    const buttonElement = document.querySelector("button")
const figureElement = document.querySelector("figure")
const getData = async function() {
    const res = await fetch("https://randomfox.ca/floof")
    const data = await res.json()
    const imageURL = data.image
    const imgElement = `<img src="${imageURL}" />`

    figureElement.innerHTML = imgElement
}

buttonElement.addEventListener("click", getData)

  9. Repeat exercise 8, but this time fetch data from https://api.thecatapi.com/v1/images/search.


    Solution

    Same as above, only change the API address in fetch and the line that creates the imageURL constant:

    const imageURL = data[0].url

    Code is correct, but the server may block the request due to security reasons.


  10. Repeat exercise 8, but this time fetch data from https://random-d.uk/api/v2/random.


    Solution

    Same as above, only change the API address in fetch and the line that creates the imageURL constant:

    const imageURL = data.url

    Code is correct, but the server may block the request due to security reasons.