Counter with Combined Features - Astro Typing CST Test
Loading…
Counter with Combined Features — Astro Code
A full-featured Astro counter: history, step, auto-increment, and theme toggle.
---
import FullCounter from '../components/FullCounter.jsx';
---
<html>
<body>
<h1>Astro Full Counter</h1>
<FullCounter step={2} autoIncrement={true} />
</body>
</html>
// components/FullCounter.jsx
import { useState, useEffect } from 'react';
export default function FullCounter({ step, autoIncrement }) {
const [count, setCount] = useState(0);
const [history, setHistory] = useState([]);
const [isDark, setIsDark] = useState(false);
const updateHistory = (action) => setHistory([...history, action]);
useEffect(() => { if(autoIncrement) { const i = setInterval(() => { setCount(c => { updateHistory('Auto increment'); return c + step; }); }, 1000); return () => clearInterval(i); } }, []);
return (
<div className={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count}</h2>
<div>History: {history.join(', ')}</div>
<button onClick={() => { setCount(count + step); updateHistory('Increment'); }}>+</button>
<button onClick={() => { setCount(count - step); updateHistory('Decrement'); }}>-</button>
<button onClick={() => { setCount(0); updateHistory('Reset'); }}>Reset</button>
<button onClick={() => setIsDark(!isDark)}>Toggle Theme</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.