Glows and highlights in the code

Search results sorting methods form

The sorting feature for the search results uses a function to update the form state, and uses params to navigate and update the information on the page. The options mirror what sorting and navigation methods were provided by the API, and uses text like "123→ABC" and "ZYX→321" to clearly indicate the sort direction.

// Sort method dropdown selection menu function
const handleSortMethodSelect = (event) => {
    sortMethod = event.target.value
    setSortMethodState({...sortMethod, [event.target.name]: event.target.value})
    navigate(`/breweries/${userQueryBy}=${userQuery}&sort=${sortMethod}:${sortDirection}&per_page=${perPage}&page=1`)
}

// ...

{/* Search controls */}
<h2>Search results:</h2>
<div className="sort-methods">
    <form>
        <label htmlFor="sort-method">Sort results by: </label>
        <select name="sort-method" id="sort-method" value={sortMethod} onChange={handleSortMethodSelect}>
            <option value="name">Brewery name</option>
            <option value="type">Brewery type</option>
            <option value="city">City</option>
            <option value="state">State</option>
            <option value="country">Country</option>
        </select>
    </form>
        <form>
            <label><input type="radio" name="sort-asc-desc" value="asc" checked={sortDirection === "asc"} onChange={handleSortDirectionClick} />123→ABC</label>
            <label><input type="radio" id="desc" name="sort-asc-desc" value="desc" checked={sortDirection === "desc"} onChange={handleSortDirectionClick} />ZYX→321</label>
        </form>
    <form>
        <label htmlFor="results-per-page">Results per page: </label>
        <select name="results-per-page" id="results-per-page" value={resultsPerPageState} onChange={handlePerPageSelect}>
            <option value={5}>5</option>
            <option value={10}>10</option>
            <option value={20}>20</option>
            <option value={50}>50</option>
        </select>
    </form>
</div>

Bubble animation

Created bubbles to provide an engaging character and visual appeal to the website. The animation is simple and clean, applied to six bubbles on different CSS animation timers, used to create asynchronous loops for a more realistic appearance.

.inner-bubbles {
    position: absolute;
    z-index: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cf8d2e;
    bottom:0;
    opacity:0;
}

/* ... */

.inner-bubble-6 {
    left: 80%;
    animation: inner-bubble-up 4.5s linear 3.9s forwards infinite;
}
@keyframes inner-bubble-up {
    0% {
        bottom: 0;
        opacity: 0.9;
    }
    100% {
        bottom: 110%;
        opacity: 0.0;
    }
}

jordbort / project-2-brewery-app

Glows and highlights in the code #47

Search results sorting methods form

Bubble animation