Improved feedback when no results were found

css/style.css

@@ -268,6 +268,7 @@ a {
 
 a:hover, h1 a {
   text-decoration: none;
+  cursor: pointer;
 }
 
 a.active {

faq.html

@@ -111,6 +111,6 @@
     </main>
   </div>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-faq.js?d=20230625"></script>
+  <script src="js/script-faq.js?d=20230628"></script>
 </body>
 </html>

guide.html

@@ -72,9 +72,9 @@
       </ul>
     </main>
   </div>
-  <script src="js/current-films.js?d=20230625"></script>
+  <script src="js/current-films.js?d=20230628"></script>
   <script src="js/guide.js"></script>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-guide.js?d=20230625"></script>
+  <script src="js/script-guide.js?d=20230628"></script>
 </body>
 </html>

index.html

@@ -82,12 +82,22 @@
             <div title="price range">{{formatPrice(film.price)}}</div>
           </aside>
         </li>
+        <li v-if="films.length === 0">
+          <img src="images/small/random.png" srcset="images/small/random.png 1x, images/random.png 2x" alt="Nothing found">
+          <h2>Nothing found :(</h2>
+          <p>
+            <span>None of the films match the seleted criteria.</span>
+            <span>Adjust the search term or filters to find any results.</span>
+          </p>
+          <aside>
+            <div><a v-on:click="reset">Clear all filters</a></div>
+          </aside>
+        </li>
       </ul>
-      <h2 v-if="films.length === 0">nothing here :(</h2>
     </main>
   </div>
-  <script src="js/current-films.js?d=20230625"></script>
+  <script src="js/current-films.js?d=20230628"></script>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-index.js?d=20230625"></script>
+  <script src="js/script-index.js?d=20230628"></script>
 </body>
 </html>

js/script-index.js

@@ -76,6 +76,11 @@ Vue.createApp({
     formatPrice: function(price) {
       return "€".repeat(price);
     },
+    reset: function() {
+      this.search = '';
+      this.type = 'all';
+      this.format = 'all';
+    },
     sort: function(button) {
       if(this.sortBy === button.target.innerText.toLowerCase()) {
         this.sortDir === 'asc' ? this.sortDir = 'desc' : this.sortDir = 'asc';

random.html

@@ -71,8 +71,8 @@
       </ul>
     </main>
   </div>
-  <script src="js/current-films.js?d=20230625"></script>
+  <script src="js/current-films.js?d=20230628"></script>
   <script src="js/vue.global.prod.js"></script>
-  <script src="js/script-random.js?d=20230625"></script>
+  <script src="js/script-random.js?d=20230628"></script>
 </body>
 </html>