Add recipes using JavaScript in table

Joined
Mar 27, 2023
Messages
19
Reaction score
1
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
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
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
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';
        }
    });
});
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
The recipe is automatically saved using localStorage, loaded again when the page is reloaded and placed in the correct place among the recipes.
This way each user can save his own recipes only for himself - what is the purpose of doing this?!
 
Joined
Mar 27, 2023
Messages
19
Reaction score
1
Hi,
Can you please help me. I had tried but no result.
I'm green, please me with this.
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
Here is your modified meny.js, use this code as a draft:

JavaScript:
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);
}

const rec = localStorage.mySavedRecipes || '';

if(rec){
    const rr = rec.split(';;')
    document.querySelector('.post:last-of-type').insertAdjacentHTML( 'afterend', rr.filter( n => n.length ).map( x => x.split('|') ).map( s => `
    <div class="post">
                        <h4>
                        ${s[0]}
                    </h4>
                        <div class="contentarea">
                            <p>
                                ${s[1]}
                            </p>
                        </div>
                    </div>
    ` ).join('') );
}

document.querySelector('.post:last-of-type').insertAdjacentHTML( 'afterend', `<button id="add_recipe">Add new recipe</button>
<button id="del_recipes">Delete saved recipes</button>
<div id="frm" style="display:none">
<p>Header: <input type="text" placeholder="Header for your recipe" /></p>
<p>Description: <textarea cols="30" rows="10"></textarea></p>
<p><button id="save_recipe">Save recipe</button></p>
</div>`);

document.querySelector('#add_recipe').addEventListener( 'click', function(){
    document.querySelector('#frm').style.display = document.querySelector('#frm').style.display == 'block' ? 'none' : 'block';
    });

document.querySelector('#del_recipes').addEventListener( 'click', function(){
    if( delete localStorage.mySavedRecipes ) location.reload()
    });

document.querySelector('#save_recipe').addEventListener( 'click', function(){
    const inp = document.querySelector('#frm input'),
          tarea = document.querySelector('#frm textarea');
    if(inp.value && tarea.value){
        localStorage.mySavedRecipes = rec + inp.value + '|' + tarea.value + ';;';
        location.reload();
        }
          
});

generateMenu();

const  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';
        }
    });
});
 
Joined
Mar 27, 2023
Messages
19
Reaction score
1
Can you help me to fix one thing?
When new recepies are added it must be placed in the right place.
Can the add recepie things placed on the top right hand?
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
When new recepies are added it must be placed in the right place.
Can the add recepie things placed on the top right hand?
Sorry, English is not my native language and sometimes it's hard to understand what exactly was ment. Can you explain where is the "right place"? And keep on mind that I have no bootstrap.min.css connected.
 
Joined
Mar 27, 2023
Messages
19
Reaction score
1
Sorry for making confusion. I just wonder if you can place the add new recepie and delete recepie package to the right side of the recepies. Let’s say above or under the search function.
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
JavaScript:
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();

const rec = localStorage.mySavedRecipes || '';

if(rec){
    const rr = rec.split(';;')
    document.querySelector('.post:last-of-type').insertAdjacentHTML( 'afterend', rr.filter( n => n.length ).map( x => x.split('|') ).map( s => `
    <div class="post">
                        <h4>
                        ${s[0]}
                    </h4>
                        <div class="contentarea">
                            <p>
                                ${s[1]}
                            </p>
                        </div>
                    </div>
    ` ).join('') );
}

document.querySelector('#input-recipes').closest('div').insertAdjacentHTML( 'afterbegin', `<div id="gear">
<button id="add_recipe">Add new recipe</button>
<button id="del_recipes">Delete saved recipes</button>
<div id="frm" style="display:none">
<p>Header: <input type="text" placeholder="Header for your recipe" /></p>
<p>Description: <textarea cols="30" rows="10"></textarea></p>
<p><button id="save_recipe">Save recipe</button></p>
</div>
</div>`);

document.querySelector('#add_recipe').addEventListener( 'click', function(){
    document.querySelector('#frm').style.display = document.querySelector('#frm').style.display == 'block' ? 'none' : 'block';
    });

document.querySelector('#del_recipes').addEventListener( 'click', function(){
    if( delete localStorage.mySavedRecipes ) location.reload()
    });

document.querySelector('#save_recipe').addEventListener( 'click', function(){
    const inp = document.querySelector('#frm input'),
          tarea = document.querySelector('#frm textarea');
    if(inp.value && tarea.value){
        localStorage.mySavedRecipes = rec + inp.value + '|' + tarea.value + ';;';
        location.reload();
        }
          
});

Object.assign( document.querySelector('#gear').style, {
    'maxWidth' : '350px',
    'textAlign' : 'right',
    'padding' : '5px',
    'float' : 'right'
});

const  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';
        }
    });
});
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
JavaScript:
function formatContent(txt){
    return txt.replaceAll('å', 'oo')
                 .replaceAll('Å', 'Oo')
                    .replaceAll('ä', 'ae')
                       .replaceAll('Ä', 'Ae')
                          .replaceAll('ö', 'oe')
                            .replaceAll('Ö', 'Oe')
                               .replaceAll(' ', '_')
                                  .replaceAll(',', '_');
}

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 = formatContent(txt);
           headln.id = id;
        const htmlLi = `<li><a href="#${id}">${txt}</a></li>`;
           htmlList += htmlLi;
    });
    htmlList += '</ul>';
    document.querySelector('#receptmeny .contentarea').insertAdjacentHTML('beforeend', htmlList);
}

generateMenu();

const rec = localStorage.mySavedRecipes || '';

if(rec){
    const rr = rec.split(';;')
    document.querySelector('.post:last-of-type').insertAdjacentHTML( 'afterend', rr.filter( n => n.length ).map( x => x.split('|') ).map( s => `
    <div class="post stored">
                        <h4 id="${formatContent(s[0])}">
                        ${s[0]}
                    </h4>
                        <div class="contentarea">
                            <p>
                                ${s[1]}
                            </p>
                        </div>
                    </div>
    ` ).join('') );
    document
       .querySelector('#recipe-list')
          .insertAdjacentHTML(
             'beforeend',
                [...document.querySelectorAll('.stored h4')]
                   .map( x => `<li><a href="#${x.id}">${x.textContent}</a></li>` )
                      .join(''));
}

document.querySelector('#input-recipes').closest('div').insertAdjacentHTML( 'afterbegin', `<div id="gear">
<button id="add_recipe">Add new recipe</button>
<button id="del_recipes">Delete saved recipes</button>
<div id="frm" style="display:none">
<p>Header: <input type="text" placeholder="Header for your recipe" /></p>
<p>Description: <textarea cols="30" rows="10"></textarea></p>
<p><button id="save_recipe">Save recipe</button></p>
</div>
</div>`);

document.querySelector('#add_recipe').addEventListener( 'click', function(){
    document.querySelector('#frm').style.display = document.querySelector('#frm').style.display == 'block' ? 'none' : 'block';
    });

document.querySelector('#del_recipes').addEventListener( 'click', function(){
    if( delete localStorage.mySavedRecipes ) location.reload()
    });

document.querySelector('#save_recipe').addEventListener( 'click', function(){
    const inp = document.querySelector('#frm input'),
          tarea = document.querySelector('#frm textarea');
    if(inp.value && tarea.value){
        localStorage.mySavedRecipes = rec + inp.value + '|' + tarea.value + ';;';
        location.reload();
        }
          
});

Object.assign( document.querySelector('#gear').style, {
    'maxWidth' : '350px',
    'textAlign' : 'right',
    'padding' : '5px',
    'float' : 'right'
});

const  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';
        }
    });
});
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,969
Messages
2,570,161
Members
46,708
Latest member
SherleneF1

Latest Threads

Top