Hello App

Code

├── api
│   └── v1
│       └── index.php
├── docker-compose.yml
└── public
    ├── index.html
    └── js
        └── main.js

docker-compose.yml:

version: "3"

services:
  web:
    container_name: web
    image: php:7.3-apache
    ports:
      - 8080:80
    volumes:
      - ./:/var/www/html/

Back-end side

Hello API

api
└── v1
    └── index.php

Front-end side

└── public
    ├── index.html
    └── js
        └── main.js

public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <form id="hello-form" method="POST">
      <input type="text" name="name" />
      <input type="submit" value="Olá..." />
    </form>
    <div id="hello"></div>
    <script src="js/main.js"></script>
  </body>
</html>

public/js/main.js:

const form = document.querySelector("#hello-form");
const helloField = document.querySelector("div#hello");

form.addEventListener("submit", helloWorld);

function helloWorld(event) {
  event.preventDefault();

  const name = helloField.value;
  const url = `/api/v1/?name=${name}`;
  const formData = new FormData(form);

  fetch(url, {
    method: "POST",
    body: formData
  })
    .then(function(res) {
      return res.text();
    })
    .then(function(responseText) {
      helloField.innerHTML = responseText;
    });
}