Contoh Query

100%

✓ Published0🌍 Public

Last edited Mar 15, 2022

Created on Mar 14, 2022

This example demonstrates a database query interface for agricultural data, allowing users to select tables (Wilayah, Petani, Lahan), columns, and specific geographic locations like Kabupaten and Kecamatan. The page includes multiple form dropdowns to compose queries and buttons to submit or download results as Excel. A static image below the forms displays the expected query output table. The implementation uses plain HTML `<select>` elements, CSS for styling, and JavaScript is referenced in the README as the interactive component, though no script is embedded in the markup itself. The layout relies on simple form controls rather than a visualization library.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This example displays a list of cars retrieved from a database query, showing each vehicle's name and description. The React app renders a static "Hello React!" message, while the accompanying Java code defines a `Cars_dtset` class and uses an `Actual_Query` interface with a `@Select` annotation to fetch rows from the dataset, iterating through the results to print car attributes. The code demonstrates a basic React rendering setup combined with a database access pattern using a custom query interface.

JJamesHop31

58% match

Loading thumbnail…

Untitled

This interactive HTML table displays customer records with attributes like location, age, and various boolean flags. Users can filter rows through three separate text input fields and a search button, with the table dynamically hiding or showing rows based on matching criteria. The implementation uses plain JavaScript for the filtering logic, manipulating the CSS `display` property of table rows, while the table styling is handled through embedded CSS. The data presented is static sample data, and the filtering demonstrates basic DOM manipulation without external libraries or frameworks.

JJunepp

57% match

Loading thumbnail…

Select

This example demonstrates a simple interactive dropdown menu for selecting a pet type, where the current selection is logged to the console. The interface displays a large label and select element, with six pet options (e.g., Goldfish, Cat, Dog) defined as an array of objects. Built with React and ReactDOM, the component `Dropdown` maps over the options to render `<option>` elements, using `useState` to manage the selected value and an `onChange` handler to update it. The styling is applied via plain CSS in the HTML, with no D3 APIs used in this visualization.

DDaniel Zsido

56% match

Loading thumbnail…

Meny tutorial med Curran

This example shows a simple web interface for choosing a pet from a dropdown menu. The React application renders a labeled select element with options for dog, cat, hamster, parrot, spider, and goldfish. Using the `Dropdown` component, which wraps a native HTML `<select>` element, the app manages its selected value through the `useState` hook and logs each selection to the console. The code relies on the React and ReactDOM libraries to handle state and DOM rendering, while the styles in the HTML provide enlarged text and select controls for better visibility.

CChristian Magelssen

56% match

Loading thumbnail…

Menus

This example demonstrates a simple pet-selection form. A large label and dropdown menu let the user choose from a fixed list of five animals—dog, cat, hamster, parrot, and spider—with the hamster preselected. The application uses React (v16.9.0) with the `useState` hook to manage the selected value, and a custom `Dropdown` component renders the `<select>` element. The interface updates as the user chooses a new option, with the current selection highlighted in the dropdown.

WWaseem Medhat

55% match

Loading thumbnail…

React dropdown

This example demonstrates a pet selection interface using a React dropdown menu. It presents six animal options—dog, cat, hamster, parrot, spider, and goldfish—with the cat option preselected as the initial value. The visualization shows how React manages state through the `useState` hook, updating the displayed selection when the user chooses a different animal. The code uses React 17 and ReactDOM to render the component, while the dropdown itself is built with standard HTML `<select>` and `<option>` elements. The interaction pattern highlights state management in a React-based data visualization context.

KKolezhannochka

55% match

Loading thumbnail…

React Select

This example demonstrates a simple pet selector interface using React. It shows a labeled dropdown menu offering six animal options (dog, cat, hamster, parrot, spider, goldfish), with the hamster preselected. The React component `Dropdown` renders the native HTML `<select>` element, managing its state through `useState` and updating the selection via an `onSelectedValueChange` callback. The visualization uses ReactDOM for rendering and imports D3 v6 for potential data manipulation, though no D3-specific functions are directly applied here.

JJohn Huang

55% match

Loading thumbnail…

viz

This example demonstrates a pet-selection interface with a large, interactive dropdown menu. It shows how React manages state and updates the UI when a user chooses an option. The app uses the React `useState` hook to track the selected value and renders a custom `Dropdown` component, which builds a native `<select>` element. The code loads React and ReactDOM from a CDN, and the styling enlarges the dropdown to make the interaction visually prominent. Data consists of a hardcoded list of pet options, with the initial selection set to "hamster".

HHuldahMerlinKolli

55% match