Teta's KitchenRecipe Platform

A warm culinary heritage and recipe platform crafted with semantic HTML5, ~60KB handcrafted CSS, and ~22.5KB pure Vanilla JavaScript. Brings generational family cooking traditions to life with a bespoke design system (#800e13 Burgundy & #fffdf3 Cream), in-place profile editing via contenteditable, live search filtering, and strict client-side regex input masks.

Semantic HTML5 CSS3 (~60KB) Pure JavaScript (~22.5KB) Live Real-Time Search

Repository Access Private Repo

SCREENSHOTS

TIMELINE

2 Month

LEVEL

Intermediate

01. Overview 02. Engineering Highlights 03. Tech Matrix 04. Screenshots (7)

Engineering Highlights.

[01]

Handcrafted Design System & Warm Aesthetics

Bespoke visual identity built from scratch in a ~60KB style.css stylesheet with 120+ Flexbox layouts. Features a warm culinary color palette (--primary-color: #800e13 burgundy, --Bg-color: #fffdf3 cream, and --color1: #1f0802 roasted chocolate) paired with Google Fonts Poppins (100–900).

CSS Custom Properties / 120+ Flexbox Layouts

[02]

Inline In-Place Profile Editing Engine

Frictionless profile customization powered by Vanilla JS (toggleEdit()). Dynamically transforms static <h2> headings into editable text fields via native contenteditable="true", swaps action icons between edit and save, and handles custom calendar and dropdown pickers.

Vanilla JS / contenteditable & Enter Commit

[03]

Real-Time Live Search with Smart Outside Dismissal

Instant client-side recipe search listening to input events with toLowerCase() text matching. Populates a floating results dropdown in real time and implements smart outside-click dismissal via event.target.closest(".search-container").

Pure DOM Manipulation / Live Search

[04]

Strict Regex Validation & Input Masking

Multi-layered client-side input validation with instant character filtering. Features regex masks for alphabetic-only names (/[^a-zA-Z ]/g), digits-only phone numbers with +, auto-slashed birthdates (DD/MM/YYYY), and clipboard paste length interceptors.

Client Regex Masks / Input Event Interceptors

[05]

Dynamic Toast Notifications & CSS Error Shake

Interactive feedback system injecting dynamic .error-message elements into the DOM on invalid submissions. Triggers instant CSS .error-shake input vibrations and auto-cleans up with a 3-second .fade-out timer to prevent memory leaks.

DOM Injection / CSS Shake Animation

[06]

Step-by-Step Cooking Guides & Family Storytelling

Dedicated meal showcase pages featuring checklist-ready ingredient measurements, numbered preparation timelines formatted for kitchen reading, and editorial magazine layouts chronicling family traditions and holiday recipes.

Culinary UX / Editorial Layout