Recipe App

100%

✓ Published0🌍 Public

Last edited Mar 1, 2023

Created on Feb 22, 2023

This example shows a recipe management system with a login form, password validation, recipe creation, and search functionality. The interface uses standard HTML, CSS, and JavaScript, with jQuery for UI interactions and Bootstrap for styling. The back end is built with Express, MySQL, and Sequelize for database operations, while password-rules enforces password complexity. The code includes a SQL schema for account storage, recipe, ingredient, allergen, and meal type models, and routes for authentication and recipe creation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a React-based authentication interface with login and signup forms, accompanied by a carousel component. The interface uses Material-UI components such as `TextField`, `Button`, and `Card` within a styled layout, with routing handled by `react-router-dom` and `Routes`. Forms capture user credentials and submit them via axios POST requests to specified endpoints. The visual design features gradient backgrounds, CSS styling, and FontAwesome icons, though no data visualization is present.

SShubham Pathak

64% match

Loading thumbnail…

Dinner App

Two interactive panels let a user select ingredients to filter a list of dinner recipes. Clicking an ingredient toggles it between required, excluded, and neutral; the recipe list updates instantly to show only meals matching those constraints. The interface uses D3 v5 with SVG rendering, building ingredient buttons and recipe rows as groups of text and rectangles. Filtering logic in `filterRecipes.js` compares ingredient arrays, while `renderIngrs.js` and `renderRecps.js` manage the visual updates. All recipe data comes from an embedded JSON array in `recipes.js`.

Mmartvdmarel

63% match

Loading thumbnail…

Untitled

This example presents a smart locker management interface, simulating a login and package pickup workflow. After authentication, users enter a six-digit code via a custom on-screen keyboard, and the submission triggers a request to a backend API. The React-based application uses Axios to handle HTTP POST requests for login and order pickup, while conditional rendering manages the display of the login page, the alphanumeric keypad, and a Material UI dialog for status alerts. An empty SVG canvas is included, though no visual data is rendered.

CCheng Tang

63% match

Loading thumbnail…

want to cook-website, not finished yet.

This example is an unfinished recipe-sharing website called “Want To Cook,” built with HTML, CSS, and vanilla JavaScript. It shows a homepage with a large hero image and a breakfast page listing two dishes, each with a photo, description, and a clickable heart-shaped “likes” button. The site uses CSS Flexbox for layout, inline SVG-free CSS shapes for the heart icon, and JavaScript event listeners to toggle login/signup forms and the liked state. Images are hotlinked from xiachufang.com, and the page includes a footer crediting that source.

KKacieW

61% match

Loading thumbnail…

JS For Beginners

A basic HTML form demonstrates food categorization with a dropdown menu of South Indian dishes and a quantity input, styled with a green theme and a submit button. The page loads d3.v4 from a CDN, but the JavaScript logic in `index.js` only adds an event listener that prevents form submission without rendering any visualization. The `food.csv` file contains static data with food names, categories, color tags, and age tags, though this data is not actively used by the current code. The example appears to be an incomplete starter project for future interactive data visualization work.

Kkavi-kumaran

60% match

Loading thumbnail…

Login & Registration Form

This example presents an interactive login and registration form built with HTML and CSS, featuring a toggle between two views. The interface uses a hidden checkbox (`#check`) to switch between the login and signup forms, with CSS transitions on the submit buttons for hover feedback. The design is styled with the Poppins font from Google Fonts, and the form inputs are purely presentational, with no backend or validation logic. The implementation relies on vanilla JavaScript only for the checkbox interaction, while the visual styling and layout are handled entirely through the included stylesheet.

SSriyaI

60% match

Loading thumbnail…

Express authentication using Redis for session store and Couchdb for database (in coffeescript!)

This example demonstrates user authentication and session management in a CoffeeScript-built Express application, showing how login, signup, and logout routes handle password hashing and session regeneration. The code uses Redis as the session store via `connect-redis` and CouchDB for user persistence through the `couchdb` client, with CSRF protection from `express-csrf` and password salting via `hash.sha1`. The visualization highlights the request flow across these middleware and database calls, including error handling for duplicate users and failed logins, while relying on the Fugue cluster for deployment.

AAnsonT

58% match

Loading thumbnail…

React App

This example displays a minimal React interface with a text input, a submit button, and a copyright footer. It uses React state via `useState` to manage an input value and an array of submitted items, updating the list on button click. The code imports danfojs (as `dfd`) and Material-UI components, including `Typography`, `Link`, and `Container`, though the layout renders a static `Box` with text and a Material-UI footer. The app mounts through `ReactDOM.render` in `index.js`, referencing bundled scripts from React, ReactDOM, danfojs, and Material-UI.

Kkennethkamhw

58% match