Merge f627fee917 into 2d8642ec41

content/_index.md

@@ -6,10 +6,15 @@ layout: single
 
 ## What do you want to cook?
 
-<div class="search js-only">
-  <input type="text" id="search" placeholder="Search ALL Recipes...">
-  <button id="clear-search">
-    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
+<div class="search-container js-only">
+  <div class="search">
+    <input type="text" id="search" placeholder="Search ALL Recipes...">
+    <button id="clear-search">
+      <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
+    </button>
+  </div>
+  <button id="random">
+    Random
   </button>
 </div>
 
@@ -26,6 +31,13 @@ document.addEventListener("DOMContentLoaded", () => {
   const oldheading = document.getElementById("newest-recipes");
   const clearSearch = document.getElementById("clear-search");
   const artlist = document.getElementById("artlist");
+  const random = document.getElementById("random");
+
+  random.addEventListener("click", () => {
+    const recipe = recipes[Math.floor(Math.random() * recipes.length)];
+    const url = recipe.getElementsByTagName("a")[0].href
+    window.location.href = url;
+  })
 
   search.addEventListener("input", () => {
     // grab search input value

static/style.css

@@ -146,12 +146,19 @@ input#search {
   width: 100%;
 }
 
-.search {
+.search-container {
   width: 400px;
   max-width: 85vw;
   position: relative;
   margin: 0.5rem auto 1.2rem;
   display: flex;
+  gap: .5rem;
+}
+
+.search {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
 }
 
 button#clear-search {
@@ -169,6 +176,20 @@ button#clear-search:hover {
   color: #eee;
 }
 
+button#random {
+  all: unset;
+  background: #222;
+  color: #888;
+  border-radius: 5px;
+  padding: .7rem 1rem;
+  height: 100%;
+  cursor: pointer;
+  transition: color 180ms ease-in-out;
+}
+
+button#random:hover {
+  color: #eee;
+}
 
 .matched-recipe {
 	font-size: x-large ;