Person Inquiry Program

Person Inquiry Program

HTML AND JS

<div class="container">
        <small>Search Name</small><br />
        <input type="text" id="findName" placeholder="name"/>
        <input type="text" id="findSurname" placeholder="surname" />
        <input type="button" onclick="find();" value="find" />
        <div id="show"></div>
    </div>
        
    <script>
        var persons = [
           {
               name: "John",
               surname: "Peterson",
               age: 24,
               country: "England",
               jop: "Software Engineer"
           },
           {
               name: "Alice",
               surname: "Queen",
               age: 26,
               country: "Germany",
               jop: "Computer Engineer"
           },
           {
               name: "Oliver",
               surname: "Black",
               age: 30,
               country: "France",
               jop: "Machine Engineer"
           },
           {
               name: "John",
               surname: "Trump",
               age: 27,
               country: "Russia",
               jop: "Software Engineer"
           },
        ]

        function find() {
            var findName = document.getElementById("findName").value,
                findSurname = document.getElementById("findSurname").value,
                show = document.getElementById("show");
            if (findName == "john") {
                if (findSurname == "Peterson") {
                    show.innerHTML = (
                    "Name   : " + persons[0].name + "<br>" +
                    "Surname: " + persons[0].surname + "<br>" +
                    "Age    : " + persons[0].age + "<br>" +
                    "Country: " + persons[0].country + "<br>" +
                    "Jop    : " + persons[0].jop
                    )
                } else if (findSurname == "Trump") {
                    show.innerHTML = (
                    "Name   : " + persons[3].name + "<br>" +
                    "Surname: " + persons[3].surname + "<br>" +
                    "Age    : " + persons[3].age + "<br>" +
                    "Country: " + persons[3].country + "<br>" +
                    "Jop    : " + persons[3].jop
                    )
                }
            }
            else if (findName == "Alice") {
                if (findSurname == "Queen") {
                    show.innerHTML = (
                    "Name   : " + persons[1].name + "<br>" +
                    "Surname: " + persons[1].surname + "<br>" +
                    "Age    : " + persons[1].age + "<br>" +
                    "Country: " + persons[1].country + "<br>" +
                    "Jop    : " + persons[1].jop
                    )
                }
            }
            else if (findName == "Oliver") {
                if (findSurname == "Black") {
                    show.innerHTML = (
                    "Name   : " + persons[2].name + "<br>" +
                    "Surname: " + persons[2].surname + "<br>" +
                    "Age    : " + persons[2].age + "<br>" +
                    "Country: " + persons[2].country + "<br>" +
                    "Jop    : " + persons[2].jop
                    )
                }
            }


            try {
                if (findName == "" || !isNaN(findName)) throw "Do not leave the name field blank";
                if (findSurname == "" || !isNaN(findSurname)) throw "Do not leave the surname field blank";
            } catch (err) {
                alert(err);
            }
        }
        


    </script>

CSS

body{
    padding:0;
    margin:0;
    font-family:Verdana;
    background:#262626;
    color:#fff;
}
.container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#9e0f00;
    border:3px solid #fff;
    border-radius:20px;
    padding:10px;
    box-shadow:0px 0px 1000px 20px #fff;
}
small {
    margin-left:60px;
    padding:20px;
    font-size:20px;
    font-weight:bold
}
input {
    padding:2px;
    margin-left: 7px;
    width: 95%;
    margin:5px;
    border-radius:5px;
}
.container {
    width: 300px;
    height: 200px;
}