add search button and link it to function

[alexresiga]

#4

[NitinNair89]

Thanks! Can you setup a GitHub page pointing to your fork repo's master branch so that I can view the UI with your code changes?

[alexresiga]

https://alexresiga.github.io/TheHungryRecipes/index.html

[NitinNair89]

https://alexresiga.github.io/TheHungryRecipes/index.html

The interface is broken. Please make the below changes:

• "Search Recipe" should be the button text and position it below the "Random Recipe" button
• Add the chef hat icon to the search recipe button
• Do not change the grid column size, keep it as-is

[NitinNair89]

I checked the live site on the link you previously shared. The alignment seems a little off. Let's do it this way:

• Create a row inside the eight columns div similar to the structure made for the input field
• Keep the chef hat icon for the random recipe button

[alexresiga]

I checked the live site on the link you previously shared. The alignment seems a little off. Let's do it this way:

the alignment is a bit off because the buttons don't have a fixed width they expand with the text inside them

• Create a row inside the eight columns div similar to the structure made for the input field

i don't understand what you mean by this

• Keep the chef hat icon for the random recipe button

ok

[NitinNair89]

i don't understand what you mean by this

Currently, the h4 is floating and occupies full width of its container. We can create a row class div with the same structure as for input field

Current code:
<h4>Confused what to cook? <br/><small>Search a recipe or try a random recipe!</small></h4>

Suggestion:

<div class="row">
  <div class="eight columns">
    <h4>Confused what to cook? <br/><small>Search a recipe or try a random recipe!</small></h4>
  </div>
  <div class="four columns">
      Random Recipe button
  </div>
</div>

Can you give this a try and see if it solves alignment issues? 🙂

[NitinNair89]

Have you tested everything?

[alexresiga]

yes, you can see oh the gh pages link

[NitinNair89]

yes, you can see oh the gh pages link

Looks fine. There's a bug, I will open a separate issue and assign it to you. Is that fine?

[NitinNair89]

Closes #4

[alexresiga]

Looks fine. There's a bug, I will open a separate issue and assign it to you. Is that fine?

sure