Simplify how the app works

With this change, there's no need for two search buttons anymore.
Now, if the user searches for a meal and clicks the button, it will
search based on the typed input, but if the input field is empty,
it'll simply generate a meal.

cypress/e2e/mealSuggestion.cy.js

@@ -36,18 +36,15 @@ describe('Meal suggestion', () => {
       .should('be.visible')
       .its('length')
       .should('be.at.least', 1)
-    cy.contains('button', 'Outra sugestão')
-      .as('button')
-      .should('be.visible')
     cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)')
     cy.section('End of pre-conditions')
   })
 
   it('shows one of all meal suggestions', () => {
     cy.step('Click "Other suggestion" button')
-    cy.get('@button')
+    cy.get('@searchButton')
       .click()
-    cy.get('@button')
+    cy.get('@searchButton')
       .blur()
 
     cy.step('Assert that meal and ingredients are visible')

src/index.html

@@ -30,7 +30,6 @@ <h2 id="meal-name" title="Refeição"></h2>
       <h3 id="ingredients-label" title="Ingredientes"></h3>
       <ul id="ingredients-list"></ul>
     </div>
-    <button id="generate-meal-button">Outra sugestão</button>
   </div>
   <script type="application/javascript" src="meals.js"></script>
   <script type="application/javascript" src="script.js"></script>

src/script.js

@@ -8,7 +8,6 @@ const mealEnum = Object.freeze({
 const mealName = document.getElementById('meal-name')
 const ingredientsLabel = document.getElementById('ingredients-label')
 const ingredientsList = document.getElementById('ingredients-list')
-const generateMealButton = document.getElementById('generate-meal-button')
 const mealTypeFilter = document.getElementById('meal-type-filter')
 const searchField = document.getElementById('search-field')
 const searchButton = document.querySelector('#search-container button[type="submit"]')
@@ -47,7 +46,12 @@ searchField.addEventListener('change', e => {
 })
 
 searchButton.addEventListener('click', e => {
-  e.preventDefault()
+  if (searchField.value) {
+    e.preventDefault()
+    searchField.value = ''
+    return
+  }
+  generateMeal()
 })
 
 function generateMeal() {
@@ -75,5 +79,3 @@ function showIngredients(ingredients) {
 window.onload = () => {
   generateMeal()
 }
-
-generateMealButton.addEventListener('click', generateMeal)

src/style.css

@@ -20,7 +20,7 @@ h1, h2, h3 {
 
 h1 {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 
 #ingredients-label {
@@ -44,17 +44,9 @@ select, input[type="text"], button {
   margin: 0 10px 0 1px;
 }
 
-#generate-meal-button {
-  width: unset;
-  padding: 8px;
-  margin-top: 10px;
-}
-
 label {
   font-weight: 600;
   min-width: 70px;
-  margin-right: 1px;
-  margin-bottom: 15px;
 }
 
 select:hover, input[type="text"]:hover, button:hover {
@@ -85,7 +77,6 @@ ul {
   padding-left: 20px;
   background-color: #f8f9fa;
   box-shadow: 2px 2px 8px rgba(0, 123, 255, 0.1);
-  max-height: 300px;
   overflow-y: auto;
   position: relative
 }
@@ -120,18 +111,11 @@ li:hover {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 50vh;
 }
 
 #meal-name {
-  min-height: 100px;
+  min-height: 120px;
   line-height: normal;
   overflow: visible;
   white-space: normal;
-}
-
-@media (max-width: 480px) {
-  ul {
-    max-height: 150px;
-  }
-}
+}