My rewrite of the Field example on the Elm website (http://elm-lang.org/examples/field)

100%

My rewrite of the Field example on the Elm website (http://elm-lang.org/examples/field)

✓ Published0🌍 Public

Last edited Jul 11, 2016

Created on Jul 11, 2016

This example demonstrates a minimal text-reversal interface: as a user types into a text input, the displayed text is immediately shown in reverse order. The view renders an HTML `<input>` element and a `<div>` containing the reversed string, while the update function replaces the model with each new input. Built with Elm’s `Html`, `Html.App.beginnerProgram`, and `Html.Events.onInput`, the code uses `String.reverse` to transform the user’s input. No external libraries or data sources are involved; the model is simply a `String` that updates in real time.

AI-generated description

Similar vizzes

Loading thumbnail…

Elm Counter Example

This example demonstrates a minimal interactive counter interface built with Elm. It displays a numeric value alongside two buttons, one for incrementing and one for decrementing the count. The implementation uses Elm’s `beginnerProgram` from `Html.App` to manage the application state, with `Html` and `Html.Events` for rendering and handling `onClick` events. The `update` function directly modifies the integer model based on `Increment` and `Decrement` messages. The code relies on Elm’s static typing and pure functions, with no external JavaScript libraries, illustrating Elm’s built-in reactive model and view loop.

CCliffordAnderson

60% match

Loading thumbnail…

Fibonacci Sequence in Elm

This example presents an interactive Fibonacci sequence calculator built in Elm, starting with a simple recursive function and progressing through increasingly feature-rich versions. The code demonstrates Elm’s model-update-view architecture using `beginnerProgram`, with buttons firing `Increment` and `Decrement` messages that adjust a numeric counter. A text display shows the current model value and the corresponding Fibonacci number computed via a naive recursive definition. The visualization uses no external graphics library, instead relying on core Elm `Html` elements like `h2`, `button`, and `p` to render the interface and results.

CCliffordAnderson

58% match

Loading thumbnail…

Elm HTTP Example w/ability to change input

This example demonstrates an Elm application that fetches and displays random GIFs from the Giphy API, with a text input allowing users to change the search topic. The interface shows a button to request another GIF and an image element that updates with each new result. The code uses Elm’s `Http` module with a `Json.Decode` pipeline to extract the `image_url` field from the API’s JSON response, and Bootstrap CDN styles via the `Bootstrap.CDN` and `Bootstrap.Grid` modules. The application’s architecture follows Elm’s standard Model-Update-View pattern, managing state through messages like `MorePlease` and `Change`.

CCliffordAnderson

58% match

Loading thumbnail…

Gist 9a5e7b204b7bb4e90cc3f9b7bf5b7dad

This example shows a recursive JavaScript function that reverses a string. The function `rec` takes a word, checks if its length is zero, and returns an empty string as the base case; otherwise, it appends the last character to the result of calling `rec` on the string with that last character removed. It demonstrates the reversal of the input "hello" to "olleh" through a simple recursion pattern. The code uses plain JavaScript with no external libraries or rendering APIs.

MMistyBlunch

56% match

Loading thumbnail…

Gist 3e6254d26d7dbeebc0b0f0c822baee60

This React example presents a minimal typing-race interface, displaying a header and a text input field. The application records the user’s keystrokes into the component’s state, updating the displayed text in real time. It uses React’s `React.Component`, the `event.target.value` property for input handling, and logs the current state to the console. The example demonstrates a basic two-way binding between a controlled input and the component’s state, showing the typed text as the user types.

115Dkatz

52% match

Loading thumbnail…

Gist 16f833f25c52e08f53e5255e4db05a2e

This example shows a real-time typing game where a user’s input is matched against a target text, displaying victory and elapsed time in milliseconds. The code uses React state and event handlers (`onChange`) to update the displayed text as the user types. It renders the current user input in an input field and shows a congratulatory message once the correct text is entered. The visualization relies on basic DOM updates rather than a charting library, focusing on interaction feedback through a simple JSX template.

115Dkatz

50% match

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 runtime environment’s hot reloading capability, where interactive widgets allow real-time property adjustments by holding Alt and dragging numbers in the editor. It renders a simple text element whose font size changes dynamically, showcasing the streamlined entry point of a `main` function exported from `index.js` that receives a container DIV and state management options. The code uses plain DOM manipulation without external libraries, highlighting the minimal setup required for immediate visual feedback.

Ff.centurion.cs12@nycu.edu.tw

49% match

Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This example demonstrates VizHub Version 3’s hot-reloading runtime using a minimal "Hello World" written in JavaScript. It shows how a single exported `main` function receives a container DIV and renders dynamic HTML content by setting a font size. The code uses a plain string template, not external libraries, with an interactive widget that allows adjusting the font size by Alt-dragging the number in the editor. The rendering approach is direct DOM manipulation via `innerHTML`.

Kkhadarmoha53@gmail.com

48% match