CV Code

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="js/login.js"></script>
        <link rel="stylesheet" href="css/mystyle.css">
    </head>
    <body id="body">
        <div id="maincontainer">


            <div id="resultcontainer">

                <b>My CV</b>

                <div id="images">

                    <img id="img1" src="images/image.jpg" height="100" width="100" />
                    <img id="img2" src="images/image.jpg" height="100" width="100" />

                </div>

                <div id="name">

                    <p>Boris Rumenov Raev</p>
                    <br>

                </div>


                <div id="education">

                    <p>University:TUGAB</p>
                    <p>Faculty:Elecronics</p>
                    <p>Specialty:CST</p>
                    <br>

                </div>


                <div id="subjects">

                    <p>Programming in Internet Environment</p>
                    <p>DB</p>
                    <p>Digital Tech</p>
                    <p>Microprocessors</p>
                    <br>

                </div>


                <div id="misc">

                    <p>Hobbies include:Music Production</p>
                    <br>

                </div>
            </div>


            <div id="form">

                <form onsubmit ="return sendRequest();">
                    <label for="username"><b>Username</b></label>
                    <input id="username" type="text" placeholder="" required pattern="[a-z].{8,}">

                    <label for="password"><b>Password</b></label>
                    <input id="password" type="password" pattern="(?=.*[a-z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>

                    <input id="button" type="submit"/>
                    <label>
                        <input type="checkbox" checked="checked" name="remember"> Remember me
                    </label>
                </form>


            </div>
        </div>
    </body>
</html>


body{
    background-color: #cccccc;
}
#resultcontainer{

    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    padding: 150px 20px;
    background-color: #ccccff;
}

#maincontainer{

    width : 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    padding: 150px 20px;
    background-color: #cccccc;
}

#form{


   max-width : 500px;
   padding: 20px;
   margin : auto;

}

#button{

    padding: 10px 24px;
    border-radius: 4px;
    colour : #cccccf;
    border: 1px solid black;
    width: 150px;
}

#button:hover{

    background-color: #4CAF50;
    color: white;

}

#images{
    #img1{
        max-width: 50%;
    }
    #img2{
        max-width: 50%;
    }
}

@media only screen and (max-width: 600px) {

    #images{

        width: 100%;
        display: block;

    img{
         width: 50%;

    }

    }
}

input[type=text]{
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
  width: 100%;
}

input[type=password] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=password]:focus {
  width: 100%;
}


/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

//tormaytotervalonytoulthe
//57e12a8be5cf6f3b168b04c2bbecb02661fc42cb

$(function(){

    $(body).css("background-color", "green");
});


function getInfo(hash) {
    const PROTOCOL = 'https://';
    const SERVER_NAME = '3c097375-0503-48fc-a0ee-97dd38d08015-bluemix.cloudant.com';
    const PORT = 443;
    const DATABASE = 'cvdata'; //TODO
    const DOCUMENT = 'f0c06164720c350ef29c8463622a2180'; //TODO
    const TIMEOUT = 10000;

    var url = PROTOCOL + SERVER_NAME + ':' + PORT + '/' + DATABASE + '/' +
         DOCUMENT + '?attachments=true';
 alert(url);

    var promise = new Promise(function(resolve, reject) {
        $.ajax({
            type: 'GET',
            url: url,
            async: true,
            cache: true,
            contentType: 'application/json',
            timeout: TIMEOUT,
            beforeSend: function(req) {
                req.setRequestHeader('Accept', 'application/json');
                req.setRequestHeader('Authorization', 'Basic ' + hash);
            },
            success: function(data) {
                resolve(data);
            },
            error: function (data) {
                reject(data);
            }
        });
    });

    return promise;
}

function sendRequest() {
    let username=$('[type=text]').val();
    let password=$('[type=password]').val();

    let hash=btoa(username+":"+password);

    getInfo(hash)
            .then(function(result) {
                console.log(result);
            })
            .catch(function(error) {
                console.log(error);
            });

    return false;
}

$("#tormaytotervalonytoulthe").text(name);