beardedtim/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>
<script>
    /**
     * I have a friends list
     */
    const friends = [
        {
            name: "Dave Smalls",
            gender: "M"
        },
        {
            name: "Sally Sue",
            gender: "F"
        },
        {
            name: "Fred Myers",
            gender: "fuck your norms"
        }
    ]

    let str = ''

    for (let i = 0; i < friends.length ; i++) {
        const friend = friends[i]

        str += `
            <div class="friend">
                <h2>${friend.name}</h2>
                <h5>${friend.gender}</h5>
            </div>
        `
    }

    /**
     * Put all friends in DOM
     */
    const app = document.getElementById('app')
    app.innerHTML = str

    app.innerHTML += `foobar`

    /**
     * Print all female friends names
     */

</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>

	</style>
	</head>
	<body>
	<div id="app">
	</div>
	</body>
	</html>
	<script>
	/**
	* I have a friends list
	*/
	const friends = [
	{
	name: "Dave Smalls",
	gender: "M"
	},
	{
	name: "Sally Sue",
	gender: "F"
	},
	{
	name: "Fred Myers",
	gender: "fuck your norms"
	}
	]

	let str = ''

	for (let i = 0; i < friends.length ; i++) {
	const friend = friends[i]

	str += `
	<div class="friend">
	<h2>${friend.name}</h2>
	<h5>${friend.gender}</h5>
	</div>
	`
	}

	/**
	* Put all friends in DOM
	*/
	const app = document.getElementById('app')
	app.innerHTML = str

	app.innerHTML += `foobar`

	/**
	* Print all female friends names
	*/

	</script>