Hi,
I want to add new recipes to the list, WITHOUT changing of the HTML-file and CSS-file.
Add your own recipes
The user must be able to add their own recipes to the list. You should therefore create a small interface with input of title and recipe text. When the recipe is saved, the recipe must be added to the list of recipes and to the recipe menu. The recipe is automatically saved using localStorage, loaded again when the page is reloaded and placed in the correct place among the recipes.
I have this. Se included files.
Any ideas how to do?
HTML-code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meny</title>
<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div class="container">
<div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<h1 class="display-4">Husmanskost</h1>
<p class="lead">Recept ur kokboken "Husmanskost â En hjĂ€lpreda för sparsamma husmödrar" frĂ„n 1896</p>
</div>
<div id="content" class="row">
<div id="primarycontainer" class="col">
<div id="primarycontent" class="p-3">
<div class="post">
<h4>
Potatis, att imkoka
</h4>
<div class="contentarea">
<p>
BÀst Àr att hÀrtill hafva en sÀrskild bleckkastrull, som Àr hÄlig i botten och passar att sÀtta öfver en kokande vattengryta. I denna kastrull lÀgger man rÄ, skalad potatis, hvilken dÄ blir kokt frÄn den andra grytans imma. Men i brist af denna inrÀttning, sÄ lÀgges potatisen i en jÀrngryta med mycket vatten, att halfkoka, dÄ vattnet afhÀlles, fint salt pÄströs; potatisen skakas i grytan tills den ser mjölig ut, hvarefter den, med lock pÄ, fÄr stÄ pÄ varma spiselhÀllen en bra stund innan den Àtes. Den bör upplockas varsamt med en sked, ty annars gÄr den sönder. (Innan den skakas Àr bra att Àfven strö fint socker öfver den.)
</p>
</div>
</div>
<div class="post">
<h4>
Potatisbullar
</h4>
<div class="contentarea">
<p>
Stor potatis halfkokas och skalas. DÄ den blifvit vÀl kall, rifves den, men aktas, att inga bitar komma med ibland det rifna. Till 12 decilit. (1 stop) rifven potatis tagas 3 hela Àgg, nÄgra skedblad grÀdde, ett skedblad socker, en tesked salt, litet muskot och 8 rifna bittermandlar; detta arbetas vÀl med hÀnderna, formas sedan i smÄ runda bullar, hvilka trillas i fint stötta skorpor och stekas gulbruna i flottyr. Serveras till rökt spickeskinka, kött eller stekt sill. Bullarna kunna vara utan Àgg, men dÄ uteslutes grÀdden.
</p>
</div>
</div>
<div class="post">
<h4>
Potatismos
</h4>
<div class="contentarea">
<p>
Kokt potatis skalas ocn stötes sÄ varm den Àr i en upphettad gjuten jÀrnpanna, men blott ett par potatis i sÀnder. DÄ sÄ mycket potatis Àr stött, som man önskar, ilÀgges en sked kallt smör och 2 à 3 skedar söt grÀdde, litet socker och muskotblomma efter smak; pannan sÀttes öfver elden att upphettas under flitig stötning ett par minuter, hvarefter moset brerdes pÄ en varm karott och Àtes med köttbullar eller spickemat.
</p>
</div>
</div>
<div class="post">
<h4>
Potatiskaka
</h4>
<div class="contentarea">
<p>
12 decilit. (1 stop) rifven potatis blandas med 3 skedblad fint stötta skorpor, tvĂ„ skedar socker, litet muskot, peppar, salt, 45 centilit. (1 halft kvarter) grĂ€dde och tre hela Ă€gg, samt lĂ€gges i en med smör smord form, klappas tĂ€tt ihop och insattes i en bra nog varm ugn att stĂ„ en halftimme, men öfvertĂ€ckes med en stekpanna, om den blir för mörk. Denna kaka kan uppstjĂ€lpas och Ă€tas varm, eller ock, sedan den blifvit vĂ€l kall, skĂ€ras i tjocka skifvor, som hvĂ€lfvas i hvetemjöl och stekas gulbruna i flottyr. Ătes med salt kött eller köttkorf.
</p>
</div>
</div>
<div class="post">
<h4>
Brynt potatis
</h4>
<div class="contentarea">
<p>
Nyss kokt potatis, antingen mycket smÄ, dÄ den stekes hel, eller ock stor, dÄ den skÀres i skifvor, brynes i smör och socker, om den skall vara rÀtt fin. Men i hvardagslag kan tagas flÀskflott samt ett skedblad brun sirap. Med en munkspade vÀndes potatisen ofta, att den ej brÀnnes eller gÄr sönder; dÄ den blifvit nÀra stekt, öfverströs ett skedblad fint stötta skorpor.
</p>
</div>
</div>
<div class="post">
<h4>
Brynt potatis pÄ annat sÀtt
</h4>
<div class="contentarea">
<p>
Man skalar rÄ potatis, skÀr den i skifvor och lÀgger den i en gjuten jÀrnpanna med ett stycke smör och tÀtt lock öfver, hvarefter den insattes i ugnen men ses ofta efter, att den ej brÀnnes. NÀr potatisen börjar se brun ut, pÄlÀgges en sked brun sirap; den insattes Äter i ugnen att bli mör, dÄ litet söt grÀdde sedan slÄs öfver och omskakas, hvarefter den Àtes till stekt flÀsk eller oxstek. SmÄ, kokt, skalad potatis doppas i Àgghvitskum och trillas i finstötta skorpor, blandade med socker och kanel, samt stekas gulbruna i smör.
</p>
</div>
</div>
<div class="post">
<h4>
Potatis, stufvad
</h4>
<div class="contentarea">
<p>
3 lit. (1 stop) söt mjölk uppkokas, i den lÀgges nyss kokad, skalad och i skifvor skuren potatis vid pass 1 lit. (1 stop), en sked smör, en tesked socker och litet salt, under bestÀndig omröring, att koka sakta, dock ej sÄ att potatisen gÄr sönder, utan man rör blott med en tunn stor trÀsked frÄn brÀdden och botten af grytan, att det ej lÀgger sig vid. NÀr sÄsen Àr simmig, aflyftes grytan och potatisen Àtes genast till rökt spickekött eller salt, kokt fÄr- eller oxkött.
</p>
</div>
</div>
<div class="post">
<h4>
Bruna bönor, att koka
</h4>
<div class="contentarea">
<p>
Till ett bord af Ätta personer tages 6 decilit. (1 kvarts kanna) bönor. I en jÀrngryta med lock hÀlles 1 lit. (3 kvarter) kallt vatten, ett skedblad kallt smör och bönorna, som förut böra vara rensade och sköljda. DÄ spadet inkokat, spÀdes genast med litet kallt vatten. SÄ fortsÀttes tills bönorna Àro mjuka, dÄ man pÄlÀgger en sked sirap samt, just dÄ de skola Àtas, salt och en matsked Àttika/eller sÄ mycket af hvarje, att det blir bruten smak. Dessa bönor böra komma tidigt pÄ elden, ty de Àro merendels hÄrdkokta.
</p>
</div>
</div>
<div class="post">
<h4>
Hvita prinsessbönor
</h4>
<div class="contentarea">
<p>
Bönorna lÀgges i kallt vatten och spÀdad Àfven med sÄdant, men behöfva vanligen ej mer Àn tvÄ timmar att koka. DÄ de börja mjukna, pÄlÀggas socker, grÀdde och muskotblomma samt, dÄ de fullkokat, en sked kalt smör, litet salt och mera grÀdde, att det blir lagom simmig sÄs. Serveras till fisk eller kött.
</p>
</div>
</div>
<div class="post">
<h4>
FÀrska turkiska bönor, att koka
</h4>
<div class="contentarea">
<p>
Man afplockar sÄdana bönor, som ej Àro för grofva; de skÀras i fina strimlor snedt öfver bönan, sköljas och lÀggas i kokande vatten. DÄ de skola redas, upphÀllas de i fat, en sked smör och mjöl frÀses i en kastrull, bönspadet vispas uti att koka, dÀrefter bönorna, en sked socker, litet salt Àfvensom finhackad persilja ilÀgges att uppkoka. Serveras till brÀckt skinka eller köttbullar.
</p>
</div>
</div>
<div class="post">
<h4>
FÀrska gröna arter, att koka
</h4>
<div class="contentarea">
<p>
DĂ„ Ă€rterna Ă€ro spritade, skrapas och skĂ€ras i tĂ€rningar morötter vid pass en fjĂ€rdedel mot Ă€rterna. Ărter och morötter sköljas och lĂ€ggas i kokande vatten med hackad persilja, en sked socker, en sked kallt smör och litet salt. DĂ„ de kĂ€nnas mjuka, upphĂ€llas de, en sked smör och mjöl frĂ€ses i kastrullen och pĂ„spĂ€des med en slef Ă€rtspad i sĂ€nder, att det ej klimpar sig, Ă€rterna ilĂ€ggas dĂ„ med litet rifvet maskot, att en stund koka, hvarefter de Ă€ro fĂ€rdiga att servera.
</p>
</div>
</div>
<div class="post">
<h4>
Torkade gröna Àrter, att koka
</h4>
<div class="contentarea">
<p>
Dessa Ă€rter behöfva komma tidigt i kokning, den dag de skola Ă€tas. De lĂ€ggas i kokande vatten och spĂ€das Ă€fven med sĂ„dant. En bit smör, hackad fĂ€rsk eller torr persilja, litet rifvet muskot och socker pĂ„lĂ€gges. Ărterna koka lyckt, tills de Ă€ro vĂ€l mjuka, dĂ„ de upplĂ€ggas i ett fat. Smör och mjöl frĂ€ses i en kastrull och pĂ„spĂ€des med spadet smĂ„ningom, att det ej grynar sig, hvarefter Ă€fven Ă€rterna ilĂ€ggas att uppkoka. Om salt, socker och persilja göra för litet smak, tillsĂ€ttes mera dĂ€raf.
</p>
</div>
</div>
<div class="post">
<h4>
SlÀpÀrter
</h4>
<div class="contentarea">
<p>
En bra stor gryta sÀttes pÄ elden half med vatten, och dÄ detta kokar, ilÀggas 4 lit. (1 kappe), (ej för grofva) vÀl sköljda ÄkerÀrtkuddar och en knippa persilja. Lock pÄlÀgges, och de böra koka omkring 2 timmar. Inemot de Àro kokta, saltas bra nog. DÄ Àrterna upplÀggas pÄ sitt fat, strös litet socker emellan, hvarefter de serveras med skiradt smör.
</p>
</div>
</div>
<div class="post">
<h4>
Spenat, stufvad
</h4>
<div class="contentarea">
<p>
VÀl rensad och sköljd spenat förvÀlles i kokande vatten med salt, hvarefter den i durkslag bör afrinna och sedan hackas. Ett stycke smör och en god sked mjöl lÀgges i en kastrull; dÄ det frÀser ivispas sÄ mycket söt mjölk, att det blir lagom simmig sÄs; man vispar tills det kokar, dÄ spenaten blandas i sÄsen, Àfvensom ett skedblad socker, litet rifvet muskot och salt att det blir god smak. DÄ spenaten serveras, garneras den med hÄrdkokta Àgg, antingen hackade eller skurna i klyftor.
</p>
</div>
</div>
<div class="post">
<h4>
Spenatomelett
</h4>
<div class="contentarea">
<p>
Spenat stufvas som i föregÄende, men med mera mjöl, att den blir bra tjock, men ej grynig; den upphÀlles i en form att kallna och skirina sig. 1.5 centilit. (1 halft kvarter) grÀdde vispas med 2 teskedar socker i skum, dÄ 3 Àggulor iröras och blandningen hÀlles i formen, öfver spenaten och insÀttes i varm ugn att stanna sig och fÄ ljusbrun fÀrg, hvarefter den serveras till köttrÀtter.
</p>
</div>
</div>
<div class="post">
<h4>
Spenatomelett pÄ annat sÀtt
</h4>
<div class="contentarea">
<p>
Af 45 centilit. (1 och 1 halft kvarter) grÀdde, 3 decilit. (1 kvarter) mjölk, 3 hela Àgg, 8 centilit. (1 jumfru) skiradt smör med sitt salt och litet godt hvetemjöl bakas lösa, men bra tjocka pannkakor pÄ en upphettad lÀgg. DÄ de blifvit grÀddade pÄ ena sidan, lÀgges stufvad spenat i midten af pannkakan, hvilken sedan vikes ihop, sÄ att spenaten ej rinner ut; sÄ fortfares med alla pannkakorna, tills de blifvit slut; de lÀggas korsvis öfver hvarandra i en smord form, en smet af 3 decilit. (1 kvarter) söt grÀdde, vispad i skum, 4 Àggulor och 15 centilit. (1 halft kvarter) godt hvetemjöl hÀlles öfver; formen sÀttes i svag ugnsvÀrme och grÀddas. Det serveras till köttrÀtter.
</p>
</div>
</div>
<div class="post">
<h4>
En förrÀtt af grönsaker
</h4>
<div class="contentarea">
<p>
Fina spritade sockerÀrter, fina bondbönor, spÀda turkiska bönor, nÄgra morötter och dito jordÀrtskockor, hvilka senare skÀras sönder; af alla dessa saker tages 3 decilit. (1 kvarter) af hvarje, det skölj es vÀl och lÀgges i kokande vatten, tillika med en god hand hackad persilja, ett skedblad socker och litet salt. DÄ allt detta fullkokat, upphÀlles det i ett fat, och en sked smör och mjöl, mera persilja och litet muskot frÀses i en kastrull och spÀdes med spadet; nÀr det uppkokat, ilÀggas grönsakerna och omskakas, hÀlles dÀrefter pÄ sitt fat och garneras med smÄ hvetebrödsskifvor, stekta i flottyr och Àtes med stekt kött, fisk eller spickeskinka.
</p>
</div>
</div>
<div class="post">
<h4>
FÀrska gröna Àrter stufvade med Àgg och grÀdde
</h4>
<div class="contentarea">
<p>
Ărterna spritas, sköljas och till hvar 6 decilit. (halfstop) tages ett matskedblad kallt smör, hvaruti de först genomhettas och sedan spĂ€das med kokande vatten, men litet i sĂ€nder; nĂ„gra vĂ€l sköljda murklor, hackad persilja, ett skedblad socker, litet salt och muskot ilĂ€ggas, och Ă€rterna böra i kort spad, pĂ„ sakta eld, fullkoka. Till redningen tages 15 centilit. (1 halft kvarter) söt grĂ€dde och en half sked hvetemjöl, hvilket hĂ€lles öfver Ă€rterna, att fĂ„ ett uppkok, kastrullen aflyftes och tvĂ„ Ă€ggulor, vispade med en sked kallt vatten, iröras, dĂ„ Ă€rterna genast serveras med brĂ€ckt skinka eller stek.
</p>
</div>
</div>
<div class="post">
<h4>
Portlake, att stufva
</h4>
<div class="contentarea">
<p>
PÄ portlake bortrensas alla frön och Àfven de gröfsta stjÀlkarna; den Sköljes och förvÀlles i kokande vatten med litet salt och upplÀgges pÄ durkslag att afrinna. En sked smör och mjöl bör frÀsa i en kastrull och spÀdes smÄningom under flitig vispning med 6 decilit (1 halfstpp) söt mjölk, salt, en half sked socker och litet muskot; dÄ redningen kokar, ilÀgges portlaken och omskakas, tvÄ Àggulor vispas med ett skedblad grÀdde, hÀlles öfver, men bör ej koka; hvarefter portlaken Àr fÀrdig att servera. StjÀlkarna inlÀggas till sallad (se Àttiksgurkor).
</p>
</div>
</div>
<div class="post">
<h4>
Sparris, att koka
</h4>
<div class="contentarea">
<p>
Sparris skrapas och jÀmnas i den afskurna Àndan, Sköljes vÀl och bindes med hufvudena tillsammans i knippor, hvilka lÀggas i kokande vatten, och litet salt öfverströs; knipporna böra ej ligga för trÄngt, lock lÀgges öfver grytan och de böra koka, tills de kÀnnas mycket mjuka, dÄ de upplösas, lÀggas ordentligt pÄ ett varmt flÄtt porslinsfat, öfverströs med socker och serveras strax med skiradt smör till.
</p>
</div>
</div>
<div class="post">
<h4>
JordÀrtskockor, att stufva
</h4>
<div class="contentarea">
<p>
JordÀrtskockorna skalas och lÀggas i kallt vatten strax, ty annars svartna de; de tvÀttas mycket vÀl, förvÀllas i kokande vatten och litet salt, hvarefter de upptagas att afrinna, I en kastrull lÀgges en sked kallt smör och en sked hvetemjöl, dÄ det smÀlter, pÄspÀdes med söt mjölk; nÀr sÄsen kokar, ilÀggas jordÀrtskockorna samt litet socker och salt, att fÄ en uppkokning; hvarefter de Àro fÀrdiga. Den, som vill hafva denna rÀtt till finare mÄltid, bör taga 2 à 3 Àggulor och stött muskotblomma uti. Serveras till hvad kött man behagar, Àfven till stekt fisk.
</p>
</div>
</div>
<div class="post">
<h4>
BlomkÄl, stufvad
</h4>
<div class="contentarea">
<p>
Hufvudena klyfvas i fyra delar, afrensas alla gröna blad, sköljas mycket vÀl och förvÀllas i kokande vatten med litet salt, hvarefter de upptagas i durkslag att afrinna. En sked smör och mjöl frÀses i en kastrull samt pÄspÀdes med söt mjölk litet i sÀnder, att det ej grynar sig; dÄ sÄsen kokar, ilÀgges kÄlen och omskakas. Ett skedblad socker och tvÄ Àggulor vispas med ett skedblad grÀdde och hÀlles öfver, men bör ej koka, utan strax serveras.
</p>
</div>
</div>
<div class="post">
<h4>
Persilja, att steka
</h4>
<div class="contentarea">
<p>
Vackra persiljekvistar plockas och lÀggas att torka pÄ en handduk, ifall de Àro fuktiga. Smör skiras, saltet borthÀlles och det klara smöret fÄ Äter koka i pannan, dÄ man lÀgger persiljekvistar dÀri, men blott ett par i sÀnder; de fÄ ej koka lÀnge, ty dÄ förlora de sin fÀrg. De bredas pÄ papper, dÄ de tagas ur pannan, och garneras kring köttrÀtter, men serveras genast, ty fÄ de ligga lÀnge, sÄ vekna de.
</p>
</div>
</div>
<div class="post">
<h4>
Persilja, bakad
</h4>
<div class="contentarea">
<p>
Ett helt Àgg, 15 centilit. (1 halft kvarter) grÀddmjölk och ett struket skedblad hvetemjöl vispas tillsammans. Friska rena persiljekvistar doppas i smeten och lÀggas i kokande flottyr (skumfett) eller smör, att blifva ljusbruna, men upptagas dÄ genast. Garneras kring stufvad potatis, kokade abborrar och Àfven köttrÀtter.
</p>
</div>
</div>
<div class="post">
<h4>
Murklor, att garnera med
</h4>
<div class="contentarea">
<p>
Murklor lÀggas i varmt vatten och böra med lock öfver sakta eld koka, tills de se mycket svÀllda ut, dÄ de uppsilas och afrinna. I en panna skiras smör, sÄsom i föregÄende Àr sagdt, murklorna doppas i vispade Àgg, trillas i fint stötta skorpor, blandas med hvetemjöl och lÀggas i det kokande smöret, som bör stÄ öfver dem. DÄ de se gulbruna ut, upptagas de och garneras kring stufvad fisk samt stufning af höns och kalkon. Godt skumfett gÄr Àfven an att taga i stÀllet för smör. Murklor kunna begagnas i stufningar Àfven, om de blott kokas vÀl mjuka i vatten, men duga ej dÄ att garnera med.
</p>
</div>
</div>
<div class="post">
<h4>
VÀxtmÀrg
</h4>
<div class="contentarea">
<p>
Kokas och stufvas som blomkÄl,
</p>
</div>
</div>
<div class="post">
<h4>
Makaroner, att stufva
</h4>
<div class="contentarea">
<p>
Makaroner förvÀllas lÀtt i vatten, hÀllas i durkslag, smör frÀses i kastrullen, hvari god grÀddblandad mjölk och vatten slÄs, eller ock grÀdde och vatten. NÀr det kokar, gifves smak af socker, rifven (god, amper) ost samt nÄgot salt. Makaronerna ilÀggas att fullkoka, men ej sÄ att de gÄ sönder,
</p>
</div>
</div>
<div class="post">
<h4>
Rotmos
</h4>
<div class="contentarea">
<p>
Kofvorna sköljas och kokas oskalade i en gryta med lock, tills de blifva val mjuka. DÄ, de afsvalnat och man skalat dem, rifvas de eller stötas mycket fina. Smör och mjöl frÀses i en kastrull och pÄspÀdes med söt mjölk, tills det blir lagom tjockt, en half sked socker, litet salt och hvitpeppar, Àfvensom rofmoset/ilÀgges, att en liten stund koka, hvarefter det Àr fÀrdigt.
</p>
</div>
</div>
<div class="post">
<h4>
Rofvor, fyllda
</h4>
<div class="contentarea">
<p>
SmÄ runda rofvor kokas som i föregÄende (eller ock skalade, dÄ de kokas i mjölk). DÄ de Àro vÀl mjuka, upptagas de att svalna, skalas, om de kokat med skal, och urtages med en tesked sÄ mycket, att blott det yttre af rofvan Àr kvar. Det urtagna rofmoset stötes i en mortel, uppblandas med nÄgra skedblad grÀdde, 2 matskedar fint stötta skorpor, en sked socker, litet hackad persilja, salt, stött muskotblomma, ett par skedblad smÀlt smör, hvilket allt fylles in i rofvorna med en tesked, och hvarje rofva strykes rund öfver fyllningen. De stÀllas bredvid hvarandra i en stek- eller gjuten panna med ett stycke smör, pannan half med söt mjölk, hvarefter de insÀttas i en bak- eller spiselugn, att bli gulbruna. De upplÀggas pÄ flatt fat med kokad persilja (om man sÄ vill) att garnera fatet med, och Àtas med salt, kokt fÄrkött.
</p>
</div>
</div>
<div class="post">
<h4>
KÄlrötter, att koka
</h4>
<div class="contentarea">
<p>
Rötterna skalas, skÀras i klyftor, sköljas och lÀggas i kokande vatten med en bit flÀsk i och lock öfver grytan; dÄ de Àro mjuka, anvÀndas de att bryna samt Àfven till stufvadt rotmos.
</p>
</div>
</div>
<div class="post">
<h4>
KĂ„lrotmos
</h4>
<div class="contentarea">
<p>
Kokas som föregÄende, stötes vÀl sönder och stufvas som rof mos.
</p>
</div>
</div>
<div class="post">
<h4>
KÄlrötter, stufvade
</h4>
<div class="contentarea">
<p>
KÄlrötter skalas, skÀras i strimlor och lÀggas i kokande vatten med en flÀskbit, hvilket sÀtter smak pÄ dem. DÄ de blifvit vÀl mjuka, upptagas de, en sked smör och mjöl frÀses i kastrullen, rotspadet pÄspÀdes att koka, dÄ rötterna ilÀggas och skakas om, hvarefter de Àtas till kokt, salt strömming.
</p>
</div>
</div>
<div class="post">
<h4>
KÄlrötter, brynta
</h4>
<div class="contentarea">
<p>
Rötterna skalas, skÀras i klyftor och fÄ koka som i föregÄende, men mÄste kallna innan de lÀggas i en stekpanna med flÀskflott eller smör att brynas; ett skedblad sirap hÀlles öfver; inemot de skola Àtas, öfverströs de med att skedblad fint stötta skorpor. Serveras till stekt gÄs eller kokt salt kött.
</p>
</div>
</div>
<div class="post">
<h4>
Rotslamp
</h4>
<div class="contentarea">
<p>
KĂ„lrötter kokas som i föregĂ„ende Ă€r sagdt, men inemot dĂ€ Ă€ro fullkokta; ilĂ€ggĂ©s skalad och sköljd potatis, sĂ„ mycket att det ligger ett lĂ€tt hvarf dĂ€raf ofvanpĂ„ rötterna. DĂ„ bĂ„de potatis och rötter Ă€ro kokta, stötas de med en trĂ€klubba, sĂ„ att de vĂ€l blanda sig. Ătas till det flĂ€sk, som kokat i rötterna.
</p>
</div>
</div>
<div class="post">
<h4>
KĂ„lrabbi
</h4>
<div class="contentarea">
<p>
Skala och skÀr sönder kÄlrabbi i strimlor, koka och stufva den som blomkÄl, men Àggulorna kunna uteslutas.
</p>
</div>
</div>
<div class="post">
<h4>
HvitkÄlshufvud, stekt
</h4>
<div class="contentarea">
<p>
Ett stort hÄrdt kÄlhufvud afskÀres alla gröna, skadade blad och med en smal, uddhvass knif bortskÀres stocken. Hufvudet ombindes med segelgarn, hÄlet efter stocken fylles med en bit smör; litet peppar, rifvet muskot, salt, kÄlhufvudet samt en god sked sirap lÀgges tillika med en sked smör i en stekgryta, att pÄ sakta eld brynas. Det spÀdes sedan med buljong, om det finnes, annars kokt vatten, men blott litet i sÀnder; lock pÄlÀgges. DÄ hufvudet kÀnnes löst, nÀr man för en gaffel genom det, sÄ Àr det fÀrdigt att serveras med brÀckt skinka eller köttbullar. KÄlhufvudet kan Àfven fyllas med köttfÀrs, blott man dÄ gör urhÄlkningen större.
</p>
</div>
</div>
</div>
</div>
<div id="secondarycontent" class="col-lg-4 p-3 bg-light">
<div id="receptmeny">
<h4>Recept</h4>
<div class="contentarea">
</div>
</div>
</div>
</div>
</div>
<script src="scripts/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/meny.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS-code
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900');
h1, h2, h3, h4 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
h1 {
font-size: 5rem;
font-weight: 900;
}
ul {
padding: 0;
list-style: none;
}
a {
color: #bb5846;
}
a:hover {
color: tomato;
}
JS-code
function generateMenu() {
const headlines = document.querySelectorAll('#primarycontent .post h4');
let htmlList = `
<label for="input-recipes">Please enter a search string</label>
<input id="input-recipes">
<ul id="recipe-list">`;
headlines.forEach(headln => {
const
txt = headln.textContent.trim(),
id = txt
.replaceAll('Ă„', 'oo')
.replaceAll('Ă
', 'Oo')
.replaceAll('Ă€', 'ae')
.replaceAll('Ă', 'Ae')
.replaceAll('ö', 'oe')
.replaceAll('Ă', 'Oe')
.replaceAll(' ', '_')
.replaceAll(',', '_');
headln.id = id;
const htmlLi = `<li><a href="#${id}">${txt}</a></li>`;
htmlList += htmlLi;
});
htmlList += '</ul>';
document.querySelector('#receptmeny .contentarea').insertAdjacentHTML('beforeend', htmlList);
}
generateMenu();
listElems = document.querySelectorAll('#recipe-list li');
document.getElementById('input-recipes').addEventListener('input', event => {
console.log(event.target.value);
listElems.forEach(elem => {
if (elem.querySelector('a').textContent.includes(event.target.value)) {
elem.style.display = 'list-item';
} else {
elem.style.display = 'none';
}
});
});