studentlist.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="styles.css?v=1.0">

</head>

<body>
    <h1>bands</h1>
 <main id="app"> </main>

 <template id="studTemplate">
 <div>
 	<h1>Name goes here</h1>
 	<h2 class="members"><span>VALUE</span> members</h2>


 	</div>
 </template>
  <script src="js/scripts.js">


	const students=
	[
	{
		name: "Adelajda Kolodziejska",
		dob: {
			year:1982,
			month:12,
			day: 22
		},
		email: "ad@gmail.com",
		phone: "+48 229929292",
		country: "Poland",
		hobbies: ["drawing", "LEGO"],
		married: true,
		gender: "Female"
	},
	{
		name: {
			first: "Andrea ",
			second: "MakarovÃƒÂ¡"
		},
		dob: {
			year: 1999,
			month: 8,
			day: 16
		},
		email: "andreamakarova99@gmail.com",
		phone: "+421 917 554 710",
		country: "Slovakia",
		hobbies: ["Photography", "Art"],
		married: false,
		gender: "Female"
	},
	{
		name: "Angel Meyer",
		dob: {
			year: 1997,
			month: 08,
			day: 11,
		},
		email: "angel@angelezrameyer.com",
		phone: "+4593303783",
		country: "Denmark",
		hobbies: ["anime", "drawing", "dogs", "comics"],
		married: false,
		gender: "F",
	},
	{
		name: "Audrey Fryman",
		dob: {
			year: 1998,
			month: 6,
			day: 13,
		},
		email: "audr0093@stud.kea.dk",
		phone: "+4550340749",
		country: "Denmark",
		hobbies: ["photography"],
		married: false,
		gender: "Female",


	},
	{
		name:"Eva Malek",
		dob: {
			year:1999,
			month:4,
			day:9
		},

		email:"evamalek26@gmail.com",
		phone:"+4550336728",
		country:"Croatia",
		hobbies: ["hockey", "alcohol"],
		married: false,
		gender: "female",
	},
	{
		name: "Gunnar SigurÃƒÂ°arson",
		dob: {
			year: 1996,
			month: 3,
			day: 12,
		},
		email: "gunnar@sigurdarson.is",
		phone:  "+45 91 53 16 00",
		country: "Iceland",
		hobbies: ["Tech", "Design", "photography"],
		married: false,
		gender: "Male",
	},
	{
		name: "Iga",
		dateOfBirth: {
			year: 1999,
			month: 7,
			day: 6
		},
		email: "iga.naskret@gmail.com",
		phone: "451234",
		country: "Poland",
		hobbies: ["books", "calligraphy"],
		married: false,
		gender: "F"
	},
	{
		name: "Justyna Fli",
		dob: {
			year: 1998,
			month: 4,
			day: 19
		},
		email: "just.fli@gmail.com",
		phone: "+48997",
		country: "Poland",
		hobbies: ["dogs", "food"],
		married: false,
		gender: "Female"
	},
	{
		name: "Martin",
		dob: {
			year: 1996,
			month: 11,
			day: 10
		},
		email: "martin@mail.com",
		phone: "+37213498137481",
		country: "Estonia",
		hobbies: ["photography", "webdev"],
		married: false,
		gender: "Male",
	},
	{
		name: "Martynas",
		dob: {
			year: 1996,
			month: 10,
			day: 20
		},
		email: "mart55p8@stud.kea.dk",
		phone: "+3700000",
		country: "Lithuania",
		hobbies: ["Traveling", "Music"],
		married: false,
		gender: "Male",
	},
	{
		name: "Natasha Lefort",
		dob: {
			year: 1996,
			month: 11,
			day: 3
		},
		email: "natashalefort@gmail.com",
		phone: "+4527837607",
		country: "Denmark",
		hobbies: ["Design", "Photography"],
		married: false,
		gender: "Female"
	},
	{
		name: "Neringa Ivanov",
		dob: {
			year: 1998,
			month: 1,
			day: 21
		},
		email: "neringa@kea.dk",
		phone: "+4545454577",
		country:"Denmark",
		hobbies:["Art", "Design", "Hygge"],
		married: false,
		gender: "Female"

	},
	{
		name: "Paula Mazik",
		dob: {
			year: 1999,
			month: 6,
			day: 30
		},
		email: "paula@kea.dk",
		phone: "+4512345678",
		country: "Poland",
		hobbies: ["Fashion", "Traveling"],
		married: false,
		gender: "Female"

	},
	{
		name: "Tabea GrÃƒÂ¶sel",
		dob: {
			year: 1995,
			month: 6,
			day: 15
		},
		email: "tabeagrsl@gmail.com",
		phone: "+ 49 123456789",
		country: "Germany",
		hobbies: ["Snorkeling", "Dancing", "Acting"],
		married: false,
		gender: "female"
	},
	{
		name: "Ula Wozniak",
		dob: {
			year: 1997,
			month: 1,
			day: 15
		},
		email: "ula.wozniak1@gmail.com",
		phone: "+4522387341",
		country: "Poland",
		hobbies: ["coffee"],
		married: false,
		gender: "Female",

	},
	{
		name: "Rucz Brigitta",
		dob: {
			year: 1998,
			month: 3,
			day: 16
		},
		email: "brigitta.rucz@yahoo.com",
		phone: "+40 111",
		country: "Romania",
		hobbies: ["coding" , "design"],
		married: false,
		gender: "Female"
	},
	{
		name: "Anele Rubinaite",
		dob:{
			year: 1995,
			month: 9,
			day: 23
		},
		email: "anele@gmail.com",
		phone: 2946283,
		country: "Lithuania",
		hobbies: ["friends", "writing"],
		married: false,
		gender: "Female"
	},


]
	 const template = document.querySelector("#bandTemplate").content;

	   students.forEach(listStud);

	function listStud(stud){
		const clone = template.cloneNode(true);

		clone.querySelector("h1").textContent=stud.name;
		clone.querySelector(".members span").textContent=listStud.members;

		document.querySelector("#app").appendChild(clone);
	}

	</script>
</body>
</html>