Code Examples

Component showcase and examples

JavaScript Examples

Fibonacci Sequence

A function that generates the Fibonacci sequence:

function createFibonacciSequence(n) {
  const sequence = [0, 1];
  
  if (n <= 2) return sequence.slice(0, n);
  
  for (let i = 2; i < n; i++) {
    const nextNumber = sequence[i-1] + sequence[i-2];
    sequence.push(nextNumber);
  }
  
  return sequence;
}

// Generate first 10 Fibonacci numbers
const fibonacci = createFibonacciSequence(10);
console.log(fibonacci);

Factorial Calculation

A JavaScript function that calculates factorials:

function calculateFactorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  
  let factorial = 1;
  for (let i = 2; i <= n; i++) {
    factorial *= i;
  }
  
  return factorial;
}

// Calculate factorial of 5
const result = calculateFactorial(5);
console.log(`Factorial of 5 is ${result}`);

Python Examples

Prime Number Checker

A Python function to check if a number is prime:

def is_prime(num):
    """Check if a number is prime"""
    if num <= 1:
        return False
    if num <= 3:
        return True
    
    # Check if num is divisible by 2 or 3
    if num % 2 == 0 or num % 3 == 0:
        return False
    
    # Check through all numbers of form 6k+/-1 up to sqrt(num)
    i = 5
    while i * i <= num:
        if num % i == 0 or num % (i + 2) == 0:
            return False
        i += 6
        
    return True

# Test the function with some numbers
for n in range(1, 20):
    if is_prime(n):
        print("{} is prime".format(n))
    else:
        print("{} is not prime".format(n));

CSS Examples

Card Component

CSS styling for a card component with hover effects:

/* Card component with hover effects */
.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Highlight on hover */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Card title styling */
.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* Card content styling */
.card-content {
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
}

HTML Examples

Simple Portfolio

Basic HTML structure for a portfolio website:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <div class="container">
      <nav class="main-nav">
        <a href="#" class="logo">DevPortfolio</a>
        <ul class="nav-links">
          <li><a href="#projects">Projects</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero">
      <h1>Hello, I'm a Developer</h1>
      <p>Building amazing web experiences</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 DevPortfolio</p>
  </footer>
</body>
</html>

TypeScript Examples

User Management Class

TypeScript class for managing user data:

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
  metadata?: Record<string, unknown>;
}

class UserManager {
  private users: Map<number, User> = new Map();
  
  constructor(initialUsers: User[] = []) {
    initialUsers.forEach(user => {
      this.users.set(user.id, user);
    });
  }
  
  addUser(user: User): void {
    if (this.users.has(user.id)) {
      throw new Error(`User with ID ${user.id} already exists`);
    }
    
    this.users.set(user.id, user);
  }
  
  getUser(id: number): User | undefined {
    return this.users.get(id);
  }
  
  getAllUsers(): User[] {
    return Array.from(this.users.values());
  }
  
  getAdmins(): User[] {
    return this.getAllUsers().filter(user => user.isAdmin);
  }
}

// Example usage
const manager = new UserManager([
  { id: 1, name: 'Alice', email: 'alice@example.com', isAdmin: true },
  { id: 2, name: 'Bob', email: 'bob@example.com', isAdmin: false }
]);

console.log(manager.getAllUsers());

JSON Examples

Package.json

Example package.json file for an Astro project:

{
  "name": "code-block-demo",
  "version": "1.0.0",
  "description": "A showcase of code block components",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.0.0",
    "@astrojs/tailwind": "^5.0.0",
    "tailwindcss": "^3.3.3"
  },
  "author": "Developer",
  "license": "MIT"
}

Back to Dev Home