Извлекать и отображать данные из файла XML на основе ползунков диапазона

Question

Я работаю над веб-приложением, которое позволяет пользователю выбирать свое настроение с помощью ползунков диапазона.

Я хотел бы загрузить файл XML, и после завершения загрузки пользователи смогут сделать свой выбор.

Как я могу заставить свое приложение извлекать и отображать значения name и image из файла XML на основе выбора настроения пользователя. например если пользователь выбирает, что ему грустно, ему рекомендуют контент, который заставляет его чувствовать себя счастливым, поэтому, возможно, комедийный фильм.

Мой XML-файл:

<?xml version="1.0" encoding="UTF-8"?>
<programmeList>
<programme id="1">
<name>Alice in Wonderland</name>
<image>images/alice_in_wonderland.jpg</image>
<mood>Calm</mood>
</programme>
<programme id="2">
<name>Avatar</name>
<image>images/avatar.jpg</image>
<mood>Fearless</mood>
</programme>
<programme id="3">
<name>Bruce Almighty</name>
<image>images/bruceAlmighty.jpg</image>
<mood>Comedy</mood>
</programme>

</programmeList>

Пока мой код:

<div class="contrainer">

<h1>Movie Recommendations</h1>

<p>Please upload file: </p>
<form action="upload.php" method="post">
<div class="form-group">
<input type="file" class="filestyle" data-buttonText="Select a File">
</div>
</form>

<!-- Range slider-->
<div class="range-slider">
<label for="range_1">Agitated</label>
<input class="range-slider__range" type="range" min="0" max="100" id="range_1">
<label for="range_1">Calm</label>      
</div>

<!-- Sad = 0 , Happy = 100 -->
<div class="range-slider">
<label for="range_2">Sad</label>
<input class="range-slider__range" type="range" min="0" max="100" id="range_2">
<label for="range_2">Happy</label>

</div>

<!-- Tired = 0 , Wide Awake = 100 -->
<div class="range-slider">
<label for="range_3">Tired</label>
<input class="range-slider__range" type="range" min="0" max="100" id="range_3">
<label for="range_1">Wide Awake</label>

 </div>

 <!-- Scared = 0 , Fearless = 100 -->
 <div class="range-slider">
 <label for="range_4">Scared</label>
 <input class="range-slider__range" type="range" min="0" max="100" id="range_3">
 <label for="range_1">Fearless</label>

 </div>
 </div>

<!-- Put recommended content here from XML file -->
<table style="width:100%">
<tr>
</tr>
<tr>
<!-- Retrieve 'image' from XML file -->
<td><img src="">No content</img></td>
<td><img src="">No content</img></td> 
<td><img src="">No content</img></td>
<td><img src="">No content</img></td>
<td><img src="">No content</img></td>
</tr>
<!-- Retrieve movie 'name' -->
<tr>
<td>No content</td>
<td>No content</td> 
<td>No content</td>
<td>No content</td>
<td>No content</td>
</tr>
</table> 
<!-- end of table -->

</body>