JSFiddle - React, Tailwind, and code Playground

by lavisha99

HTML

todo

JavaScript

/* PROBLEM #6: Managing TODOs

https://jsonplaceholder.typicode.com/todos

#6.1 The URL above returns JSON data for a list of TODOs created at random. Create the DOM elements necessary to display the title of the first 10 TODOs in the list marked as incomplete.

#6.2 Add functionality so that when a TODO is clicked, it is not displayed anymore. In addition to removing the TODO, it should display the following message: "TODO <title> (<id>, <userId>) has been removed" where <title>, <id>, and <userId> corresponds to TODO being removed. You must use the "alert" function to display the message.

*/

/* SOLUTION */

let requestURL = 'https://jsonplaceholder.typicode.com/todos';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.onload = function() {
  let todos = request.response;
  console.log(todos);
  
  let first10 = 0;
	for(let i = 0; i < todos.length && first10 < 10; i++) {
  	
    if(todos[i].completed) {
    	console.log(todos[i]);
      first10++;
      
      let li = document.createElement('li');
      toli.textContent = todo.title;
      
			li.dataset.title = todo.title;
			li.dataset.id = todo.id;
     li.dataset.userId = todo.userId;

      let body = document.querySelector("body");
   body.append(todoHTML);      
      
      li.onclick = removeTodo;
    }
  }
}
request.send();
/*
function removeTodo() {
	//alert("TODO " + this.getAttribute("data-id") + "( " +<id> + " ," + <userId> + " ) has been removed");
  alert("TODO " + this.dataset.title + 
  	" ("  + this.dataset.id + "," + this.dataset.userId + ") has been removed");
	this.parentNode.removeChild(this);
}*/