CODEWITHSUNDEEP
javascripthtmlcss
Gabriel Dela Peña
Gabriel Dela Peña

Reputation: 51

How do i add new image on the new card

I'm currently learning HTML, CSS, and JavaScipt. I'm trying to make a basic project, but I'm having problems with adding a new image on the new card. When I click on the 'add item' button, I create a new card with an image. However, when I add another card for the second time, my image from the first card that I created will disappear. Can someone help me with how to fix this solution? Thank you.

const row = document.querySelector(".row");
const addItem = document.querySelector(".add-item");

const newProductInput = document.querySelector(".product");
const newPriceInput = document.querySelector(".price");
const newPhotoInput = document.querySelector("#inputImage");
let newCardPhoto = document.createElement('img');


addItem.addEventListener('click', (e) => {
    if (e.target.className === 'addItemBtn') {
        addCardContent();
        addCardPhoto();
    }
})

function addCardPhoto() {
    let reader = new FileReader();

    reader.onload = function() {
        var dataURL = reader.result;
        newCardPhoto.src = dataURL;
    }
    reader.readAsDataURL(newPhotoInput.files[0]);
}

function addCardContent() {

    let newContainer = document.createElement('div');
    let newCard = document.createElement('div');
    let newCardProduct = document.createElement('h4');
    let newCardPrice = document.createElement('p');
    let newBtn = document.createElement('button');



    newCard.className = 'card col';
    newContainer.className = 'container';
    newBtn.className = 'orderBtn';
    newBtn.textContent = 'Order';

    newCardPrice.textContent = newPriceInput.value;
    newCardProduct.textContent = newProductInput.value;

    newCard.appendChild(newCardPhoto);
    newCard.appendChild(newContainer);
    newContainer.appendChild(newCardProduct);
    newContainer.appendChild(newCardPrice);
    newContainer.appendChild(newBtn);

    row.appendChild(newCard);

}
/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lobster', cursive;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}


/* ================================= 
  Base Layout Styles
==================================== */


/* ---- Navigation ---- */

.main-header {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.logo {
    border: 4px solid black;
    border-radius: 4px;
    background-color: black;
}

.logo a {
    color: white;
}

.nav {
    display: flex;
}

.nav li {
    padding: 10px 15px;
}

.nav li a {
    color: black;
    text-transform: uppercase;
}


/* ---- Layout Containers ---- */

.intro-webshop {
    height: 60vh;
    background-color: coral;
    text-align: center;
}

.search-bar {
    width: 80%;
    margin: 4em auto;
    text-align: center;
}

.row {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 20%;
    margin: 1em 2em;
}

.image-top {
    width: 100%;
    height: 15vw;
    background-size: cover;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    text-align: center;
    padding: 2px 16px;
}


/* ---- Layout Buttons ---- */

.orderBtn {
    width: 150px;
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    margin-bottom: 2em;
    cursor: pointer;
    font-family: 'Lobster', cursive;
}

.orderBtn:hover {
    background-color: #008CBA;
    color: white;
}

.add-item {
    margin: auto;
    width: 15%;
    padding: 10px;
}

.add-item input {
    display: block;
}

.add-item p {
    margin: 5px 0;
}

.add-item button {
    margin: 10px 0 0 0;
}


/* ---- Layout Footer ---- */

.main-footer {
    text-align: center;
    background: #d9e4ea;
    padding: 1.5em 0;
    margin-top: 2em;
}


/* ================================= 
  Media Queries
==================================== */

@media (max-width: 415px) {
    .main-header {
        display: block;
        text-align: center;
    }
    .nav {
        display: block;
        padding: 0;
    }
    .nav li {
        padding: 0 0 25px 0;
    }
    .row {
        display: block;
    }
    .card {
        width: 100%;
        margin: 1em 0;
    }
    .image-top {
        height: 100%;
    }
    .add-item {
        width: 50%;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web-Shop Urban</title>
    <link rel="stylesheet" href="/css/webshop.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>

<body>

    <header class="main-header">
        <h1 class="logo"><a href="/html/index.html">Urban</a></h1>
        <!-- <div id="menu-bar"> -->
        <!-- <div id="menu" onclick="onClickMenu()">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>
            </div> -->
        <ul class="nav" id="nav">
            <li><a href="/html/index.html#about">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <!-- </div> -->
    </header>

    <main>
        <div class="intro-webshop">
        </div>
        <div class="search-bar">
            <input type="text"> <button>search</button>
        </div>

        <div class="row">
            <div class="card col">
                <img src="/img/2d8169059eaa219df13b70de2b33676a.jpg" alt="shoes" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
            <div class="card col">
                <img src="/img/istockphoto-909472812-170667a.jpg" alt="jeans" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
            <div class="card col">
                <img src="/img/unnamed-removebg-preview.png" alt="tshirt" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
        </div>


        <div class="add-item">
            <p>Image</p>
            <input type="file" accept='image/*' id="inputImage">
            <p>Produt</p>
            <input type="text" class="product">
            <p>Price</p>
            <input type="text" class="price">
            <button class="addItemBtn">Add item</button>
        </div>

    </main>

    <footer class="main-footer">
        <span>&copy;2021 Urban.</span>
    </footer>
    <script src="/js/javascript.js"></script>
</body>

</html>

Upvotes: 1

Views: 1069

Answers (1)

Manish Khatri
Manish Khatri

Reputation: 161

Rather than using two different function, one for adding card image and one for card content, try combining both of them.. here use the code for your reference.

    const row = document.querySelector(".row");
const addItem = document.querySelector(".add-item");

const newProductInput = document.querySelector(".product");
const newPriceInput = document.querySelector(".price");
const newPhotoInput = document.querySelector("#inputImage");


addItem.addEventListener('click', (e) => {
    if (e.target.className === 'addItemBtn') {
        addCardContent();
    }
})


function addCardContent() {

    let newContainer = document.createElement('div');
    let newCard = document.createElement('div');
    let newCardProduct = document.createElement('h4');
    let newCardPrice = document.createElement('p');
    let newBtn = document.createElement('button');
    let newImg = document.createElement('img');
    
    let reader = new FileReader();

    reader.onload = function() {
        var dataURL = reader.result;
        newImg.src = dataURL;
    }
    reader.readAsDataURL(newPhotoInput.files[0]);


    newCard.className = 'card col';
    newContainer.className = 'container';
    newBtn.className = 'orderBtn';
    newBtn.textContent = 'Order';

    newCardPrice.textContent = newPriceInput.value;
    newCardProduct.textContent = newProductInput.value;

    newCard.appendChild(newImg);
    newCard.appendChild(newContainer);
    newContainer.appendChild(newCardProduct);
    newContainer.appendChild(newCardPrice);
    newContainer.appendChild(newBtn);

    row.appendChild(newCard);

}
/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lobster', cursive;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}


/* ================================= 
  Base Layout Styles
==================================== */


/* ---- Navigation ---- */

.main-header {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.logo {
    border: 4px solid black;
    border-radius: 4px;
    background-color: black;
}

.logo a {
    color: white;
}

.nav {
    display: flex;
}

.nav li {
    padding: 10px 15px;
}

.nav li a {
    color: black;
    text-transform: uppercase;
}


/* ---- Layout Containers ---- */

.intro-webshop {
    height: 60vh;
    background-color: coral;
    text-align: center;
}

.search-bar {
    width: 80%;
    margin: 4em auto;
    text-align: center;
}

.row {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 20%;
    margin: 1em 2em;
}

.image-top {
    width: 100%;
    height: 15vw;
    background-size: cover;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    text-align: center;
    padding: 2px 16px;
}


/* ---- Layout Buttons ---- */

.orderBtn {
    width: 150px;
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    margin-bottom: 2em;
    cursor: pointer;
    font-family: 'Lobster', cursive;
}

.orderBtn:hover {
    background-color: #008CBA;
    color: white;
}

.add-item {
    margin: auto;
    width: 15%;
    padding: 10px;
}

.add-item input {
    display: block;
}

.add-item p {
    margin: 5px 0;
}

.add-item button {
    margin: 10px 0 0 0;
}


/* ---- Layout Footer ---- */

.main-footer {
    text-align: center;
    background: #d9e4ea;
    padding: 1.5em 0;
    margin-top: 2em;
}


/* ================================= 
  Media Queries
==================================== */

@media (max-width: 415px) {
    .main-header {
        display: block;
        text-align: center;
    }
    .nav {
        display: block;
        padding: 0;
    }
    .nav li {
        padding: 0 0 25px 0;
    }
    .row {
        display: block;
    }
    .card {
        width: 100%;
        margin: 1em 0;
    }
    .image-top {
        height: 100%;
    }
    .add-item {
        width: 50%;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web-Shop Urban</title>
    <link rel="stylesheet" href="/css/webshop.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>

<body>

    <header class="main-header">
        <h1 class="logo"><a href="/html/index.html">Urban</a></h1>
        <!-- <div id="menu-bar"> -->
        <!-- <div id="menu" onclick="onClickMenu()">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>
            </div> -->
        <ul class="nav" id="nav">
            <li><a href="/html/index.html#about">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <!-- </div> -->
    </header>

    <main>
        <div class="intro-webshop">
        </div>
        <div class="search-bar">
            <input type="text"> <button>search</button>
        </div>

        <div class="row">
            <div class="card col">
                <img src="/img/2d8169059eaa219df13b70de2b33676a.jpg" alt="shoes" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
            <div class="card col">
                <img src="/img/istockphoto-909472812-170667a.jpg" alt="jeans" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
            <div class="card col">
                <img src="/img/unnamed-removebg-preview.png" alt="tshirt" style="width:100%" class="image-top">
                <div class="container">
                    <h4><b>Produt</b></h4>
                    <p>Price</p>
                    <button class="orderBtn">Order</button>
                </div>
            </div>
        </div>


        <div class="add-item">
            <p>Image</p>
            <input type="file" accept='image/*' id="inputImage">
            <p>Produt</p>
            <input type="text" class="product">
            <p>Price</p>
            <input type="text" class="price">
            <button class="addItemBtn">Add item</button>
        </div>

    </main>

    <footer class="main-footer">
        <span>&copy;2021 Urban.</span>
    </footer>
    <script src="/js/javascript.js"></script>
</body>

</html>

Upvotes: 1

Related Questions