Here is the error message that I am encountering:
Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLButtonElement.<anonymous>
Error is located at app.js on line 7
const flexContainer = document.querySelector('.flex-container')
const btn = document.querySelector('.btn')
btn.addEventListener('click', e => {
let div = document.createElement('div')
div.classList.add('.item-1')
flexContainer.appendChild(div)
})body{
background: #333;
min-height: 100vh;
}
.flexbox-container{
display: flex;
justify-content: space-around;
}
.flexbox{
width: 300px;
margin: 10px;
border: 3px solid pink;
background: white;
}
.item-1{
min-height: 200px;
}
.item-2{
min-height: 200px;
align-self: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">add card</button>
<div class="flexbox-container">
<div class="flexbox item-1"></div>
<div class="flexbox item-2"></div>
</div>
<script src="app.js"></script>
</body>
</html>