// --- Directions
// Write a function that returns the number of vowels
// used in a string.  Vowels are the characters 'a', 'e'
// 'i', 'o', and 'u'.
// --- Examples
//   vowels('Hi There!') --> 3
//   vowels('Why do you ask?') --> 4
//   vowels('Why?') --> 0
// Part 2
// Then create the corresponding HTML that would make the code below function as follows:
// As a user when I go to the html page I see an input field marked ENTER WORD TO CHECK VOWELS
// When a user enters a word or sentence into the input field and then clicks the VOWELS button
// the field below prints out the HOW MANY VOWELS THE SENTENCE HAS in the browser.

// Part 3
// Style this with CSS using Flexbox

const vowels = (str) => {
  // code here
}

// Input field
const inputEl = document.getElementById('text-field')
// Show Answer Button
const btnEl = document.getElementById('vowels-button')
// Answer Display
const displayEl = document.getElementById('display-answer')

btnEl.addEventListener('click', (evt) => {
  displayEl.innerHTML = vowels(inputEl.value)
  inputEl.value = ''
})