Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Classwork Arrays</title>


</head>
<body>

  <script>

  /*
    Задание:
    1. При помощи методов изложеных ниже, переформатировать ITEA_COURSES в массив который содержит длину строк каждого из элементов.
    2. Самостоятельно изучить метод Array.sort. Отфильтровать массив ITEA_COURSES по алфавиту.
        + Бонусный бал. Вывести на страничку списком
    3. Реализация функции поиска по массиву ITEA_COURSES.
        + Бонусный бал. Вывести на страничку инпут и кнопку по которой будет срабатывать поиск.
  */

  const ITEA_COURSES = ["Курс HTML & CSS", "JavaScript базовый курс", "JavaScript продвинутый курс", "JavaScript Professional", "Angular 2.4 (базовый)", "Angular 2.4 (продвинутый)", "React.js", "React Native", "Node.js", "Vue.js"];
  let iteaElemLength = ITEA_COURSES.map(function(course) {
    return course.length;
  });
  console.log( iteaElemLength );

  let iteaElemSortByAlp = ITEA_COURSES.sort();
  document.body.innerHTML = `
  <div id='result2'>
    <ol>
      ${iteaElemSortByAlp.map( (item) => `<li>${ item }</li>` )}
    </ol>
  </div>
  <div id="result3">

  </div>
  <div id="resultMovies">

  </div>
  `;
  console.log( iteaElemSortByAlp );


  result3.innerHTML = `
  <input type="text" id="input"/>
    <button id="btn" type="button">FIND</button>
      <div id="course">

      </div>
  `;
  const INP = document.getElementById('input');

  btn.addEventListener('click', function() {
    ITEA_COURSES.forEach(function(elem) {
      if ( INP.value == elem ) {
        course.innerHTML = `
        <ul>
          <li>${ elem }</li>
        </ul>
        `;
      } else {
        console.log( 'This course not found' );
      };
    });
    INP.value = '';
  });

  /*
    Задание 2:
    Написать фильтр массива по:
    Актеру, продолжительности

    Бонус:
      Сделать графическую оболочку для программы:
      - Селект со списком актеров
      - Селект или инпут с продолжительностью
      - Результат в виде списка фильмов
  */

    var stars = ['Elijah Wood', 'Ian McKellen', 'Orlando Bloom','Ewan McGregor', 'Liam Neeson', 'Natalie Portman', 'Ewan McGregor', 'Billy Bob Thornton', 'Martin Freeman']
    var movies = [
        {
          name: "Lord of the Rigs",
          duration: 240,
          starring: [ 'Elijah Wood', 'Ian McKellen', 'Orlando Bloom']
        },
        {
          name: "Star Wars: Episode I - The Phantom Menace",
          duration: 136,
          starring: [ 'Ewan McGregor', 'Liam Neeson', 'Natalie Portman']
        },
        {
          name: "Fargo",
          duration: 100,
            starring: [ 'Ewan McGregor', 'Billy Bob Thornton', 'Martin Freeman']
        },
        {
        name: "V for Vendetta",
        duration: 150,
        starring: [ 'Hugo Weaving', 'Natalie Portman', 'Rupert Graves']
      }
      ];

    resultMovies.innerHTML = `
      <select name="Films" id="films" onchange="actorsInMovies()">

      </select>
      <div id="filmsContainer">
        <ul id="listOfActors"></ul>
      </div>
    `;

    stars.forEach(function(elem) {
      let option = new Option(elem);
      films.appendChild(option);
    });


    function actorsInMovies() {
      let selectedActor = films.value;
      listOfActors.innerHTML = null;

      movies.forEach(function(currentObj) {
        currentObj.starring.forEach(function(actor) {
          if (selectedActor == actor) {
            let li = document.createElement('li');
            listOfActors.appendChild(li);
            li.innerText = currentObj.name;
          };
        });
      });
    };

    function durationOfMovies() {

    };
  </script>
</body>
</html>