🍳 RecipeJS - Functional Cooking Companion

A modern JavaScript recipe application built using functional programming concepts.
This project demonstrates dynamic DOM rendering, clean code practices, and responsive UI design.

---

🚀 Live Features (Part 1)

• ✅ Semantic HTML structure
• ✅ Modern CSS styling with flexbox
• ✅ Responsive recipe card layout
• ✅ Dynamic rendering using JavaScript
• ✅ Arrow functions & template literals
• ✅ Array map() method for transformation
• ✅ Clean UI with difficulty badges

---

🛠️ Tech Stack

• HTML5
• CSS3 (Flexbox, Gradients, Hover Effects)
• JavaScript (ES6+)
• Git & GitHub

---

📂 Project Structure

recipejs-functional-cooking/ │ ├── index.html ├── style.css └── app.js

---

🧠 Concepts Practiced

• DOM Selection (querySelector)
• DOM Manipulation (innerHTML)
• Arrow Functions
• Template Literals
• Higher Order Functions (map)
• Separation of Concerns (Data vs UI)
• Git Workflow (add, commit, push)

---

🎯 How It Works

1. Recipe data is stored as an array of objects.
2. createRecipeCard() converts each object into HTML.
3. renderRecipes() uses map() to generate all cards.
4. The cards are injected dynamically into the DOM.
5. CSS styles apply automatically based on class names.

---

🔮 Upcoming Features (Part 2-4)

• Filter by difficulty
• Sort by time or alphabetically
• Expandable recipe steps
• Search functionality
• Favorites system
• Functional programming enhancements

---

🧑‍💻 Author

Harish Domma
B.Tech - Artificial Intelligence & Data Science

---