https://unitapedia.univ-unita.eu/index.php?action=history&feed=atom&title=Widget%3ARecipeFilter Widget:RecipeFilter - Revision history 2026-04-12T22:32:30Z Revision history for this page on the wiki MediaWiki 1.39.12 https://unitapedia.univ-unita.eu/index.php?title=Widget:RecipeFilter&diff=4341&oldid=prev Horia Modran: Created page with "<div id="recipe-filter-ui" style="margin-bottom:1em;"> <input id="recipeSearch" type="text" placeholder="Search recipes…" style="width:25%; margin-right:0.5em;" /> <select id="levelFilter" style="margin-right:0.5em;"> <option value="">All Levels</option> <option>Easy</option><option>Medium</option><option>Hard</option> </select> <select id="costFilter"> <option value="">All Costs</option> <option>Low</option><option>Medium</opt..." 2025-05-15T13:31:18Z <p>Created page with &quot;&lt;div id=&quot;recipe-filter-ui&quot; style=&quot;margin-bottom:1em;&quot;&gt; &lt;input id=&quot;recipeSearch&quot; type=&quot;text&quot; placeholder=&quot;Search recipes…&quot; style=&quot;width:25%; margin-right:0.5em;&quot; /&gt; &lt;select id=&quot;levelFilter&quot; style=&quot;margin-right:0.5em;&quot;&gt; &lt;option value=&quot;&quot;&gt;All Levels&lt;/option&gt; &lt;option&gt;Easy&lt;/option&gt;&lt;option&gt;Medium&lt;/option&gt;&lt;option&gt;Hard&lt;/option&gt; &lt;/select&gt; &lt;select id=&quot;costFilter&quot;&gt; &lt;option value=&quot;&quot;&gt;All Costs&lt;/option&gt; &lt;option&gt;Low&lt;/option&gt;&lt;option&gt;Medium&lt;/opt...&quot;</p> <p><b>New page</b></p><div>&lt;div id=&quot;recipe-filter-ui&quot; style=&quot;margin-bottom:1em;&quot;&gt;<br /> &lt;input id=&quot;recipeSearch&quot; type=&quot;text&quot;<br /> placeholder=&quot;Search recipes…&quot;<br /> style=&quot;width:25%; margin-right:0.5em;&quot; /&gt;<br /> &lt;select id=&quot;levelFilter&quot; style=&quot;margin-right:0.5em;&quot;&gt;<br /> &lt;option value=&quot;&quot;&gt;All Levels&lt;/option&gt;<br /> &lt;option&gt;Easy&lt;/option&gt;&lt;option&gt;Medium&lt;/option&gt;&lt;option&gt;Hard&lt;/option&gt;<br /> &lt;/select&gt;<br /> &lt;select id=&quot;costFilter&quot;&gt;<br /> &lt;option value=&quot;&quot;&gt;All Costs&lt;/option&gt;<br /> &lt;option&gt;Low&lt;/option&gt;&lt;option&gt;Medium&lt;/option&gt;&lt;option&gt;High&lt;/option&gt;<br /> &lt;/select&gt;<br /> &lt;/div&gt;<br /> &lt;ul id=&quot;recipeList&quot;&gt;<br /> &lt;li data-level=&quot;Medium&quot; data-cost=&quot;Low&quot;&gt;<br /> &lt;a href=&quot;/wiki/IRIS_-_Internationalisation_through_Research_Activities&quot;&gt;<br /> IRIS – Internationalisation through Research Activities<br /> &lt;/a&gt;<br /> &lt;/li&gt;<br /> &lt;!-- Repeat one &lt;li&gt; per recipe, setting data-level/data-cost accordingly --&gt;<br /> &lt;/ul&gt;<br /> &lt;script&gt;<br /> (function(){<br /> function filter() {<br /> var q = document.getElementById(&#039;recipeSearch&#039;).value.toLowerCase(),<br /> lvl = document.getElementById(&#039;levelFilter&#039;).value,<br /> cost = document.getElementById(&#039;costFilter&#039;).value;<br /> document.querySelectorAll(&#039;#recipeList li&#039;).forEach(function(li){<br /> var text = li.textContent.toLowerCase(),<br /> okText = !q || text.includes(q),<br /> okLvl = !lvl || li.getAttribute(&#039;data-level&#039;) === lvl,<br /> okCost = !cost|| li.getAttribute(&#039;data-cost&#039;) === cost;<br /> li.style.display = (okText &amp;&amp; okLvl &amp;&amp; okCost) ? &#039;&#039; : &#039;none&#039;;<br /> });<br /> }<br /> [&#039;input&#039;,&#039;change&#039;].forEach(function(evt){<br /> document.getElementById(&#039;recipeSearch&#039;).addEventListener(evt, filter);<br /> document.getElementById(&#039;levelFilter&#039;).addEventListener(evt, filter);<br /> document.getElementById(&#039;costFilter&#039; ).addEventListener(evt, filter);<br /> });<br /> })();<br /> &lt;/script&gt;</div> Horia Modran