> Web App Create Note App || Add, Update, Delete in localstorage using javscript part#2
एक्सेल और एडवांस एक्सेल से जुड़े सभी लेटेस्ट विडियो पाने के लिए मेरे यूट्यूब चैनल को अभी सबस्क्राइब करे लिंक नीचे है धन्यवाद |

Web App Create Note App || Add, Update, Delete in localstorage using javscript part#2

Tech Gyan Amit जुलाई 07, 2024

 

            Web App Create Note App || Add,       Update, Delete in localstorage using javscript 


 दोस्तों आज किस आर्टिकल में मैं आपको बताऊंगा कि आप HTML और CSS और Javascrpt की मदद से कैसे नोट एप क्रिएट (Web App Create Note App) कर सकते हैं | साथ ही साथ इसमें आप  Local-Storage में डाटा कैसे स्टोर किया जाता है | कैसे अपडेट किया जाता है | (Add, Update, Delete in localstorage using javscript) और डिलीट किया जाता है | यह सारी चीज भी इस आर्टिकल में आप सिखाने वाले हैं |







html code 


<!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="styel.css">
    <title>App Note</title>
</head>
<body>
    <div class="container">
        <h1>Note App</h1>
        <div class="data-container">
            <input type="text" placeholder="Enter Title" id="title">
            <textarea name="" id="description" placeholder="Enter Description"></textarea>
            <div class="btn-group">
                <button id="btn">Add Note</button>
            </div>
        </div>
    </div>
    <div class="cards">
    
    </div>
    <script src="java.js"></script>
</body>
</html>
/*css Code*/ 



*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: linear-gradient(#16a085,#2980b9);
}

.container{
    width: 400px;
    min-width: 350px;
    border: 1px solid;
    margin: 24px auto;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    background: #fff;
}

.data-container{
    margin-top: 45px;
}

input{
    width: 100%;
    height: 40px;
    padding: 10px;
    font-size: 19px;
    outline: none;
    border-radius:10px ;
    border: 2px solid rgb(149, 37, 37);
    margin-bottom: 20px;
}

textarea{
    width: 100%;
    height: 170px;
    padding: 10px;
    border-radius:10px ;
    border: 2px solid rgb(149, 37, 37);
    outline: none;
    margin-bottom: 20px;
}

#btn{
    padding: 10px;
    outline: none;
    border: 0;
    background: #2980b9;
    color: #fff;
    cursor: pointer;
}

.cards{
    width: 100vw;
    min-height:150px ;
    display: flex;
    justify-content: space-around;
    
}

.cards-data{
    width: 250px;
    background-color: #fff;
    padding: 10px;
}

h3{
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   margin-bottom: 10px;
}

p{
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
}

.cards-data button{
    padding: 10px;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: #1cca4e;
    color: #fff;
    cursor: pointer;
}




Javascript Code





let title = document.getElementById('title');
let description = document.getElementById('description');
let cards = document.querySelector('.cards')

// when btn click show value
document.getElementById("btn").addEventListener("click",()=>{
let titleValue =title.value;
let descriptionValue=description.value;
let storeData = JSON.parse(localStorage.getItem("cardsData"))  || [];
storeData.push({title:titleValue,description:descriptionValue});
localStorage.setItem("cardsData",JSON.stringify(storeData));
updateCards()
})


// this function will when user click on Add cards


function updateCards(){
    let storeData = JSON.parse(localStorage.getItem("cardsData"))  || [];
    cards.innerHTML=""  
    storeData.forEach((card,index) => {
     cards.innerHTML  +=` 

            
${card.title}

            
${card.description}

            
        
`
    });
}

// when user click delete function run to delete

function deleteCards(index){
    let storeData = JSON.parse(localStorage.getItem("cardsData"))  || [];
    storeData.splice(index,1)
    localStorage.setItem("cardsData",JSON.stringify(storeData))
    updateCards()
}


 updateCards()
Tags
Reactions

एक टिप्पणी भेजें

0 टिप्पणियाँ

Thanks For Message Me if any issue please feel free to contact