diff --git a/public/js/scripts.js b/public/js/scripts.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f4954855f74cee3a6a58967b96dd28079674f740 100644
--- a/public/js/scripts.js
+++ b/public/js/scripts.js
@@ -0,0 +1,9 @@
+/* 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();
+ }
+}
diff --git a/template.php b/template.php
index 2b4a77e2fc30127afeac6a8fb7f7f9d97f2ea4da..d3f46878eaa53402e3dfdee57e28538956bde2ff 100644
--- a/template.php
+++ b/template.php
@@ -1,5 +1,5 @@
<!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>