The Noble Foodie
Tags: codenewbie, beginners, css, javascript
Published: 2022-08-09 01:13:00

**Super stoked to proudly say, this is my very first website that i've created.** To build my website, _I used HTML, CSS, JAVASCRIPT and DB.JSON_. For this particular project, I've decided that I wanted to share my favorite recipes with everyone. I'm a big "foodie"! Foodie translates to " a person who not only eats from hunger but as a hobby". I know it might sound silly, but I enjoy tasting different cultural palettes. I have an extensive background in arts/creative. 

A little background story about myself;I've been a hairstylist for 6 years; prior to that I was a makeup artist and as a kid I grew up painting and involved in many dance classes, including ballet and latin. I've always felt driven into the creative side of everything. I was initially introduced to coding when I made a MySpace account ages ago. I enjoyed messing around with the layout; including hiding the visibility of my music and my top 10 friends (if you know, everyone fought **HARD** to be in your top friends list), adding slide shows of all my selfies of the week, customized what the page looked like, etc. It was SO much fun, and looking back, I learned how to do everything by myself. I literally googled how to do everything. I had people from all walks of life asking me if I had someone do it for me and that was my proud moment, I said it with my chest puffed "I DID IT!". 

After the MySpace era started to fizz out, along came facebook and there weren't many options to customize your page. It was just white and blue, a bar to update your status and the view of your friends and comments. Super boring right? Completely forgot about coding and years later here I am.


Okay! Now back to regular programing! You might ask yourself, why not make a blog about hair or makeup? Well, I thought it would be fun to share easy, fun recipes for a change; besides, food is an art form! 

Heres a snippet of what the website looks like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tipf3dtx0dg4y83o9x4p.png) 

I gave my website the tittle "The Noble Foodie". It shows three cards containing different recipes for each. I chose to have 3 interactive event listeners. To list the recipes, I will be using DOM content loaded, I will be getting my data from my own API using db.json.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u74kbegjgy1268bgk1ln.png)
and here is what it the json look like:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnvaseh8y46b74nhhg7y.png)
I will be using mouse enter to show the recipes when the user hovers over the specified card.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09kgfuf0y73g64l03n8y.png)


 
In addition, I incorporated mouse leave, so that when the user hovers off of the card, the recipe "hides".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnmkm4bp7x3lgk1pj11m.png)

A cool feature I also added is a "like" button. This is an event listener, so that when the user likes the recipe shown, they are able to like it; an alert box will appear and confirm that the like button was clicked.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p36w9x8hscvn6a30t66m.png)

Here are my top three recipes:
**Introducing the famous Lemon chicken**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh4pv2rndzv9y5ivw42i.jpeg)

Whisk eggs, garlic powder, Italian seasoning, salt and pepper, then dip your chicken. In a separate bowl, you will make a concoction of parmesan cheese and flour. You will then coat your freshly clean and cut chicken there after. Prepare your skillet with oil and let simmer. Add your chicken and cook for 5 minutes each side. After you cook the chicken, you will make your butter sauce. In the same skillet, add garlic, butter, lemon juice, chicken broth and Italian seasoning. Let it cook for about 2 minutes and coat your chicken with the sauce. Best served with a side dish (asparagus, baked potatoes or rice of your choice).

**Poached egg and avocado toast:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdd9b3kibt9jxxtiw3oh.jpeg)

Boil hot water in a pot, after crack the egg directly into the pot, poach for 5 minutes for a semi-soft yolk. While the eggs are cooking, you will toast your bread. then you will take an avocado, smash it, add salt, pepper, Parmesan cheese, and herbs of your choice. once the toast is ready, you will add that spread onto the slices of bread. Once the poached eggs are ready, you will add that on top of the spread. cut cherry tomatoes and add that on top of the eggs.

**Morrir sonando (translate to die dreaming in Spanish)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i6gkv0th5lq165f5gcp.jpeg)


In the mixture, you will add 4 cups of chilled evaporated milk, 3/4 cup of white sugar, 1 table spoon of vanilla extract and 2 1/2 cups of fresh orange juice. Best served with ice!

Alright ladies and gents! That's it for todays show!