maps.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Maps</title>
    <link rel="stylesheet" href="../base.css">
</head>
<body>
    <ul class="prizes">

    </ul>
    <script>
        const person1 = {
            name: 'Sharif',
            age: 33,
        };
        const myMap = new Map();
        // .set()
        myMap.set('name', 'sharif');
        myMap.set(20, 'This is a number');
        myMap.set(person1, 'Really Cool');

        // .get()
        console.log(myMap.get(person1));

        const prizes = new Map();
        const score = 100;
        prizes.set(100, 'Bear');
        prizes.set(200, 'Duck');
        prizes.set(300, 'Car');  
        console.log(`you win a ${prizes.get(score)}`);   
        
        const ul = document.querySelector('.prizes');
        for(const [points, prize] of prizes){
            const li = `<li>${points} - ${prize}</li>`;
            ul.insertAdjacentHTML('beforeend', li);
        }
    </script>
</body>
</html>