I am no designer, thats for sure, its ugly. However it does mostly work. Its grabbing the planet data via API randomly. Then parsing the image link using regex from the wookieepedia page and displaying that.
Also I do not write pretty code yet! I tried cleaning up the old code and managed to break it, ctrl+z to the rescue.
I have one suggestion for you. Instead of calling the swapi.co/api/planets API each time you want to get another planet, just call it one time with (https://swapi.co/api/planets/?format=json) to get an array of objects with each object containing a planet. Then, your solution would just randomly select an element from the downloaded array each time the New Planet button is clicked for new planets. This will speed up your app, because now the only API call will be to wikipedia for the image.
Okay really stupid question, but I am having a hard time finding an answer to this I understand. How do I store that data and then grab it when I need it later? everyone is saying global variables are bad, I can’t seem to get them to work anyway. I am missing some root understanding.
Inside the $(document).ready callback function, you put all of your other code, so any global variables would be contained to this function. You will need to declare a variable (i.e. planets), which will hold the array from the call to the API. You will need a function which only gets all the planets data (calling the API) and then inside the success function of the $.ajax call to this API, you would assign the result to planets.
Next, you will need a function which only randomly selects a planet object from the planets array which will be called in two places. The first time will be inside the success function described above after the planets array has been assigned the API response and then again when the Get New Planet button is clicked.