Counter with History - Astro Typing CST Test

Loading…

Counter with History — Astro Code

A counter component in Astro that logs each action to a history array.

---
import HistoryCounter from '../components/HistoryCounter.jsx';
---
<html>
	<body>
		<h1>Astro Counter History</h1>
		<HistoryCounter />
	</body>
</html>

// components/HistoryCounter.jsx
import { useState } from 'react';
export default function HistoryCounter() {
	const [count, setCount] = useState(0);
	const [history, setHistory] = useState([]);
	const update = (action) => { setHistory([...history, action]); };
	return (
		<div>
		<h2>Counter: {count}</h2>
		<div>History: {history.join(', ')}</div>
		<button onClick={() => { setCount(count + 1); update('Increment'); }}>+</button>
		<button onClick={() => { setCount(count - 1); update('Decrement'); }}>-</button>
		<button onClick={() => { setCount(0); update('Reset'); }}>Reset</button>
		</div>
	);
}

Astro Language Guide

Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.

Primary Use Cases

▸Marketing and landing pages
▸Blogs and documentation sites
▸Static content-heavy websites
▸Hybrid static + server-rendered content
▸Sites using multiple UI frameworks together

Notable Features

▸Zero-JS by default
▸Island architecture
▸Partial hydration for interactive components
▸Markdown & MDX first-class support
▸Framework-agnostic component system

Origin & Creator

Created by Fred Schott and the Astro core team, originally launched in 2021 as an open-source initiative focused on performance-first web development.

Industrial Note

Astro excels in content-heavy sites like blogs, documentation, marketing pages, and any project prioritizing high performance and minimal client-side JavaScript.

More Astro Typing Exercises

Astro Counter Component Astro Counter with Max Limit Astro Counter with Double Step Astro Counter with Auto-Increment Astro Counter with Conditional Theme Astro Counter with Lambda Handlers Astro Counter with Custom Step Astro Counter with Dark Mode Toggle Only Astro Counter with Combined Features

Practice Other Languages

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

Counter with History — Astro Code

A counter component in Astro that logs each action to a history array.

--- import HistoryCounter from '../components/HistoryCounter.jsx'; --- <html> <body> <h1>Astro Counter History</h1> <HistoryCounter /> </body> </html> // components/HistoryCounter.jsx import { useState } from 'react'; export default function HistoryCounter() { const [count, setCount] = useState(0); const [history, setHistory] = useState([]); const update = (action) => { setHistory([...history, action]); }; return ( <div> <h2>Counter: {count}</h2> <div>History: {history.join(', ')}</div> <button onClick={() => { setCount(count + 1); update('Increment'); }}>+</button> <button onClick={() => { setCount(count - 1); update('Decrement'); }}>-</button> <button onClick={() => { setCount(0); update('Reset'); }}>Reset</button> </div> ); }

Astro Language Guide

Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.

Primary Use Cases

▸Marketing and landing pages
▸Blogs and documentation sites
▸Static content-heavy websites
▸Hybrid static + server-rendered content
▸Sites using multiple UI frameworks together

Notable Features

▸Zero-JS by default
▸Island architecture
▸Partial hydration for interactive components
▸Markdown & MDX first-class support
▸Framework-agnostic component system

Origin & Creator

Created by Fred Schott and the Astro core team, originally launched in 2021 as an open-source initiative focused on performance-first web development.

Industrial Note

Astro excels in content-heavy sites like blogs, documentation, marketing pages, and any project prioritizing high performance and minimal client-side JavaScript.