Ingredient Explorer – Global Ingredient List UI

A minimal, elegant frontend to explore cosmetic / skincare ingredients.
Type to search, get instant suggestions, and open a rich detail view powered by your own ingredient API.

---

✨ Features

• 🔍 Live search & suggestions – debounced queries to a backend API as you type
• 📚 Rich ingredient details – rating, categories, “at a glance” bullets, and long-form description
• 🧊 Modern glassmorphism UI – responsive layout with cards, modals, and soft animated background
• ℹ️ Data source modal – clearly explains where the data comes from and includes a disclaimer

---

🗂 Project Structure

This is a pure frontend project (no build step needed):

.
├── index.html      # Main UI markup
├── style.css       # Styling / layout
└── script.js       # Search logic, API calls, UI interactions

Note: You can rename index.html if you like, but most static hosts expect this name by default.

🚀 Getting Started (Local Use)

You can run this with any static file server.

Clone or download this repo.

Open index.html in your browser (double-click or drag into a tab).

This works for most cases, but some browsers are strict about file:// + fetch. If you see CORS / origin issues, use Option 2.

🔧 API Configuration

const fetchIngredients = async (query) => {
    BaseUrl = "https://kronextech.in/global/ingredients/search?q=";
    if (!query) return [];
    try {
        const response = await fetch(`${BaseUrl}${encodeURIComponent(query)}`);
        if (!response.ok) throw new Error('Network response was not ok');
        return await response.json();
    } catch (error) {
        console.error('Error fetching ingredients:', error);
        return [];
    }
};

Fallback behavior in the UI:

• If no results → shows a “No ingredients found” empty state
• If details is empty or missing → modal falls back to the short description
• If Glance is empty → the “At a Glance” section is hidden
• If desp_details is empty → only the short description is shown

🧠 UX & Keyboard Support

• Suggestions dropdown appears after typing 2+ characters
• Arrow keys (↑ / ↓) navigate suggestions
• Enter selects the highlighted suggestion or performs a search
• Clicking a card’s “Read More” opens the detail modal
• Clicking outside the modal or on × closes it
• Suggestions automatically close when you click outside the search area

🎨 Tech Stack

• HTML5 – semantic structure
• CSS3 – custom styling (no frameworks), glassmorphism, responsive grid
• Vanilla JavaScript – no dependencies, just DOM + fetch
• Google Fonts – Outfit
• No bundlers, no frameworks, no build step. Drop it on any static host and it works. 📌 Data Source & Disclaimer

The UI includes a “Data Source” button that opens a modal with:

“The ingredient data provided on this website is referenced from the European Commission's database…” If you are using a different data source or your own internal database:

• Update the text in index.html inside the #sourceModal
• Update the outbound link (https://ec.europa.eu) if needed

Important:

This project does not claim ownership of the ingredient data. It is intended for educational and convenience purposes. Always verify critical safety or regulatory information against official sources (e.g. European Commission, local authorities).

📄 License

You’re free to use, modify, and extend this UI in your own projects. If you add something cool (filters, dark/light mode toggle, multilingual support), consider opening a PR or sharing your fork!