Recreate: Spotify (part 4) - Home page
Tags: beginners, css, frontend, javascript
Published: 2020-03-15 19:01:05

# Intro
Welcome back to the Recreate Spotify Series! In this part I will recreate the main section of the homepage.

What I want to recreate:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fb94fkricfs8d19vqljm.png)

If you have any recommendations or you think that I could do anything differently feel free to leave a comment 🙂.

A sneak peek of the result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a3m9yze22z85pnz2zs8l.gif)

and a closer look 👀:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p7tedsl5qgd7tvqer9i2.gif)

# The starting point 🏁

As always, the first step is to split the design to smaller chunks. Looking at the main section of the home page, I mark all the new components.

You can see the new components marked in the picture below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/415pjltd3i29tv0jjbou.png)

# Code 💻

If you want to follow along, you can find the code from the part 3 (Search page) of the series in [this Github gist](https://gist.github.com/tsanak/09432e8b16808919cf23fa2a3103d099) and the part 2 (Header & Sidebar) in [this Github gist](https://gist.github.com/tsanak/0ea7df18c4db04c4f1e37105562b56a7).


## Structure
I will start by adding the html code for the section head and section body. Inside the section head there could be the following items:

1. A title 
2. A subtitle
3. A 'VIEW MORE' link

```html
<main>
    <section class="section">
        <div class="section--header">
            <div class="section--header--left">
                <h2 class="title">Άκουσες πρόσφατα</h2>
            </div>
            <div class="section--header--right">
                <a href="#" class="section--header--right--more">VIEW ALL</a>
            </div>
        </div>
        <div class="section--body">
            <div class="section--body--item album--item">
                <div class="section--body--item--img">
                    <img src="http://via.placeholder.com/150x150" alt="">
                </div>
                <p class="section--body--item--title">Album name</p>
                <p class="section--body--item--subtitle"><a href="#">Artist name</a></p>
                <div class="section--body--item--play">
                    <i class="lni lni-play"></i>
                </div>
            </div>

            <div class="section--body--item artist--item">
                <div class="section--body--item--img">
                    <img src="http://via.placeholder.com/150x150" alt="">
                </div>
                <p class="section--body--item--title">LEX</p>
                <p class="section--body--item--subtitle">Artist</p>
                <div class="section--body--item--play">
                    <i class="lni lni-play"></i>
                </div>
            </div>
        </div>
    </section>
</main>
```

This is how the section looks without any added styles:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mbxu9pw935op2du30gzj.png)

## Styling
```css
main .section .subtitle {
    color: #b3b3b3;
    font-size: 1rem;
    margin-top: -8px;
    font-weight: 100;
}

.section--header {
    display: flex;
    justify-content: space-between;
}

a.section--header--right--more,
.section--body--item--subtitle,
.section--body--item--subtitle a {
    color: #b3b3b3;
    font-size: 0.8rem;
    text-decoration: none;
}

a.section--header--right--more:hover,
.section--body--item--subtitle a:hover {
    border-bottom: 1px solid #b3b3b3;
}

a.section--header--right--more {
    font-weight: 700;
    letter-spacing: 1.35px;
}
```

After applying the above styles the section now looks like the image below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nki90azrp0mspise7evd.png)

Now I need to add the styles for the section body, one for the album card and one for the artist card.

```css
.section--body--item {
    width: 165px;
    height: 240px;
    background-color: rgb(38, 38, 38);
}

.section--body--item.album--item,
.section--body--item.artist--item {
    padding: 20px;
    cursor: pointer;
}

.section--body--item .section--body--item--img {
    width: 125px;
    height: 125px;
    margin: 0 auto;
}

.section--body--item .section--body--item--img img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2);
}

.section--body--item--title {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.section--body--item--subtitle {
    margin: 0;
    margin-top: 1px;
}

.section--body--item.artist--item .section--body--item--img img {
    border-radius: 50%;
}

.section--body--item--play {
    display: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #1db954;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 15px;
    right: 15px;
    box-shadow: 0px 0px 8px 8px rgb(37, 37, 37);
    cursor: default;
}

.section--body--item--play:hover,
.section--body--item--play.active {
    transform: scale(1.05);
}

.section--body--item:hover .section--body--item--play,
.section--body--item--play.active {
    display: flex;
}
```
After applying the above styles, the page looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0dckjjxnjjfunbyd1zhm.png)

The last step is to add some javascript code to toggle the Play/Pause ( ⏯️ ) icon. The functionality that I want to achieve is the following:

When the user clicks the 'Play' ( ▶️ ) button:
- the icon should change to 'Pause' ( ⏸️ ) and it should be always visible.
- all the previous 'Pause' ( ⏸️ ) buttons should change to Play ( ▶️ )

When the user click the 'Pause' ( ⏸️ ) button:
- the icon should change to 'Play' ( ▶️ )

```javascript
const _play_pause_els = document.querySelectorAll('.section--body--item--play');
/* Get all the 'Play' buttons */
_play_pause_els.forEach(_el => {
    /* When the user clicks the button */
    _el.addEventListener('click', (e) => {
        /* Get all the play buttons 
            1. remove the 'active' class 
            2. Change the 'pause' icon to the 'play' icon
        */
        _play_pause_els.forEach(_el2 => {
            if(_el != _el2) {
                _el2.classList.remove('active');
                const _icon_el2 = _el2.querySelector('i');

                if(_icon_el2) {
                    _icon_el2.classList.remove('lni-pause')
                    _icon_el2.classList.add('lni-play');
                }
            }
        });

        _el.classList.toggle('active');

        const _icon_el = _el.querySelector('i');
        if(_icon_el) {
        /* Toggle the icon to 'pause' or 'play' */
            if(_icon_el) {
                if(_el.classList.contains('active')) {
                    _icon_el.classList.remove('lni-play');
                    _icon_el.classList.add('lni-pause');
                } else {
                    _icon_el.classList.remove('lni-pause')
                    _icon_el.classList.add('lni-play');
                }
            }
        }
    });
});
```

A close look to the section body cards with the added functionality:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p7tedsl5qgd7tvqer9i2.gif)

And how the whole page looks:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a3m9yze22z85pnz2zs8l.gif)

# Conclusion
![alt text](https://i.giphy.com/media/uMSm9Q0XQLkSQ/giphy.webp "")

🎉 Thank you for reading through all the post! 🎉

If you have any questions or any feedback, let me know in the comments 🗨.

For the next part of the series I will create the bottom bar of the main layout. You can see it in this image: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gg4hx1qwdb8qoepyf6t4.png)

If you want to follow along, you can find the code of the series in these Gists: 
- [Part 1 Gist (Base Layout)](https://gist.github.com/tsanak/9fdb7f8d956a758ca68a5d0f5cc6f07c)
- [Part 2 Gist (Header & Sidebar)](https://gist.github.com/tsanak/0ea7df18c4db04c4f1e37105562b56a7)
- [Part 3 Gist (Search page)](https://gist.github.com/tsanak/09432e8b16808919cf23fa2a3103d099)
- [Part 4 Gist (Home page)](https://gist.github.com/tsanak/811add83b0eb8dae3d2283a194c8c338)