<button id="launch">Open Anki</button>
<script>
document.getElementById("launch").addEventListener("click", () => {
    fetch("http://127.0.0.1:5000/api/open-anki")
      .then(r => r.json())
      .then(data => alert(data.msg))
      .catch(err => alert("Error: " + err));
});
</script>

the way the code works is that:

• it finds the DOM element with id=”launch”
• i.e. if finds the button we created called launch
• and adds an EventListener
• when it is clicked the arrow function runs
• the address is for the flask server
• by default fetch sends a GET request
• r is the response object
• it expets property called msg which it uses to display an alert

the server address

• the server address contains a backend endpoint \ which is the @app.route in the python code

from flask import Flask, jsonify
import subprocess

app = Flask(__name__)

@app.route("/api/open-anki")
def open_anki():
    try:
        # Adjust the path if Anki is somewhere else
        subprocess.Popen(["anki"])  # or full path, e.g., "/usr/bin/anki"
        return jsonify({"msg": "Anki launched!"})
    except Exception as e:
        return jsonify({"msg": f"Failed to launch Anki: {e}"}), 500

if __name__ == "__main__":
    app.run()

HTTP methods

• GET - used to request data … says to the server give me something
• POST - says to the server - here is something - do something with it