diff --git a/cypress/e2e/mealSuggestion.cy.js b/cypress/e2e/mealSuggestion.cy.js
index eebeec5..e6c021e 100644
--- a/cypress/e2e/mealSuggestion.cy.js
+++ b/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')
diff --git a/src/index.html b/src/index.html
index 9e2ad36..dca53db 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,6 @@
-
diff --git a/src/script.js b/src/script.js
index 365c52e..2e011d2 100644
--- a/src/script.js
+++ b/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)
diff --git a/src/style.css b/src/style.css
index cef81dd..6ac0fc3 100644
--- a/src/style.css
+++ b/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;
- }
-}
+}
\ No newline at end of file