Add event listener in cards

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="eventlistener.css">
    <title>Document</title>
</head>
<body>

<div class="burger">

    <div class="card" data-price="99" data-heading="burger">
        <img class="img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <h3 class="heading">This is a burger</h3>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, tempore.</p>
            <p class="price">Rs 99</p>
            <button class="order-btn">Button 1</button>

    </div>
       

    <div class="card" data-price="199" data-heading="dosa" >
        <img class="img" src="https://source.unsplash.com/1600x1000/?dosa" alt="">
            <h3 class="heading">This is a card</h3>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, tempore.</p>
            <p class="price">Rs 199</p>
            <button class="order-btn">Button 2</button>
 

    </div>


    <div class="card" data-price="200" data-heading="pizza">
        <img class="img" src="https://source.unsplash.com/1600x1000/?pizza" alt="">
        <div class="content">
            <h3 class="heading">This is a card</h3>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, tempore.</p>
            <p class="price">Rs 200</p>
            <button class="order-btn">Button 3</button>
        </div>

    </div>

   

</div>


    <script src="eventlisteners.js"></script>
</body>
</html>


// Java Script

// btns=document.querySelectorAll('.order-btn')

// btns.forEach((btn) => {

//     btn.addEventListener('click',(e)=>{

//         console.log(e.target.innerText)
//     })
   
// })

// btns=document.querySelectorAll('.price')

// btns.forEach((btn) => {

//     btn.addEventListener('click',(e)=>{

//         console.log(e.target.innerText)
//     })
   
// })

let foodItem=document.querySelectorAll('.card')

foodItem.forEach((items)=>{


    items.addEventListener('click',(e)=>{
        if(items.dataset.price<100){

            console.log("Order Successful for",items.dataset.heading,"amount payable",Number(items.dataset.price)+40)
        }
        else{
            console.log("Order Successful for",items.dataset.heading,"amount payable",items.dataset.price)
        }
       
    })
})


// CSS File


body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.card{

    width: 300px;
    /* height: 200px; */    
    margin: 20px auto;
    border: 1px solid rgb(212, 212, 212);
    border-radius: 10px;
    padding: 10px;
    flex-grow: 1;
   

}

.img{
    width: 100%;
    height: 250px;
    border-radius: 10px 10px 0px 0px;


}

.content{
    width: 100%;
    height: 100%;
    padding: 5px;
}

.burger{


    display: flex;
    flex-wrap: wrap;
    gap: 20px;
   
}

.order-btn{

    background-color: rgb(249, 156, 51);
    color: white;
    border-radius: 10px;
    font-size: 17px;
    padding: 10px 22px;
    border: none;
}

.heading{
    margin-top: 0px;
    margin-bottom: 0px;



}
.para{

    margin-top: 2px;
    color: rgb(56, 56, 56);
    font-size: 16px;


}

Output :-



Comments

Post a Comment

Popular posts from this blog

Array Mapping and Filters Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title >Document</ title > </ head > < body >         < script src = "am.js" ></ script > </ body > </ html > // JAVA SCRIPT FILE const users = [     {         name : "Akash Sharma" ,         age : 17 ,         gender : "Male" ,         location : "Delhi, India"     },     {         name : "Neha Patel" ,         age : 16 ,         gender : "Female" ,         location : "Mumbai, India"     },     {         name : "Rajesh Singh" ,     ...
Read more

Rolling Dice

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < audio id = "diceaudio" src = "dice.mp3" ></ audio >         < h1 class = "heading" >Roll The Dice To Get Random Number</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</ p >         < div id = "dice" >6</ div >         < div class = "button" onclick = " roll ()" >Roll The Dice</ div >     </ div >     ...
Read more

Basics Of Java Script Till DOM Beggining

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more