🌐 Multi-Language HTML Showcase

🎨 SVG Example

Hover to change color; click to toggle size:

🧠 JavaScript Example

Click "Say Hello" to increase the click counter; use "Reset Counter" to reset:

⚙️ WebAssembly (Simulated)

Click the button to compute factorial of a random integer (1-10):

🐘 PHP (Server-side only)

Example PHP code with a simple function and condition:

<?php
  function showGreeting($name) {
    return "Hello, $name from PHP!";
  }

  $user = "Guest";
  if(isset($user)) {
    echo "<p>" . showGreeting($user) . "</p>";
  }
?>

🐍 PyScript Example

Enter a number to compute its Fibonacci value in Python (PyScript):

def fib(n): if n < 2: return n return fib(n-1) + fib(n-2) print("Ready to compute Fibonacci!")

🔤 JSON Data Example

Enhanced JSON data with nested structure. Open your browser console to see how JavaScript reads it:

{
  "name": "Web Showcase",
  "version": "1.1",
  "languages": {
    "frontend": ["HTML", "CSS", "JavaScript", "SVG"],
    "backend": ["PHP", "PyScript", "SQL", "Shell"]
  }
}

🛠 TypeScript Example (Simulated)

A snippet that demonstrates looping through an array of names:

// TypeScript Example
interface Greeting {
  message: string;
}

const greet = (name: string): Greeting => {
  return { message: `Hello, ${name}!` };
}

const names = ["Alice", "Bob", "TypeScript"];
names.forEach(name => console.log(greet(name).message));

📝 XML Example

A slightly enhanced XML snippet including a date element:

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>User</to>
  <from>Web Showcase</from>
  <heading>Reminder</heading>
  <body>Learn more web languages!</body>
  <date>2025-03-26</date>
</note>

🔮 Web Component Example

Interactive custom element that can display a custom greeting via its title attribute:

📊 GraphQL Example

Enhanced GraphQL query with a limit on posts:

{
  user(id: "1") {
    name
    email
    posts(limit: 3) {
      title
      content
    }
  }
}

💾 SQL Example

SQL query with ordering:

SELECT name, email
FROM users
WHERE active = 1
ORDER BY name ASC;

🐚 Shell Script Example

Shell script that checks multiple arguments:

#!/bin/bash
echo "Hello from the shell!"
if [ $# -gt 0 ]; then
  echo "Arguments provided: $@"
else
  echo "No arguments provided."
fi