JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<ul class="mylist"></ul>

<ul class="mylist"></ul>

JavaScript

var socialMedia = {
    facebook: 'http://facebook.com',
    twitter: 'http://twitter.com',
    instagram: 'http://instagram.com',
    youtube: 'http://youtube.com/'
}

//make self executing function
//this equals to social(socialMedia);
var social = function() {
    var output = '<ul>',
        myList = document.querySelectorAll('.mylist');
    for( var key in arguments[0] ) {
        output += '<li><a href="'+ socialMedia[key] +'">' + key + '</a></li>';
    }
    output += '</ul>';
    
    for(var i = myList.length - 1; i >= 0; i--) {
        myList[i].innerHTML = output;
    }
    
    
}(socialMedia);