001window.onload = ()=>{
002 function getFilms(){
003 const topTenFilms = [
004 {
005 'title': 'The Shawshank Redemption',
006 'year' : 1994
007 },
008 {
009 'title': 'The Godfather',
010 'year' : 1972
011 },
012 {
013 'title': 'The Dark Knight',
014 'year' : 2008
015 },
016 {
017 'title': 'The Godfather Part II',
018 'year' : 1974
019 },
020 {
021 'title': '12 Angry Men',
022 'year' : 1957
023 },
024 {
025 'title': "Schindler's List",
026 'year' : 1993
027 },
028 {
029 'title': 'The Lord of the Rings: The Return of the King',
030 'year' : 2003
031 },
032 {
033 'title': 'Pulp Fiction',
034 'year' : 1994
035 },
036 {
037 'title': 'The Lord of the Rings: The Fellowship of the Ring',
038 'year' : 2001
039 },
040 {
041 'title': 'The Good, the Bad and the Ugly',
042 'year' : 1966
043 }
044 ];
045 return topTenFilms;
046 }
047 const options = getFilms();
048 const theSelectElement = document.querySelector('select');
049 for (let i = 0; i < options.length; i++)
050 {
051 const optionElement = document.createElement("option");
052 const optionText = document.createTextNode(options[i].title);
053 optionElement.appendChild(optionText);
054 theSelectElement.append(optionElement);
055 }
056
057 const headingThreeElement = document.createElement("h3");
058 theSelectElement.parentElement.appendChild(headingThreeElement);
059 theSelectElement.parentElement.lastElementChild.setAttribute('class','mt-5');
060
061 theSelectElement.onchange = function()
062 {
063 const selectedValue = theSelectElement.options[theSelectElement.selectedIndex].value;
064 theSelectElement.parentElement.lastElementChild.innerHTML = selectedValue;
065 }
066
067
068}
069
070