<h1>Dialog</h1>

<h2>Ilvermorny fact file:</h2>
<button id="openBtn">Click to know more!</button>
<dialog id="dialog">
  <button id="closeBtn">close</button>
  <ul>
    <li>
      <h4>WHERE IN THE WORLD</h4>
      <p>Mount Greylock, Massachusetts, North America</p>
    </li>
    <li>
      <h4>TYPE</h4>
      <p>School of witchcraft and wizardry</p>
    </li>
    <li>
      <h4>RESIDENTS OR OWNERS</h4>
      <p>Founded by Isolt Sayre, James Steward, Chadwick Boot and Webster Boot
      </p>
    </li>
    <li>
      <h4>MAGICAL PROPERTIES</h4>
      <p>Enchanted carvings of the four house beasts that react in the presence of new students</p>
    </li>
  </ul>

</dialog>

/* Only for styling, not required for it to work */
body {
  background-color: blanchedalmond;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 3rem;
  color: indianred;
  font-family: "Berkshire Swash", cursive;
  text-align: center;
}

h2 {
    font-size: 1.4rem;
  color: #333;
  font-family: "Berkshire Swash", cursive;
  text-align: center;
}

#openBtn, #closeBtn {
  border: none;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  border-radius: 3px;
  width: 200px;
  height: 40px;
  font-size: 1rem;
  font-family: sans-serif;
  cursor: pointer;
}


#closeBtn {
  width: 80px;
  height: 30px;
  font-size: 0.9rem;
  margin-bottom: 30px;
}

#openBtn:hover, #openBtn:focus,
#closeBtn:hover, #closeBtn:focus{
  background-color: hsl(0, 56%, 30%);
}

dialog {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 30px;
  font-family: sans-serif;
  color: #555;
}

ul {
  list-style-type: none;
}
li {
  margin-bottom: 40px;
}

h4, p {
  margin: 0;
}

p {
  margin-top: 12px;
}

const dialog = document.getElementById('dialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');

openBtn.addEventListener('click', function() {
  dialog.setAttribute('open', true);
})

closeBtn.addEventListener('click', function() {
  dialog.removeAttribute('open');
});