The theme for week #17 of the Weekly Coding Challenge is:

Pagination

A Pagination Component is used on websites where you have more content available than you want to display at one time to the user so you'd split it on multiple pages. By separating the content on different pages you are also saving a lot of bandwidth for the user because it won't be required to download all the information at once.

Some examples where you'd have a pagination: a blog with multiple pages, an online store with multiple products, etc.

In this article we're going to build this Pagination Component:

Note: the pagination is not functional, it's just for demo purposes (the visual). As an extra challenge, you can link this on a real website.

The HTML

For the HTML structure we're going to use an ul as a wrapper with multiple lis. Each li will have an a tag within it because it's clickable (and semantic) and it'll send the user to the required page (if needed).

We're also using FontAwesome for the icons (left, right and the dots icons).

<ul class="pagination">
    <li>
        <a href="#"><i class="fas fa-chevron-left"></i></a>
    </li>
    <li>
        <a href="#"><i class="fas fa-ellipsis-h"></i></a>
    </li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
        <a href="#"><i class="fas fa-ellipsis-h"></i></a>
    </li>
    <li>
        <a href="#"><i class="fas fa-chevron-right"></i></a>
    </li>
</ul>

As you can see I also added an .active class to one of the lis - this is just to highlight the page we are on.

The CSS

I'm going to paste the CSS and we'll discuss the important pieces afterwards.

.pagination {
    border: 2px solid #aaa;
    border-radius: 4px;
    display: flex;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
}

.pagination li {
    background-color: #fff;
}

.pagination li:hover,
.pagination li.active {
    background-color: #aaa;
}

.pagination li a {
    color: #555;
    display: block;
    font-weight: bold;
    padding: 10px 15px;
    text-decoration: none;
}

.pagination li:hover a,
.pagination li.active a {
    color: #fff;
}

Things to note:

1. The ul / .pagination it's a flex container - this is because it's much easier to position the lis within it by using flexbox (and who doesn't like flexbox? ?)
2. Because we have a little bit of a border-radius on the ul we need to add overflow: hidden because otherwise the li's corner will be visible on top of the border of the ul (remove the overflow and you'll see what I mean)
3. We have the same styling on li:hover as on li.active, but you can differentiate between these to states if you want

Other than that, I believe it's pretty straightforward, but if you have any questions please let me know. ?

Conclusion

There are other variants of paginations out there on the web. Find one you like and convert it to code.

Make sure you share with me what you've built!

Happy Coding! ?

Originally posted on www.florin-pop.com

The theme for week #15 of the Weekly Coding Challenge is:

Instant Search

We live in a fast world and we want everything to be FAST, including search results, this is why instant search functionality became pretty much a "must have" feature instead of a "nice to have" feature.

In this article we're going to build this feature, but only using Vanilla JavaScript :smiley:.

Below is the Live Preview of what we are going to build in this article. Let's search through the Countries of the world to see their Population and Flag:

Note: that you can use React, Vue, Angular or any other framework/library to create this functionality, although making it in Vanilla JavaScript is much more fun. ?

The HTML

We'll need 2 things in our HTML:

1. A search field
2. A results div where we'll display the search results

<input type="text" id="search" placeholder="Search for a Country" />
<div id="results"></div>

Usually we are going into the styling part next, but in this case considering that we don't yet have the entire markup (you'll see in a moment), we'll get to the JS part first. ?

The JavaScript

Let's make a plan before we actually type any code. The things that we need to do are:

1. Gather a list of all the countries in the world
2. Display the list of countries
3. Update the results based on the search query

Pretty awesome, eh? ?

Step one - getting the data

I found a nice API we can use to get the list of countries we need. It is: RestCountries.eu.

We're going to use the built in Fetch API in order to retrieve all the countries, and we're going to store them in a variable: countries.

let countries;

const fetchCountries = async () => {
    countries = await fetch(
        'https://restcountries.eu/rest/v2/all?fields=name;population;flag'
    ).then(res => res.json());
};

As you can see, we created an async function; You can read more about this here.

Also, note that we only want 3 fields from the API (name, population and flag) so this is what we're going to get from the API by setting the fields query parameter.

Step two - displaying the data

Now, we need to create the structure of our list in order to display the data and for that we're going to create all the elements that we need (ul, li, headings, etc) inside of a function and we'll insert them into the results div we declared in our HTML.

We're also going to call our fetchCountries function here because we want to loop over the countries in order to create the corresponding elements:

const results = document.getElementById('results');

const showCountries = async () => {
    // getting the data
    await fetchCountries();

    const ul = document.createElement('ul');
    ul.classList.add('countries');

    countries.forEach(country => {
        // creating the structure
        const li = document.createElement('li');
        li.classList.add('country-item');

        const country_flag = document.createElement('img');
        // Setting the image source
        country_flag.src = country.flag;
        country_flag.classList.add('country-flag');

        const country_name = document.createElement('h3');
        country_name.innerText = country.name;
        country_name.classList.add('country-name');

        const country_info = document.createElement('div');
        country_info.classList.add('country-info');

        const country_population = document.createElement('h2');
        country_population.innerText = numberWithCommas(country.population);
        country_population.classList.add('country-population');

        const country_popupation_text = document.createElement('h5');
        country_popupation_text.innerText = 'Population';
        country_popupation_text.classList.add('country-population-text');

        country_info.appendChild(country_population);
        country_info.appendChild(country_popupation_text);

        li.appendChild(country_flag);
        li.appendChild(country_name);
        li.appendChild(country_info);

        ul.appendChild(li);
    });

    results.appendChild(ul);
};

// display initial countries
showCountries();

// From StackOverflow https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

There is a "little" bit of code above, so let's break it down. ?

First, we have our list (ul) with the lis that are created in the forEach loop.

All the lis have three children:

1. The flag - img
2. The name of the country heading - h3
3. A div which holds: (a) the population number - h2 - and (b) The 'Population' text - h5

We organized them in this manner because it'll be easier in the CSS to align everything using flexbox.

Alongside that, we added a class for each element because we want to style them individually in the CSS and then we used the appendChild to add these elements into the DOM at the end of the forEach function.

And lastly, we have a numberWithComma function from StackOverflow which will add a comma as a thousand separator for the population number.

Step 3 - update the view based on the search query

In this final step we're going to get the search query from the input by attaching an eventListener on it, and we're going to modify our showCountries function so that it will filter out the values we don't want to be displayed. Let's see how we can do that:

const search_input = document.getElementById('search');

let search_term = '';

search_input.addEventListener('input', e => {
    // saving the input value
    search_term = e.target.value;

    // re-displaying countries based on the new search_term
    showCountries();
});

const showCountries = async () => {
    // clear the results
    results.innerHTML = '';

    // see code above at Step 2.

    countries
        .filter(country =>
            country.name.toLowerCase().includes(search_term.toLowerCase())
        )
        .forEach(country => {
            // see code above at Step 2.
        });

    // see code above at Step 2.
};

As you can see we added two new things in the showCountries function:

1. We are clearing the previous results by setting the innerHTML to an empty string
2. We are filtering the countries by checking if the entered search_term is included in the name of the country, and we're also converting these two values toLowerCase as the user might type in upperCase letters and we still want to display the corresponding country

The entire JS Code

Below you can find the entire JS code in case you want to copy it:

const search_input = document.getElementById('search');
const results = document.getElementById('results');

let search_term = '';
let countries;

const fetchCountries = async () => {
    countries = await fetch(
        'https://restcountries.eu/rest/v2/all?fields=name;population;flag'
    ).then(res => res.json());
};

const showCountries = async () => {
    results.innerHTML = '';

    await fetchCountries();

    const ul = document.createElement('ul');
    ul.classList.add('countries');

    countries
        .filter(country =>
            country.name.toLowerCase().includes(search_term.toLowerCase())
        )
        .forEach(country => {
            const li = document.createElement('li');
            li.classList.add('country-item');

            const country_flag = document.createElement('img');
            country_flag.src = country.flag;
            country_flag.classList.add('country-flag');

            const country_name = document.createElement('h3');
            country_name.innerText = country.name;
            country_name.classList.add('country-name');

            const country_info = document.createElement('div');
            country_info.classList.add('country-info');

            const country_population = document.createElement('h2');
            country_population.innerText = numberWithCommas(country.population);
            country_population.classList.add('country-population');

            const country_popupation_text = document.createElement('h5');
            country_popupation_text.innerText = 'Population';
            country_popupation_text.classList.add('country-population-text');

            country_info.appendChild(country_population);
            country_info.appendChild(country_popupation_text);

            li.appendChild(country_flag);
            li.appendChild(country_name);
            li.appendChild(country_info);

            ul.appendChild(li);
        });

    results.appendChild(ul);
};

showCountries();

search_input.addEventListener('input', e => {
    search_term = e.target.value;
    showCountries();
});

// From StackOverflow https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

The CSS

Finally, let's add some styling to our little app:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,500&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    font-family: 'Roboto', sans-serif;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 100vh;
}

.countries {
    padding: 0;
    list-style-type: none;
    width: 480px;
}

.country-item {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    margin: 10px 0;
}

.country-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.country-flag {
    width: 40px;
}

.country-name {
    flex: 2;
    font-weight: normal;
    letter-spacing: 0.5px;
    margin: 0 5px;
    text-align: center;
}

.country-info {
    border-left: 1px solid #aaa;
    color: #777;
    padding: 0 15px;
    flex: 1;
}

.country-population {
    font-weight: 300;
    line-height: 24px;
    margin: 0;
    margin-bottom: 12px;
}

.country-population-text {
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

input {
    font-family: 'Roboto', sans-serif;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 15px;
    width: 480px;
}

Because it's nothing fancy I'm not going into details about the CSS, but if you have any questions regarding it feel free to contact me and I'll be happy to answer your questions! ?

Conclusion

As mentioned above, this small app could probably be done much simpler with React, Vue or Angular, and you are free to do so if you want for your submission, but I wanted to play around with Vanilla JS and it was a fun experience for me! ?

As always, make sure you share what you're going to create!

Happy Coding! ?

Originally published on www.florin-pop.com

The theme for week #14 of the Weekly Coding Challenge is:

Progress Bar

A progress bar is used to show how far a user action is still in process until it's completed. A good example is a download progress bar which shows you how much of the file is downloaded already (or it could also be an upload progress bar if you upload files ?).

In this article we're going to build this kind of a Progress Bar:

The HTML

For the HTML structure we need two things:

1. a container which will display the total length (100%) of the progress bar - .progress-bar
2. the actual progress element which will basically track the current progress (e.g. 20%) - .progress

<div class="progress-bar">
    <div data-size="20" class="progress"></div>
</div>

As you can see the .progress div has a data-size attribute. This will be used in JavaScript to actually set the width of the progress. You'll see in a moment what I mean, but first let's style these two elements. ?

The CSS

.progress-bar {
    background-color: #fefefe;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin: 15px;
    height: 30px;
    width: 500px;
    max-width: 100%;
}

.progress {
    background: #ad5389;
    background: -webkit-linear-gradient(to bottom, #3c1053, #ad5389);
    background: linear-gradient(to bottom, #3c1053, #ad5389);
    border-radius: 3px;
    height: 30px;
    width: 0;
    transition: width 0.5s ease-in;
}

Few things to note regarding the above CSS:

1. both elements are rectangles that have the same height (30px) and the same border-radius
2. initially the .progress width it set to 0 and we'll update this in the JavaScript code below
3. also the .progress has a nice linear-gradient from uiGradients
4. the transition added to the .progress is used to create a nice animation when the value of it's data-size attribute is dynamically changed

The JavaScript

For this we'll need to loop over all the .progress elements (in our example is only one, but you can add multiple ones in an app) to get their data-set value and to set it as their width. We'll use percentage (%) in this case.

const progress_bars = document.querySelectorAll('.progress');

progress_bars.forEach(bar => {
    const { size } = bar.dataset;
    bar.style.width = `${size}%`;
});

We're using a little bit of Object Destructuring.

const { size } = bar.dataset

is the same as:

const size = bar.dataset.size

but you might know that already ?.

Conclusion

There are multiple things you could do to improve this component. Some of which are:

1. Add multiple color variants via different classes
2. Add the percentage value
3. Make it animate dynamically by changing the size value.

I hope you enjoyed it and make sure you share with me what you're creating!

Happy Coding! ?