User Template with BIND

A user-template-with-bind.markdown

User Template with BIND

A Pen by Bzozoo on CodePen.

License.

index.html

<div id="userwelcomeDiv">
	{{ User Welcome Panels loading... }}
</div>

script.js

let users = [
	{name: "Zoltán", city: "Budapest"},
	{name: "Éva",  city: "Debrecen"},
	{name: "István", city: "Kecskemét"},
	{name: "Katalin", city: "Szeged"},
	{name: "János", city: "Sopron"},
	{name: "Fanni", city: "Tatabánya"}
]

console.table(users)

function welcomePanel(name, city) {
	let welcomeTemplate = function () {
		return `<div class="welcomePanels">Welcome here <span class="green">${this.name}</span> from ${this.city}!</div>`;
	};

	let welcomeuser = welcomeTemplate.bind({
		name: name.toUpperCase(),
		city: city
	})();

	return welcomeuser
}

function renderWelcomePanels(){
	userwelcomeDiv.innerHTML = ""
	for(let user of users){
		userwelcomeDiv.innerHTML += welcomePanel(user.name, user.city)
	}
}


renderWelcomePanels()

style.css

.welcomePanels {
	margin: 10px;
	padding: 10px;
	border: 3px solid darkgray;
	background-color: lightgray;
}

.green {
	color: green;
}