JSFiddle - React, Tailwind, and code Playground

by giovanni gokhan morkoc

HTML

<div id="wrapper">
  <ul>

  </ul>
</div>

JavaScript

showdata = true;
 var checkData = new Promise(
   function(resolve, reject) {
     let container = document.querySelector("#wrapper");
     let todos = [];
     if (showdata) {
       fetch('https://jsonplaceholder.typicode.com/todos')
         .then(response => response.json())
         .then(response => {
           this.todos = response;
           container.style.display = "block";
           container.innerHTML = this.todos.slice(0, 15).map(item =>
             `<li>${item.title}</li>`).join("")
         });
       const succesMsg = "Connection granted"
       resolve(succesMsg);
     } else {
       document.querySelector("#wrapper").style.display = "none";
       const failed = "Connection error"
       reject(failed);
     }
   }
 );

 function testData() {
   checkData
     .then(function(done) {
       console.log(done)
     })
     .catch(function(failed) {
       console.log(failed)
     })
 }

 testData();