Simple Project HTML, JavaScript, CSS

Starting the journey into learning coding languages less than three weeks ago has been quite the experience. In those few short weeks the cohort has acquired enough knowledge to put together simple single page web applications.

This was our groups project. A single page web application that is a recipe book for drinks where you can look up drinks on a scroll bar or you can add your own drink recipe to the drink library.

We used a simple fetch request to grab data we made in the form of a .json file.

const fetchDrinks = () => {
    fetch("http://localhost:3000/drinks")
    .then(response =>response.json())
    .then(drinks => {
        displayFirstDrink(drinks[0])
        drinks.forEach(displayDrinks)
    })

This code block allowed us to call our data and use it in two different functions. These two functions render all of the initial database information on the page.

There were some challenging things for our team in this and we wanted to share those challenges:

The code that powers our website is written in JavaScript and makes use of the Document Object Model (DOM) to access and manipulate the elements on the page. We use the DOM to obtain references to the necessary elements, such as the images of the drinks and the form for adding new drinks.

 

.addEventListener

One of the key eventListeners in the code is handleClick, which is called whenever a user clicks on one of the drink images in the scroll bar at the bottom of the page.

function handleClick(drink){
    containerOne.innerHTML = ("")
    const drinkImg = document.createElement("img")
    drinkImg.src = drink.imageUrl
    drinkImg.alt = drink.name
    containerOne.appendChild(drinkImg)
    drinkName.innerText = drink.name
    drinkDirections.innerText = drink.instruction
    drinkIngredients.innerText = ("")
    drink.ingredient.forEach(displayIngredient)     
}

The Function below shows where the handleClick function was added.

function displayDrinks(x){
    const drinkImg = document.createElement("img")
    drinkImg.src = x.imageUrl
    drinkImg.alt = x.name 
    drinkImg.addEventListener("click", () => handleClick(x))
    ulList.appendChild(drinkImg)
    drinkImg.addEventListener('click', (e) => handleClick(x, e))
}

This function first clears the main container on the page, and then it creates and appends an img element representing the selected drink's image. It also updates the text of the h1 and h4 elements to display the drink's name and instructions, respectively. Additionally, the function calls the displayIngredient function for each of the drink's ingredients,

function displayIngredient(ingredient){
    const inLi = document.createElement("li")
        inLi.innerText = ingredient
        drinkIngredients.appendChild(inLi)
            if(inLi.innerText === ("")){
                drinkIngredients.removeChild(inLi)
            }
}

which creates and applies an li element for each ingredient to the ingredientsContainer element on the page.

handleSubmit is a function that is invoked when a user submits the form for adding a new drink. This function takes the values entered into the form and uses them to create a new object representing the drink. The new drink is then added to the page by calling the displayFirstDrink and displayDrinks functions, which create and append the necessary elements to the page.

 

Keeping empty markers off your HTML using JavaScript.

When using .forEach on an array each item on that array will be iterated. If you are iterating empty values (“”) over a ordered or unordered list you will be returned ::markers with nothing attached to them essentially posting an empty string, See example below:

function displayIngredient(ingredient){
     const li = document.createElement("li")
        li.innerText = ingredient
        drinkIngredients.apendChild(li)

You have 2 ::markers with content and 2 ::markers with no content. If you were iterating a .forEach over an array and wanted to not have empty markers on your page you can simply look at the data and if the data is equal to an empty string (“”) then .removeChild. Example below.

function displayIngredient(ingredient){
     const li = document.createElement("li")
        li.innerText = ingredient
        drinkIngredients.apendChild(li)
            if(li.innerText === ("")){
                drinkIngredients.removeChild(li)
            }
}

 

So let's write the code for partyMode function. We called it party mode it was just a simple click event that constantly changes the color of your background.

function partyMode() {
     document.body.classList.toggle("party-mode");
}

This function will call on another feature in CSS labeled '.party-mode'.

In the CSS file, the following was added.

.party-mode {
background-color: whitesmoke;
animation-name: partyMode;
animation: partyMode 3s;
animation-iteration-count: infinite;
}

This sets the initial background to whitesmoke when partyMode is invoked. it needs the animation name because It will use @keyframes for styling. The 3s means that it will cycle between all the colors in 3 seconds interval. You can make this longer or shorter depending on the style that you are trying to achieve. The animation-iteration-count is set to infinite, it will just keep running until another 'click' event.

@keyframes partyMode {
0% {background-color: red;}
20% {background-color: pink;}
40% {background-color: yellow;}
60% {background-color: blue;}
80% {background-color: purple;}
100% {background-color: green;}
}

In CSS the above was coded to cycle between colors. To ensure smooth transition between the colors choose colors that are closely related in the r,g,b,a values. You can change the % of the background color to achieve the desired style. Changing % will change how much time the color is being displayed in the background.

 

In Conclusion

This Project was challenging at times but with a little bit of research and the skills that our team learned in the last three weeks we were able to achieve a minimalistic working web application.
Is it Perfect? No, but as our skills grow as coding engineers and we dive into a community that has been nothing but welcoming and amazing we, each and everyone of us, develop our own unique coding identity. Together rising to new challenges forever being open to new ideas and learning new things, curiosity is the driving force so lets be curious together and make every next project better than our last.