JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div id="box">FIRE REQUEST!!</div>

CSS

#box {
  border-radius: 3px;
  padding: 5px 20px;
  width: 130px;
  border: 1px solid #334;
}

#box:hover {
  cursor: pointer;
  background-color: beige;
}

JavaScript

const getTodo = () => {
  return new Promise((resolve, reject) => {
    /* fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => resolve(json))
      .catch(err => reject(err)); */
    var img = new Image();
    img.src = "http://www.hq.nasa.gov/office/pao/History/alsj/misc/apmisc-60-SAT-1.jpg"
    img.onload = function() {
      console.log("Width: " + img.width);
      resolve("Image loaded properly");
    };
    img.onerror = function() {
      reject("There was problem uploading image");
    };
  })
}

const getSum = (a, b, c, d) => {
  console.log("Sum is ", parseInt(a + b + c + d));
}

const uploadImage = async () => {
  let result = await getTodo();
  console.log("result ", result);
  getSum(1, 2, 1, 2);
}

document.querySelector("#box").addEventListener("click", uploadImage);