Assingnment based on registration system using map and random function

 <!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="allotment.css">
    <title>Document</title>
</head>
<body>
   
    <div class="container" id="container">

        <h2>Lorem, ipsum dolor sii, possimus.</h2>

        <p>Lorem ipsum doloAssuoluta ut eum quia earum sunt nisi perferendis voluptatibus!</p>

        <input id="ip1" type="text" placeholder="Enter name">

        <input type="text" placeholder="Enter number">

        <button class="btn" onclick="allotment()">Register Now</button>


    </div>

    <div id="allotplace"></div>

<script src="allotment.js"></script>

</body>
</html>


//JAVA SCRIPT FILE

function allotment(){

    let container=document.getElementById('container');
    let allotplace=document.getElementById('allotplace')
    let ip1=document.getElementById("ip1");

    container.classList.add('d-none');

    let random=Math.floor(Math.random()*5)

    let allotrand=random;

    let allotment=["mumbai","pune","goa","chennai","banglore"]

    allotplace.innerText=ip1.value+" Your address of allotment is "+allotment[allotrand];
   

}


//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;
    border-radius: 10px;
    padding:10px;
    text-align: center;
    margin: 10px auto;
}

input{
    padding:16px 32px;
    border-radius: 10px;
    border: 1.5px solid rgb(147, 147, 147);


}
input:focus{

    outline: none;
    border-color: royalblue;
}

.btn{

    padding: 16px 32px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 16px;
    border: 1px solid black;




}



.d-none{

    display: none;
}

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