JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<input id="message" value="hello" />
<div id="messages">
</div>

JavaScript

const API_BASE_URL = '';
const fetch = url => Promise.resolve([
	'message1',
  'message2',
  '<button onclick="javascript:alert(\'boom!\');">X</button>'
]);




const list = [1, 2, 3, 4, 5];
// could be const
// "oddList" (or similar) would be a better name 
let filtered = [];
// the whole loop could be replaced by a list.filter()
for (let i = 0; i < list.length; i += 1) {
	// unnecessary double equal
	if (list[i] % 2 == 1) {
  	filtered.push(list[i]);
  }
}

// what if it's missing?
const messagesDiv = document.getElementById('messages');
fetch(API_BASE_URL + '/messages')
	.then(messages => {
  	messages.forEach(message => {
      // we could use some temlating language instead of creating elements by hand
	  	const div = document.createElement('div');
      // message should be sanitized
      // should be "innerHTML"
	    div.innerHtml = message;
      messagesDiv.appendChild(div); 
    });
  });
  // missing catch