Counter with Even/Odd Indicator - Inferno Typing CST Test

Loading…

Counter with Even/Odd Indicator — Inferno Code

Shows whether the current count is even or odd.

import { render, Component } from 'inferno';

class Counter extends Component {
	state = { count: 0, isDark: false };

	increment = () => this.setState({ count: this.state.count + 1 });
	decrement = () => this.setState({ count: this.state.count - 1 });
	reset = () => this.setState({ count: 0 });
	toggleTheme = () => this.setState({ isDark: !this.state.isDark });

	render() {
		return (
		<div className={this.state.isDark ? 'dark-theme' : 'light-theme'}>
		<h2>Counter: {this.state.count} ({this.state.count % 2 === 0 ? 'Even' : 'Odd'})</h2>
		<div>
		<button onClick={this.increment}>+</button>
		<button onClick={this.decrement}>-</button>
		<button onClick={this.reset}>Reset</button>
		</div>
		<button onClick={this.toggleTheme}>Toggle Theme</button>
		</div>
		);
	}
}

render(<Counter />, document.body);

Inferno Language Guide

Inferno.js is an extremely fast, lightweight JavaScript library for building high-performance user interfaces. It uses a React-like API and Virtual DOM but is optimized for speed, small size, and predictable rendering.

Primary Use Cases

▸High-performance SPAs
▸Real-time dashboards and charts
▸Embedded widgets with small footprint
▸React-compatible environments needing speed
▸Apps requiring extremely fast client-side rendering

Notable Features

▸Ultra-fast Virtual DOM (faster than React in many benchmarks)
▸React-like components and lifecycle
▸Small bundle size (~9 KB)
▸Server-side rendering support
▸Partial React API compatibility

Origin & Creator

Created by Dominic Gannaway in 2016 as a high-performance alternative to React, with an emphasis on speed and small bundle size.

Industrial Note

Inferno is primarily used in performance-sensitive environments like financial dashboards, advertising tech, streaming interfaces, and embedded web widgets.

More Inferno Typing Exercises

Inferno Simple Counter Inferno Counter with Step Inferno Counter with Min/Max Inferno Counter with Auto Increment Inferno Counter with Double Increment Inferno Counter with LocalStorage Inferno Counter with Color Themes

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

Counter with Even/Odd Indicator — Inferno Code

Shows whether the current count is even or odd.

import { render, Component } from 'inferno'; class Counter extends Component { state = { count: 0, isDark: false }; increment = () => this.setState({ count: this.state.count + 1 }); decrement = () => this.setState({ count: this.state.count - 1 }); reset = () => this.setState({ count: 0 }); toggleTheme = () => this.setState({ isDark: !this.state.isDark }); render() { return ( <div className={this.state.isDark ? 'dark-theme' : 'light-theme'}> <h2>Counter: {this.state.count} ({this.state.count % 2 === 0 ? 'Even' : 'Odd'})</h2> <div> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.reset}>Reset</button> </div> <button onClick={this.toggleTheme}>Toggle Theme</button> </div> ); } } render(<Counter />, document.body);

Inferno Language Guide

Primary Use Cases

▸High-performance SPAs
▸Real-time dashboards and charts
▸Embedded widgets with small footprint
▸React-compatible environments needing speed
▸Apps requiring extremely fast client-side rendering

Notable Features

▸Ultra-fast Virtual DOM (faster than React in many benchmarks)
▸React-like components and lifecycle
▸Small bundle size (~9 KB)
▸Server-side rendering support
▸Partial React API compatibility

Origin & Creator

Created by Dominic Gannaway in 2016 as a high-performance alternative to React, with an emphasis on speed and small bundle size.

Industrial Note

Inferno is primarily used in performance-sensitive environments like financial dashboards, advertising tech, streaming interfaces, and embedded web widgets.