Add a "pick random artists" button

64e1f62e · Benoît Harrault · 57451541 · 64e1f62e · 64e1f62e
Commit 64e1f62e authored 3 years ago by Benoît Harrault
--- a/public/js/scripts.js
+++ b/public/js/scripts.js
+/* pick some random artists */
+function pickRandomArtists() {
+  var pickedArtistsCount = 6 + Math.floor(Math.random() * 6);
+  var artistElements = document.getElementsByClassName("checkbox-artist");
+  for (var i = 0; i < pickedArtistsCount; i++) {
+    var random = Math.floor(Math.random() * artistElements.length);
+    artistElements[random].click();
+  }
+}
--- a/template.php
+++ b/template.php
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
  <meta charset="utf-8">
@@ -9,7 +9,6 @@
  <link rel="icon" type="image/png" href="img/favicon.png"/>
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />
-  <script src="js/bootstrap.min.js"></script>
  <script src="js/scripts.js"></script>
 </head>
@@ -62,7 +61,7 @@
              <div class="custom-control custom-checkbox">
                <input
                  type="checkbox"
-                  class="custom-control-input"
+                  class="custom-control-input checkbox-artist"
                  id="check-top-artist-<?php echo $artist->id; ?>"
                  name="selected-artist[]"
                  value="<?php echo $artist->id; ?>"
@@ -92,7 +91,10 @@
            </label>
          </div>
          <div class="col-md-4 col-sm-12">
-            <button name="generate-playlist-top-artists" type="submit" class="btn btn-secondary float-end">🎶 Generate!</button>
+            <div class="btn-group float-end" role="group" aria-label="Action buttons">
+              <button name="pick-random-artist" type="button" class="btn btn-secondary" onclick="pickRandomArtists()">🎲 Pick random artists</button>
+              <button name="generate-playlist-top-artists" type="submit" class="btn btn-primary float-end">🎶 Generate!</button>
+            </div>
          </div>
        </div>
      </form>
@@ -145,6 +147,7 @@
  </div>
+  <script src="js/bootstrap.min.js"></script>
 </body>
 </html>