Building Registration system using map and filters

 <!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="reg.css">
    <title>Document</title>
</head>

<body>
    <div class="usercontainer" id="usercontainer"></div>
    <div class="container">

        <h2 class="heading">Lorem ipsum dolor sit ametc kmn.</h2>
        <p class="desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, quod!</p>
        <div class="flex">
            <input id="name" type="text" placeholder="Enter Name">
            <input id="email" type="email" placeholder="Enter Email">


        </div>

        <button class="btn" onclick="reg()">Register Here</button>
    </div>

    <script src="reg.js"></script>
</body>

</html>

//css file



let users=[];
function reg(){

    let name=document.getElementById('name');
    let email=document.getElementById('email');
   
    let user={
        name:name.value,
        email:email.value
    }

    let userfilter=users.filter((user)=>{

        return user.email==email.value;

    })

    if(userfilter.length>0){
        console.log("email already exists")

    }
    else{
        users.push(user);
        render();

    }
}

// let usercontainer=document.getElementById('usercontainer');
// function render(){

//     usercontainer.innerHTML=' '
//     let render=users.map((user)=>{
//         return user;

//     })
//     for(let i=0;i<render.length;i++){

//         let name=document.createElement('div')
//         let email=document.createElement('div')
//         let div=document.createElement('div')

//         name.innerText=render[i].name;
//         email.innerText=render[i].email;

//         div.appendChild(name);
//         div.appendChild(email);
//         usercontainer.appendChild(div);


//     }
function render() {
    const userContainer = document.getElementById('usercontainer');

    // Clear the user container before rendering new users
    userContainer.innerHTML = '';

    // Use map() to create HTML elements for each user and append them directly to the user container
    users.map(user => {
        // Create a div element for each user
        const userDiv = document.createElement('div');
        userDiv.classList.add('user');

        // Create a heading element for the user's name
        const nameHeading = document.createElement('h3');
        nameHeading.innerText = user.name;

        // Create a paragraph element for the user's email
        let emailPara = document.createElement('p');
        emailPara.innerText = user.email;

        // Append name and email elements to the user div
        userDiv.appendChild(nameHeading);
        userDiv.appendChild(emailPara);

        // Append the user div to the user container
        userContainer.appendChild(userDiv);
    });
}



//CSS FILE

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


}

.container{

    width: 500px;
    text-align: center;
    padding: 20px;
    margin: 20px auto;
    border: none
    /* border-radius: 10px; */

}

.flex{

    /* width: 100%; */
    display: flex;
    gap: 20px;
}

input{
    width: 100%;
    text-align: center;
    padding: 16px 32px;
    border-radius: 10px;
    border: 1.50px solid rgb(91, 91, 91);
    margin-bottom: 10px;
    box-sizing: border-box;
}
input:focus{
    outline: none;
    border-color: royalblue;
}

.btn{
    color: white;
    width: 100%;
    padding: 16px 32px;
    font-size: 16px;
    background-color: rgb(71, 115, 247);
    border: none;
    border-radius: 10px;


}

Output :-



Comments

Popular posts from this blog

Array Mapping and Filters Assignment

Rolling Dice

Basics Of Java Script Till DOM Beggining