How do I style an array item the user put in using JS?

Admin 1
Viewed 86

I'll try to explain my problem as best as I can, but I might use the wrong terminology as I'm still fairly new to coding.

So I'm making a website that mimics a coffee shop for a personal project; the JS I wrote is able to search up coffees from an array and display them based on what the user inputs (the user goes into a form, they pick a roast setting and all the coffees under that roast pop up, they can just search it by name, etc). There's also an option for the user to make their own coffee, where they can type in their own name and add their roast. After that, it'll be added to the existing array and it'll pop up on the menu.

What I wanted to do was style the user-inputted coffee differently than the rest of the menu items so people can tell that this item is a new addition, like by putting an image next to it with a "new" icon for example, but I don't know how to target that user item specifically. I'd rather not take it out of the array, if possible.

Styling with JS and JS in general are not my strong suits, so if anybody could help me with this problem, that would be amazing. I'll try to include a minimal code example here (I don't know if this is enough to determine the issue):

    /* Displays Coffees on page  */

function renderCoffee(coffee) {

    var html = '<div class="col col-padding">';
    html += '<div class="noId">' + coffee.id + '</div>';
    html += '<p>' + coffee.name + '&nbsp;' + coffee.roast + '</p>';
    html += '</div>';

    return html;
}

/* Loops through the coffees array  */

function renderCoffees(coffees) {
    var html = '';
    for(var i = coffees.length - 1; i >= 0; i--) {
        html += renderCoffee(coffees[i]);
    }
    return html;
}

/* Updates Data */

function updateCoffees(e) {
    e.preventDefault(); // don't submit the form, we just want to update the data
    var selectedRoast = roastSelection.value;
    var filteredCoffees = [];
    coffees.forEach(function(coffee) {
        if (coffee.roast === selectedRoast) {
            filteredCoffees.push(coffee);
        }
    });
    tbody.innerHTML = renderCoffees(filteredCoffees);
} 

    /* Coffees Array  */
    
    // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
    var coffees = [
        {id: 1, name: 'Light City', roast: 'light'},
        {id: 2, name: 'Half City', roast: 'light'},
        {id: 3, name: 'Cinnamon', roast: 'light'},
        {id: 4, name: 'City', roast: 'medium'},
        {id: 5, name: 'American', roast: 'medium'},
        {id: 6, name: 'Breakfast', roast: 'medium'},
        {id: 7, name: 'High', roast: 'dark'},
        {id: 8, name: 'Continental', roast: 'dark'},
        {id: 9, name: 'New Orleans', roast: 'dark'},
        {id: 10, name: 'European', roast: 'dark'},
        {id: 11, name: 'Espresso', roast: 'dark'},
        {id: 12, name: 'Viennese', roast: 'dark'},
        {id: 13, name: 'Italian', roast: 'dark'},
        {id: 14, name: 'French', roast: 'dark'},
    ];

/* NEW COFFEE FUNCTION */

var search2 = document.getElementById('search-2');
var buildText = document.getElementById("submit");
var searchRoast2 = document.getElementById("roast-selection-2");
buildText.addEventListener('click', function (e) {
    e.preventDefault()
    var coffeeInput = search2.value
    var pickRoast2 = searchRoast2.value
    var newCoffee = {
        name:coffeeInput,
        roast:pickRoast2,
    }

    coffees.push(newCoffee)

    tbody.innerHTML = renderCoffees(coffees)

    console.log(coffees)
})

I'd appreciate any help/solutions I can get. :)

css arrays dom html javascript
1 Answers

One thing you could consider is adding a boolean property to the array of coffee objects and call it something like userOption. Set user inputted options to true and the default options to false, like so:

var coffees = [
    {id: 1, name: 'Light City', roast: 'light', userOption: false},
    {id: 2, name: 'Half City', roast: 'light', userOption: false},
    {id: 3, name: 'Cinnamon', roast: 'light', userOption: false},
    {id: 4, name: 'Blue Bottle', roast: 'medium', userOption: true},
    {id: 5, name: 'Pike Place', roast: 'dark', userOption: true},
]

Then, run a filter method on the object array to only return the options that are user-generated:

const userCoffees = coffees.filter(coffee => coffee.userOption)

const defaultCoffees = coffees.filter(coffee => !coffee.userOption)

If you use this method, you can render the user coffees with different styling rules than the default coffees.

user_143477170
Related