JavaScript 2022

Term 3 Wednesday

May - July 2022

This site will be updated live during the sessions

Week 9 6 Exercise

		
001window.onload = function(){
		
002	showStuff('https://ghibliapi.herokuapp.com/films')
		
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	const theSelectElement = document.querySelector('select');
		
037	for (let i = 0; i < options.length; i++) 
		
038	{
		
039		const optionElement = document.createElement("option");
		
040		const optionText = document.createTextNode(options[i].title);
		
041		optionElement.appendChild(optionText);
		
042		theSelectElement.append(optionElement);
		
043	}
		
044	return theSelectElement;
		
045}
		
046	
		
047	
		
048function getDataFromSelection(options, theSelectElement)
		
049{
		
050	// find elements (by ID) in DOM and make them accessible in JS
		
051	// we could traverse the DOM from theSelectElement instead using .nextElementSibling
		
052	const titleP 		= document.querySelector('#title');
		
053	const descriptionP 	= document.querySelector('#description');
		
054	const directorP		= document.querySelector('#director');
		
055	const yearP			= document.querySelector('#year');
		
056	const bannerI		= document.querySelector('#banner');
		
057	
		
058	// on change event on select menu
		
059	theSelectElement.onchange = function()
		
060	{
		
061		// get the latest option selected
		
062		const theSectedOption = theSelectElement.options[theSelectElement.selectedIndex];
		
063		// get the value of the option, or innerText if no value explicitly set
		
064		const selectedValue = theSectedOption.value;
		
065		//get film index from option drop down. Use -1 as the 1st option has no film
		
066		const filmIndex = theSectedOption.index-1;
		
067		
		
068		if(filmIndex == -1)// if user reselects "choose a film" option - clear all
		
069		{
		
070			
		
071			titleP.innerHTML = "";
		
072			descriptionP.innerHTML = "";
		
073			directorP.innerHTML = "";
		
074			yearP.innerHTML = ""
		
075			bannerI.setAttribute('src', 'logo.svg');
		
076			// note: the below would be better set using a class
		
077			bannerI.setAttribute('width', '100%');
		
078		}
		
079		else // a film has been chosen so insert data from object at array element the matches filmIndex
		
080		{		
		
081			titleP.innerHTML = selectedValue;
		
082			descriptionP.innerHTML = options[filmIndex].description;
		
083			directorP.innerHTML = "Director: " + options[filmIndex].director;
		
084			yearP.innerHTML = "Release year: " + options[filmIndex].release_date
		
085			bannerI.setAttribute('src', options[filmIndex].movie_banner);
		
086			// note: the below would be better set using a class
		
087			bannerI.setAttribute('width', '70%');
		
088			bannerI.setAttribute('min-width', '300px');
		
089		}
		
090	}
		
091}
		
092
		
093// FUNCTIONS BELOW UNUSED
		
094
		
095function createDisplayDataFromNonNestedObject(obj)
		
096{
		
097	let html = '';
		
098	for(item in obj)
		
099	{
		
		
		
		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();
		
}