JavaScript Pinterest Clone
Tags: javascript, webdev, ux, css
Published: 2021-02-05 15:24:41

### <center>Create a Pinterest Clone using HTML, CSS, & JavaScript</center>

------------

#### <center>Browse our [Teachable](http://anobject.teachable.com "Teachable") courses.</center>

------------

![JavaScript Pinterest Clone](https://user-images.githubusercontent.com/58220766/107051537-922d5100-679a-11eb-9728-a1404360ed15.png)

### We'll build our mock-up in steps.

1. Create a mock-up of a single **Pinterest Pin**.
2. Create a mock-up of the Pinterest "**Add a Pin Screen**".
3. Merge the above; Use the "**Add Pin Screen**" to generate a single **Pinterest Pin**.
4. Transfer the logic of our merge in **step 3** into our **Pinterest Layout**.

------------

### "Pinterest Pin" Mock-Up

#### Each Pin is made up of 3 sections.

1. **Pin title** - the user won't see this; you can use this on the back-end as a way to store the Pin in a database
2. **Pin modal** - this is the overlay for each card; this won't be functional for this tutorial, just cosmetic

![pin modal](https://user-images.githubusercontent.com/58220766/104537750-8eb60800-55e8-11eb-8e34-33d5426b7ac0.png)

3. **Pin image** - the actual image the user uploads

![pin image](https://user-images.githubusercontent.com/58220766/104537888-cd4bc280-55e8-11eb-8645-c1b06f363d8c.png)

#### Each pin has a "header" and "footer".

![head-foot pin](https://user-images.githubusercontent.com/58220766/104538216-70044100-55e9-11eb-9361-74887a3b6399.png)


```
<div class="card">
    <div class="pin_title"></div>
    <div class="pin_modal">
        <div class="modal_head">
        </div>

        <div class="modal_foot">
        </div>
    </div>

    <div class="pin_image">
        <img src="" alt="pin_image">
    </div>
</div>
```

------------

### "Add a Pin" Modal Mock-Up

#### The Modal is made up of 9 sections.

1. **Modal overlay** - the transparent black background
2. **Add Pin container** - the main interface of the screen
3. **Left side** - the left half of our interface
4. **Right side** - the right half of our interface
5. **Left side Header** - a simple button leading to options
6. **Left side Body** - the user's image shows up here
7. **Left side Footer** - an option to upload an image from the web
8. **Right side Header** - select the Pin size (small, med, large)
9. **Right side Body** - information about the Pin is entered here

![modal](https://user-images.githubusercontent.com/58220766/104540570-b8256280-55ed-11eb-9c6c-62513b887a89.png)

```
<div class="add_pin_modal">
    <div class="add_pin_container">
        <div class="side" id="left_side">
            <div class="section1">
            </div>

            <div class="section2">
            </div>

            <div class="section3">
            </div>
        </div>

        <div class="side" id="right_side">
            <div class="section1">
            </div>

            <div class="section2">
            </div>
        </div>
    </div>
</div>
```

------------

### Merge our Pin and "Add Pin Screen".

#### When we click save, we create a Pin.

```
document.querySelector('#save_pin').addEventListener('click', () => {
    const new_pin_data = {
        author: 'Jack',
        board: 'default',
        title: document.querySelector('#pin_title').value,
        description: document.querySelector('#pin_description').value,
        destination: document.querySelector('#pin_destination').value,
        img_blob: pin_image_blob,
        pin_size: document.querySelector('#pin_size').value
    }

    create_pin(new_pin_data);
});
```

![merge](https://user-images.githubusercontent.com/58220766/104544057-e8bcca80-55f4-11eb-8450-9f269af261c2.gif)

------------

### The Final Pinterest Board

#### We'll take our Pinterest Layout from a different tutorial.

In a previous tutorial, we created the Pinterest Layout using CSS Grids.

We'll import that code and use that layout as our **pin_container** for this project.

You can find that tutorial [here](https://youtu.be/VTJ_0MplSwk "here").

This merge is very simple. There is no new HTML here.

The major change comes in our CSS and JavaScript.

In our CSS, we create three new class definitions; the small, medium, and large Pin options.

```
.card_large {
    grid-row-end: span var(--card_large);
}

.card_medium {
    grid-row-end: span var(--card_medium);
}

.card_small {
    grid-row-end: span var(--card_small);
}
```

Then based on which **pin size** the user chooses, we add that class to the **Pin** before attaching it to our **pin_container**.

```
new_pin.classList.add(`card_${pin_details.pin_size}`);
```

![final_board](https://user-images.githubusercontent.com/58220766/104661101-d2b31680-5695-11eb-9437-13407f64960d.gif)

------------

### There is much more nuance to this project.

You can get the source files [here](https://github.com/an-object-is-a/js-pinterest-clone "here") and you can follow the video tutorial down below.

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>Create a Pinterest Clone using HTML, CSS, & JavaScript</center>

{% youtube wfgGyQ_FDik %}