Add solution for JS3 page2 Exercise

[pauly48]

Below section of exercise question is missing appropriate solution.

---

A HTML page with following solution code needs to be implemented and linked.

<h1>Friends List</h1>
Name: <input class="name">
Age: <input class="age">
<button class="add">Add</button>
<div class="box"></div>

<script>
    const list = document.querySelector('.box')
    const nameInput = document.querySelector('.name')
    const ageInput = document.querySelector('.age')
    const addB = document.querySelector('.add')

    const friendsData = localStorage.getItem('friends') || '[]'
    const friends = JSON.parse(friendsData)


    const render = () => {
        const newFriendsData = JSON.stringify(friends)
        localStorage.setItem('friends', newFriendsData)


        list.innerHTML = friends.reduce((acc, e, i) => {
            return acc + `
            <div>
                <h2 class="friendName">${e.name}</h2>
            </div>
            `
        }, '')

        const nameElements = document.querySelectorAll('.friendName')
        nameElements.forEach((e, i) => {
            e.onclick = () => {

                alert(friends[i]['age'])
            }
        })
    }

    addB.onclick = () => {

        friends.unshift({
            name: nameInput.value,
            age: ageInput.value
        })

        render()
    }

    render()
</script>