diff --git a/web/choose.html b/web/choose.html
new file mode 100644
index 0000000..fa4bd78
--- /dev/null
+++ b/web/choose.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/choose.js b/web/choose.js
new file mode 100644
index 0000000..9e5c238
--- /dev/null
+++ b/web/choose.js
@@ -0,0 +1,45 @@
+"use strict";
+
+// elements
+
+/** @type {HTMLButtonElement} */
+let loadAlbumsBtn
+
+/** @type {HTMLButtonElement} */
+let loadPhotosBtn
+
+/** @type {HTMLSelectElement} */
+let albumSelect
+
+function main() {
+ albumSelect = document.getElementById("album_selector")
+ loadAlbumsBtn = document.getElementById("load_albums_button")
+ loadPhotosBtn = document.getElementById("load_photos_button")
+ loadAlbumsBtn.onclick = () => loadAlbums()
+ loadPhotosBtn.onclick = () => loadPhotos()
+}
+
+function loadAlbums() {
+ (async () => {
+ const resp = await fetch("get-albums")
+ const albums = await resp.json()
+ albumSelect.replaceChildren() // This empties existing options
+ for(const album of albums) {
+ albumSelect.add(new Option(album.Title, album.UID))
+ }
+ })();
+}
+
+function loadPhotos() {
+ const selected = albumSelect.selectedOptions
+ if(selected.length != 1) {
+ return
+ }
+ const [elem] = selected
+ console.log(elem)
+ console.log(elem.text)
+ console.log(elem.value)
+}
+
+
+main()