1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help me with JavaScript

Discussion in 'JavaScript' started by AshleyLiz, Apr 18, 2023.

  1. #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
    <!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>
                            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>
    HTML:
    CSS
    @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;
    }
    Code (CSS):
    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();
    
    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';
            }
        });
    });
    Code (JavaScript):
     
    AshleyLiz, Apr 18, 2023 IP
  2. dascos

    dascos Member

    Messages:
    11
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    33
    #2
    localStorage.setItem('YourLocalStorageVariableName', yourVariableToBeStored);

    yourVariableToBeStored = localStorage.getItem('YourLocalStorageVariableName');
     
    dascos, Apr 27, 2023 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Given the DIV soup, missing heading, and mental-midgetry of having stepped in bootcrap and tracked it all over the page's carpets?

    That alone would make me walk away from this one. IF you can't fix broken, bloated, poorly coded markup as part of the requirement, just run.
     
    deathshadow, May 10, 2023 IP