Paste code

<!DOCTYPE html>
<html>
    <head>
        <title>Identification code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="./style.css" rel="stylesheet"/>
        <script type="text/javascript" src="./app.js" defer></script>
        <meta name="author" content="Nicolas M">
    </head>
    <body>
        <main>
            <h1>Phone Book</h1>
            <div class="container">
                <div>
                    <hr>
                    <h3>Insert / Update</h3>
                    <p>
                        <label for="lastName">Last Name:</label>
                        <input id="lastName" required>
                    </p>
                    <p>
                        <label for="firstName">First Name:</label>
                        <input id="firstName" required>
                    </p>
                    <p>
                        <label for="phone">Phone:</label>
                        <input id="phone" required>
                    </p>
                  
                    <p>
                        <label for="birthyear">Birth year:</label>
                        <input id="birthyear"  required>
                    </p>
                    <p class="buttons">
                        <button onclick="save()">Save</button>
                        <button onclick="cancel()">Cancel</button>
                        <button onclick="startData()">Start data</button>
                    </p>
                    
                </div>
                <div>
                    <hr>
                    <h3>All friends</h3>
                    <ul id="allFriends" ></ul>
                    <p>Average age: <span id="averageAge"></span></p>
                    <p>Number of friends: <span id="numberFriends"></span></p>
                </div>
                <div>
                    <hr>
                    <h3>One friend</h3>
                    <ul id="oneFriend"></ul>
                    <p class="buttons">
                        <button onclick="remove()">Remove</button>
                        <button onclick="edit()">Edit</button>
                    </p>
                </div>
            </div>
        </main>
        
    </body>
</html>
class person { 
            
    constructor (lastname,firstname,phone,birthYear) {
        this._lastname = lastname; 
        this._firstname = firstname;
        this._phone = phone;
        this._birth = birthYear
    }

    //methods 
    personAge(){ 
        let date = new Date()
        let currentYear = Number(date.getFullYear())
        let personAge = currentYear-this._birthYear
        return personAge
    }
    fullName (){
        return `${this._lastname} ${this._firstname} `
    }
   
    // Getter to get person's details
    get lastname() {
        return this._lastname;
    }
    get firstname() {
        return this._firstname;
    }
    get phone(){
        return this._phone;
    }
    get birthYear() {
        return this._birthYear;
    }

    // Setter to update existing person's details
    set firstname(newFirstname) {
        this._firstname = newFirstname;
    }
    set lastname(newLastname) {
        this._lastname = newLastname;
    }
    set phone(newPhone) {
        this._phone = newPhone;
    }
    set birthYear(newdate) {
        this._birthYear = newdate;
    }

}

let phonebook = [];

function save(){
    
    let lastname = document.getElementById('lastName').value
    let firstname = document.getElementById('firstName').value
    let phone = document.getElementById('phone').value
    let birthYear = Number(document.getElementById('birthyear').value)

    if (lastname === ' ') {
        document.getElementById('lastName').focus();
        alert('Please fill up the Lastname')
    }
    else if(firstname === ' '){
        document.getElementById('firstName').focus();
        alert('Please fill up the Firstname')
    }
    else if(phone === ' '){
        document.getElementById('phone').focus();
        alert('Please fill up the Phone')    
    }
    else if(birthYear === ' ' || !isNaN ){
        document.getElementById('birthyear').focus();
        alert('The birthdate is empty or incorrect')    
    }
    else {
        const friend = new person (firstname, lastname, phone, birthYear) // create an object then add it to phonebook
        phonebook.push(friend)
        displayPhoneBook ()
    }

}

function displayPhoneBook (){
    document.getElementById('allFriends').innerHTML= ' '
    for(i=0;i<phonebook.length;i++){
        document.getElementById('allFriends').innerHTML+='<li>'+phonebook[i].firstname+', '+phonebook[i].lastname+'</li>'
        if(phonebook.length>1){
            document.getElementById('allFriends').innerHTML+='<hr>'
        }
    }

    document.getElementById('numberFriends').innerHTML= phonebook.length

    //Calculate average age
    const ages = phonebook.map((objet) => objet.age);
    
    let ageSum = 0
    for (const age of ages){
        ageSum += age
    }
    const ageAverage = ageSum / phonebook.length

        document.getElementById('averageAge').innerHTML= ageAverage

}


function cancel(){
    document.getElementById('lastName').value = ' '
    document.getElementById('firstName').value = ' '
    document.getElementById('phone').value = ' '
    document.getElementById('birthyear').value = ' '
}