The elements on the main page will all function the same way, so I have to test and fine tune a single element before I begin adding everything.
The functionality should be as follows: Images load on main page > you can click and drag images anywhere on web page > clicking on an image will take you to the page its directed to.
Secondary pages > call data from API > information is displayed on secondary pages for 24 hours.
Thanks to Interact.js I've been able to incorporate a dragging feature, however i need to make a few tweaks to the code so that user's are not redirected to the secondary pages when they stop dragging an image.
The API (Ninja API) I've selected works pretty well so far, I've added some extra code so that instead of just calling an API every single time the page loads, each call has a 24 hour time limit.
Some calls from API's are generalised, so for example if you search "Snake" an entire array of snakes from A-Z will load, this was proving difficult at first until I was able to wrap my head around it.
Since I was already given an Array for searching something so simple, I added some extra lines of code to select a random number from the array every 24 hours, selecting a number selects species of snake.
This makes it easy for me start selecting what I'd like to display on the main page for now, by designating each js file with the same code with variations to the URL pulled and different queries I have quite a database to start off with.
Testing the dragging, and api calling functionality,
The dragging works so far needing only minor adjustments, the data pulled from the API also functions pretty well, I haven’t formattted it porperly yet since I'm still in the testing phase.
Once each and every aspect of the testing phase is "perfected" I'll be able to start adding a few more elements to the home page as well as spicing up the info pages.
testing sheet
