Interactive Examples

Welcome to my interactive code playground! Here you can explore and experiment with various code examples in real-time.

React Components

Live Clock Component

Try modifying the code below to see instant updates:

Live Editor

function Clock(props) {
  const [date, setDate] = React.useState(new Date());
  
  React.useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  
  return (
    <div style={{ 
      padding: '20px',
      borderRadius: '8px',
      background: 'var(--ifm-color-primary-lightest)',
      textAlign: 'center'
    }}>
      <h2>Current Time</h2>
      <p>{date.toLocaleTimeString()}</p>
    </div>
  );
}

Result

Loading...

Interactive Counter

Experiment with this counter component:

Live Editor

function Counter() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div style={{
      padding: '20px',
      borderRadius: '8px',
      background: 'var(--ifm-color-primary-lightest)',
      textAlign: 'center'
    }}>
      <h2>Counter: {count}</h2>
      <button 
        onClick={() => setCount(c => c + 1)}
        style={{
          background: 'var(--ifm-color-primary)',
          color: 'white',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '4px',
          cursor: 'pointer',
          marginRight: '10px'
        }}
      >
        Increment
      </button>
      <button 
        onClick={() => setCount(0)}
        style={{
          background: '#ff6b6b',
          color: 'white',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Reset
      </button>
    </div>
  );
}

Result

Loading...

Color Theme Switcher

Play with this theme switcher component:

Live Editor

function ThemeSwitcher() {
  const [bgColor, setBgColor] = React.useState('#40DFB5');
  
  return (
    <div style={{
      padding: '20px',
      borderRadius: '8px',
      background: bgColor,
      transition: 'background-color 0.3s',
      textAlign: 'center'
    }}>
      <h2 style={{ color: '#fff' }}>Theme Switcher</h2>
      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
        {['#40DFB5', '#FF6B6B', '#4ECDC4', '#45B7D1'].map(color => (
          <button
            key={color}
            onClick={() => setBgColor(color)}
            style={{
              width: '40px',
              height: '40px',
              borderRadius: '50%',
              border: bgColor === color ? '3px solid white' : 'none',
              background: color,
              cursor: 'pointer'
            }}
          />
        ))}
      </div>
    </div>
  );
}

Result

Loading...

How to Use

Each example above is a live code editor. You can:

1. Edit the code directly in the editor
2. See real-time updates as you type
3. Experiment with different values and properties
4. Learn by doing and seeing immediate results

Tips

• Click the "Reset" button in the editor to restore the original code
• Try changing colors, text, and styles to see how they affect the components
• Experiment with adding new features to the components
• Use the console in your browser's developer tools to debug