JavaScript 2022

		
001window.onload = function(){
		
002	showStuff('sudioghibli.json')
		
003}
		
004
		
005function showStuff(whereFrom) {
		
006    fetch(whereFrom)
		
007		.then(response => 
		
008		{
		
009            if (!response.ok) {
		
010                throw new Error("Failed with HTTP code " + response.status);
		
011            }
		
012            return response;
		
013        })
		
014        .then(result => result.json())
		
015        .then(data => 
		
016		{
		
017			/// WE HAVE GOT THE DATA AS AN ARRAY OF OBJECTS!!!
		
018			/// WHAT WE DO WITH THAT DATA HAPPENS HERE 
		
019			
		
020            // send array of objects to create the drop downs
		
021			// will return the select element to use later
		
022			const theElementSelect = generateOptions(data);
		
023			
		
024			// send array of objects data, plus select element to listen for change
		
025			// the function pushes the selected objects data to the DOM 
		
026			getDataFromSelection(data, theElementSelect);
		
027			
		
028			
		
029        });
		
030}
		
031
		
032
		
033
		
034function generateOptions(options)
		
035{
		
036	/*console.log(options.films.length)*/
		
037	const theSelectElement = document.querySelector('select');
		
038	for (let i = 0; i < options.films.length; i++) 
		
039	{
		
040		const optionElement = document.createElement("option");
		
041		const optionText = document.createTextNode(options.films[i].title);
		
042		optionElement.appendChild(optionText);
		
043		theSelectElement.append(optionElement);
		
044	}
		
045	return theSelectElement;
		
046}
		
047	
		
048	
		
049function getDataFromSelection(options, theSelectElement)
		
050{
		
051	// find elements (by ID) in DOM and make them accessible in JS
		
052	// we could traverse the DOM from theSelectElement instead using .nextElementSibling
		
053	const titleP 		= document.querySelector('#title');
		
054	const descriptionP 	= document.querySelector('#description');
		
055	const directorP		= document.querySelector('#director');
		
056	const yearP			= document.querySelector('#year');
		
057	const bannerI		= document.querySelector('#banner');
		
058	
		
059	// on change event on select menu
		
060	theSelectElement.onchange = function()
		
061	{
		
062		// get the latest option selected
		
063		const theSectedOption = theSelectElement.options[theSelectElement.selectedIndex];
		
064		// get the value of the option, or innerText if no value explicitly set
		
065		const selectedValue = theSectedOption.value;
		
066		//get film index from option drop down. Use -1 as the 1st option has no film
		
067		const filmIndex = theSectedOption.index-1;
		
068		
		
069		if(filmIndex == -1)// if user reselects "choose a film" option - clear all
		
070		{
		
071			
		
072			titleP.innerHTML = "";
		
073			descriptionP.innerHTML = "";
		
074			directorP.innerHTML = "";
		
075			yearP.innerHTML = ""
		
076			bannerI.setAttribute('src', 'logo.svg');
		
077			// note: the below would be better set using a class
		
078			bannerI.setAttribute('width', '100%');
		
079		}
		
080		else // a film has been chosen so insert data from object at array element the matches filmIndex
		
081		{		
		
082			titleP.innerHTML = selectedValue;
		
083			descriptionP.innerHTML = options.films[filmIndex].description;
		
084			directorP.innerHTML = "Director: " + options.films[filmIndex].director;
		
085			yearP.innerHTML = "Release year: " + options.films[filmIndex].release_date
		
086			bannerI.setAttribute('src', options.films[filmIndex].movie_banner);
		
087			// note: the below would be better set using a class
		
088			bannerI.setAttribute('width', '70%');
		
089			bannerI.setAttribute('min-width', '300px');
		
090		}
		
091	}
		
092}
		
093
		
094// FUNCTIONS BELOW UNUSED
		
095
		
096function createDisplayDataFromNonNestedObject(obj)
		
097{
		
098	let html = '';
		
099	for(item in obj)
		
	{
		
		
		
		html += `<p>${capitalise(item)}: ${capitalise(obj[item])}</p>`;
		
	}
		
	return html;
		
}
		

		
function insertIntoHTML(html, elem = document.querySelector('main'))
		
{	
		
		elem.insertAdjacentHTML('afterbegin', html);
		
}
		

		
function capitalise(str)
		
{
		
	return str[0].toUpperCase() + str.slice(1).toLowerCase();
		
}