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);
});
}
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
Post a Comment