Python Compiler Web Application

HTML Structure

The HTML structure consists of a <head> section for meta information and styles, and a <body> section containing the main content of the application.

Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Python Compiler</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <style>
    body, button, input, textarea, h1, h2, h3, h4, h5, h6 {
      font-weight: bold;
    }
  </style>
</head>

Meta Tags: Define the character set and viewport settings for responsive design.
Title: Sets the title of the webpage.
CSS Links: Imports Tailwind CSS for styling.
Inline Styles: Applies bold font weight to specific elements for emphasis.

Body Section

<body class="bg-gray-200 p-4">
  <div class="max-w-lg mx-auto bg-white p-6 rounded-md shadow-md">
    <h1 class="text-2xl mb-4">Python Compiler</h1>
    <textarea id="inputCode" class="w-full h-32 p-2 border rounded-md" placeholder="Enter your Python code here..."></textarea>
    <button onclick="compilePython()" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">Compile</button>
    <div id="output" class="mt-4 p-2 border rounded-md"></div>
  </div>
</body>

Main Container: A centered, white background container with padding and rounded corners for the main content.
Heading: A prominent heading for the application.
Textarea: A text area for users to input their Python code.
Button: A button to trigger the compilation of the Python code.
Output Div: A container to display the output or error messages.

JavaScript Functionality

The functionality for running Python code is provided by Brython, a Python 3 implementation for client-side web programming.

Script Section

<script src="https://cdn.jsdelivr.net/gh/pythonpad/brython-runner/lib/brython-runner.bundle.js"></script>
<script>
  const runner = new BrythonRunner({
    stdout: {
      write(content) {
        document.getElementById('output').innerHTML += content + "<br>";
      },
      flush() {},
    },
    stderr: {
      write(content) {
        document.getElementById('output').innerHTML += '<span class="text-red-500">' + content + "</span><br>";
      },
      flush() {},
    },
    stdin: {
      async readline() {
        var userInput = prompt();
        return userInput;
      },
    }
  });

  function compilePython() {
    var code = document.getElementById('inputCode').value;
    document.getElementById('output').innerHTML = ''; // Clear previous output
    runner.runCode(code); // Run the Python code
  }
</script>

Brython Runner Initialization: Sets up BrythonRunner to handle standard output, error output, and input.
stdout.write: Appends normal output to the output div.
stderr.write: Appends error messages to the output div with red text.
stdin.readline: Prompts the user for input if needed.

Usage

To use this Python Compiler, visit the Python Compiler Web Application. This link will take you to the live application where you can enter your Python code, compile it, and see the output immediately.

Summary

This Python Compiler web application provides an interactive environment for executing Python code in the browser. It leverages Brython to interpret and run the Python code, while Tailwind CSS ensures a clean and responsive user interface. The application is user-friendly, with clear sections for input, compilation, and output, making it a handy tool for quick Python code testing and learning.