Using the Vanilla JS Component template with LAMP

I use the Vanilla JS Component at https://github.com/guitarbeerchocolate/vanilla-js-component, and you have LAMP server on my box. However, when I want to call PHP scripts which are on the LAMP server such as, in a POST request using fetch or XHR within JavaScript I get the following errors in my browser:
Access to XMLHttpRequest at 'http://localhost/test/vanilla-js-POST-JSON/login.php' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

postjson_xhr.js:19 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost/test/vanilla-js-POST-JSON/login.php with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Obviously, it's treating the LAMP server like another domain.

The way to fix this is to put a line at the top of your PHP script thus:
header('Access-Control-Allow-Origin: *');
Happy coding.

Vagrant Virtual boxes (machines) on my old laptop

So, I've been playing around with Vagrant. It's been good, but I had a little pain early on because I have an old laptop. If you're a GNU/Linux user like me, you can get away with having an old laptop. I do most Vagrant things on the command-line, so the instructions below assume you're on GNU/Linux command and using the CLI.

How to install Vagrant

sudo apt update && sudo apt upgrade
sudo apt install virtualbox
sudo apt install vagrant -y

How to test the install has worked

vagrant --version

Create a sub-directory

I create a directory into which I will put all my boxes (virtual machines)
mkdir ~/vagrant
cd ~/vagrant

i686 example

Installing the box

As mentioned, I have an old laptop and therefore I can only run i686 boxes on it. You can find lots of boxes at https://app.vagrantup.com/boxes/search It was here that I searched for the term 'i686' and came up with the box 'herroffizier/centos-6.5-i686' which will be used in the example below. Still in the '~/vagrant' directory, create another sub-directory and change to it.
mkdir centos65i686
cd centos65i686
Now let's install the box.
vagrant init herroffizier/centos-6.5-i686
The installation takes place and a file called Vagrantfile is created. I like to make a few changes to this file for my own purposes. Here is my example Vagrant file below.
Vagrant.configure("2") do |config|
  config.vm.boot_timeout = 600
  config.vm.box = "herroffizier/centos-6.5-i686"
  config.vm.provider "virtualbox" do |vb|
    vb.gui = true
    vb.memory = "1024"
  end
end
I extended the timeout because I have an old laptop. I also load the GUI and give it a decent amount of memory.
Running the box
Now I'm ready to run my box. Still in the 'centos65i686' directory type the following.
vagrant up
A new window starts up and the box loads within it.
Once the loading process has completed you are presented with a login screen. Use the following credentials:
username : vagrant
password : vagrant
Now you should be in.

Tidying up

If you've finished with your box, you can close it down with the following command.
vagrant halt

Vanilla JavaScript Login form POST handler using XHR

I did a similar post to this called Vanilla JavaScript Login form POST handler using fetch. Fetch returns a JavaScript Promise, which can be a bit of a pain so I've also done a version using XHR, see below:

var postJSON = function(url, method, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send(data);
};

Here's how to call it:
const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  const url = this.getAttribute('action');
  const method = this.getAttribute('method');

  postJSON(url, method, new FormData(form), function(error, json) {
    if (error !== null) {
      console.log('parsing failed', error);
    } else {
      console.log('json.username', json.username);
      console.log('json.password', json.password);
    }
  });
});

Vanilla JS Bind

I have created a Vanilla JavaScript bind class. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/JS_Bind
It employs :

• HTML5
• ES6

Vanilla JS carousel

I have created a Vanilla JavaScript carousel. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-carousel
It employs :

• HTML5
• SASS
• BEM
• ES6

Vanilla JS component

I'm creating a number of elements using Vanilla JavaScript. They will use :

• HTML5
• SASS
• CSS grid
• BEM
• Media queries
• ES6

In order to put these elements together more efficiently, I have put together a small framework, from which I will fork.
It lies at https://github.com/guitarbeerchocolate/vanilla-js-component

Vanilla JavaScript Login form POST handler using fetch

I've been updating my gists lately because I'm now in position to leave jQuery behind. See https://gist.github.com/guitarbeerchocolate
So, here's how to pass login form data to some middleware and accept JSON in return using fetch.

const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  const url = this.getAttribute('action');
  const method = this.getAttribute('method');

  fetch(url, {
    method: method,
    body: new FormData(form)
  }).then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('json.username', json.username)
    console.log('json.password', json.password)
  }).catch(function(error) {
    console.log('parsing failed', error)
  })
});