Lab

Задание. Описать элемент div с примером использования.
Диаграмма классов для тэга div

С элементом div можно делать абсолютно разные вещи, например:

Jane Doe

Tag

Нажми на меня

Код:

 <div class="chip">
  <img src="http://materializecss.com/images/yuna.jpg" alt="Contact Person">
  Jane Doe
</div>
<div class="chip">
  Tag
  <i class="close material-icons">close</i>
</div>

Задание. Необходимо реализовать возможность чтения различных JSON и XML файлов при помощи JS. При этом файлы должны располагаться на сервере и подгружаться при помощи ajax запросов.

Мы имеет следующий JSON:
{
tasks:[
   {
   id:1,
   title:"Доделать лабораторную работу"
   },
   {
    id:2,
    title:"Купить молоко"
    },
]
}

Получить заголовок задания с id 2

Результат:

Код:

<div class="description col s6">
    <div class="card-panel teal lighten-2  ">
      <a href="javascript:;" class="waves-effect waves-light btn" onclick="getJsonTask(2)">Получить заголовок задания с id 2</a>
      <br>
      <br>
      <br>
      <div class="result_desc">Результат: <span class="result white-text"></span></div> 
    </div>
</div>
<script>
function getJsonTask(id){
  $.getJSON('tasks.json').then(function(response){
    tasks = response.tasks
    var res = tasks.find(function(i){
      return i.id = id
    })
    $(".result").html(res.title)
  });
}
</script>

Мы имеет следующий XML:
<tasks>
     <task id="1"> Доделать лабораторную работу</task>
     <task id="2"> Купить молоко</task>
     <task id="3"> Починить машину</task>
</tasks>

Получить заголовок задания с id 3

Результат:

Код:

<div class="description col s6">
 <div class="card-panel teal lighten-2  ">
    <a href="javascript:;" class="waves-effect waves-light btn" onclick="getXMLTask(3)">Получить заголовок задания с id 2</a>
    <br>
    <br>
    <br>
    <div class="result_desc">Результат: <span class="result-xml white-text"></span></div> 
  </div>
</div>

<script>
function getXMLTask(id){
$.ajax({
    type: "get", 
    url: "tasks.xml", 
    dataType: "xml", 
    success: function(data) {
      $('.result-xml').html($(data).find('#'+id).text());
    }
});
}
</script>

Задание: Реализовать SPA приложение, согласно следующим требованиям:

Создавать новые задачи в списки, причем должна быть возможность как добавлять в существующие, так и создавать новые задачи
Возможность взаимодействовать с элементами списка (если нажать на не перечеркнутую задачу, она должна перечеркнуться и наоборот)
Все данные которое создаются или изменяются в приложении должны храниться на сервере и подгружаться при необходимости
Реализация проекта должна осуществляться по принципу CRUD (Create Read Update Delete)
Реализация дизайна в стиле material design

Результат: Ссылка на SPA