Untitled

https://github.com/vdonchev/JavaScriptApps-AllExercisesAndLabs

//students////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shit</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
        #results {
            background-color: #FFFFFF;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        #results tr {
            background-color: #AAAAAA;
            padding: 5vh;
            font-size: 1.5vw;
        }

        #results tr:nth-child(odd) {
            background-color: #808080;
        }

        #results tr:first-child {
            background-color: #000000;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 2vw;
        }

        #results tr th {
            padding: 1vw;
        }

        #results tr td {
            padding: 1vw;
            transition: font-size 0.2s;
        }

        #results tr:not(:first-child):hover {
            background-color: #F0F8FF;
            color: #000000;
            font-size: 2.25vw;
        }

        .user {
            background-color: red;
            font-size: 1.5vw;
            text-align: center;
        }

        #btn {
            background-color: yellow;
        }

    </style>
</head>
<body>
<table id="results">


    <input id="inputID" class="user" value="insert ID">
    <input id="inputFirstName" class="user" value="insert FirstName">
    <input id="inputLastName" class="user" value="insert LastName">
    <input id="inputFacultyNumber" class="user" value="insert FacultyNumber">
    <input id="inputGrade" class="user" value="insert Grade">
    <button id="btn">upload</button >

    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Faculty Number</th>
        <th>Grade</th>
    </tr>
</table>


<!--<script src="script.js"></script>-->

<script>

    loadStudents();
    function loadStudents() {

        const appKey = "kid_BJXTsSi-e";
        const baseUrl = "https://baas.kinvey.com/appdata/" + appKey + "/students";
        const username = "guest";
        const password = "guest";

        let authHeaders = {
            "Authorization": "Basic " + btoa(username + ":" + password),
            "Content-Type": "application/json"
        };

        getStudents();

        function getStudents() {
            $.get({
                url: baseUrl,
                headers: authHeaders
            })
                    .then(displayStudents)
                    .catch();

            function displayStudents(info) {
                let byid = info.slice(0);
                byid.sort(function (a, b) {
                    return a.ID - b.ID;
                });

                for (let student of byid) {
                    $("#results")
                            .append($("<tr>")
                                    .append($("<th>").text(student.ID))
                                    .append($("<th>").text(student.FirstName))
                                    .append($("<th>").text(student.LastName))
                                    .append($("<th>").text(student.FacultyNumber))
                                    .append($("<th>").text(student.Grade))
                            );
                }
            }
        }

        $("#btn").click(function () {
            let id = Number($('#inputID').val().trim());
            let firstName = $('#inputFirstName').val().trim();
            let lastName = $('#inputLastName').val().trim();
            let facultyNumber = $('#inputFacultyNumber').val().trim();
            let grade = Number($('#inputGrade').val().trim());

            $.post({
                url: baseUrl,
                headers: authHeaders,
                data: JSON.stringify({
                    ID: id,
                    FirstName: firstName,
                    LastName: lastName,
                    FacultyNumber: facultyNumber,
                    Grade: grade
                })
            }).then(del())
                    .then(location.reload(), alert("reloaded"))
                    .catch(alert("kur"))

        });

        function del() {

            $("#results tr:last").remove();
        }
    }
</script>
</body>
</html>
/////////////////////examPreparation//////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>
        #menu {
            background: #DDD;
            text-align: center;
            padding: 5px;
            line-height: 1.5;
            border-radius: 3px;
            overflow: auto;
        }

        #menu > #loggedInUser {
            float: right;
            margin-right: 10px;
        }

        #menu a {
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
        }

        a {
            text-decoration: none;
            padding-right: 10px;
        }

        #menu a:hover {
            background: #BBB;
        }

        main > section {
            /*display: none;*/
            padding: 20px 5px;
        }

        section h1 {
            margin: 10px 0px;
            font-size: 1.2em;
        }

        table th {
            background: #DDD;
            padding: 10px;
        }

        table td {
            padding: 5px 10px;
            background: #EEE;
        }

        #infoBox, #errorBox, #loadingBox {
            display: none;
            width: 80%;
            margin: 10px auto;
            color: white;
            text-align: center;
            padding: 5px;
            border-radius: 3px;
        }

        #loadingBox {
            background: #7CB3E9;
        }

        #infoBox {
            background: #393;
        }

        #errorBox {
            background: #F50;
        }

        footer {
            background: #DDD;
            padding: 5px 10px;
            font-size: 0.8em;
            text-align: center;
            border-radius: 3px;
        }

        #textAuthor, #textDescription {
            margin-bottom: 10px;
            background-color: white;
        }

        td a:hover {
            color: red;
        }
        #loggedInUser{
            max-width:100%;
            max-height:100%;
        }
    </style>

</head>
<body onload="start()">
<header id="menu">
    <a href="#" id="linkHome">Home</a>
    <a href="#" id="linkLogin">Login</a>
    <a href="#" id="linkRegister">Register</a>
    <a href="#" id="linkListBooks">List Books</a>
    <a href="#" id="linkCreateBook">Create Book</a>
    <a href="#" id="linkLogout">Logout</a>
    <span id="loggedInUser"  ></span>
</header>
<section id="loadingBox">Loading ...</section>
<section id="infoBox">Info</section>
<section id="errorBox">Error</section>

<section id="viewHome">
    <h1>Welcome</h1>
    Welcome to our book library.
</section>


<main>
    <section id="viewLogin">
        <h1>Please login</h1>
        <form id="formLogin">
            <div>Username:</div>
            <div><input type="text" name=
                    "username" required/></div>
            <div>Password:</div>
            <div><input type="password"
                        name="passwd" required/></div>
            <div><input type="submit" value="Login" id="buttonLoginUser"/></div>
        </form>
    </section>

    <section id="viewRegister">
        <h1>Please register here</h1>
        <form id="formRegister">
            <div>Username:</div>
            <div><input type="text" name=   "username" required/></div>
            <div>Password:</div>
            <div><input type="password" name="passwd" required/></div>
            <div>Picture URL:</div>
            <div><input type="text" name="image" required /></div>

            <div><input type="submit" value="Register" id="buttonRegisterUser"/></div>
        </form>
    </section>

    <section id="viewBooks">
        <h1>Books</h1>
        <div id="books">
            <table>
                <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Description</th>
                    <th>Actions</th>
                </tr>
                <tr>
                    <td>Book title</td>
                    <td>Book author</td>
                    <td>Book description</td>
                    <td>
                        <a href="#">[Delete]</a>
                        <a href="#">[Edit]</a>
                    </td>
                </tr>

            </table>
        </div>
    </section>

    <section id="viewCreateBook">
        <h1>Create new book</h1>
        <form id="formCreateBook">
            <div>Title:</div>
            <div><input type="text" name="title" required/></div>
            <div>Author:</div>
            <div><input type="text" name="author" required/></div>
            <div>Price:</div>
            <div><input type="text" name="price" required/>lv.</div>
            <div>Description:</div>
            <div><textarea name="descr" rows="10" required></textarea></div>
            <div><input type="submit" value="Create" id="buttonCreateBook"/></div>

        </form>
    </section>

    <section id="viewEditBook">
        <h1>Edit existing book</h1>
        <form id="formEditBook">
            <div><input type="hidden" name="id" required/></div>
            <div>Title:</div>
            <div><input type="text" name="title" required/></div>
            <div>Author:</div>
            <div><input type="text" name="author" required/></div>
            <div>Price:</div>
            <div><input type="text" name="price"/>lv.</div>
            <div>Description:</div>
            <div><textarea name="descr" rows="10"required></textarea></div>
            <div><input type=submit value="Edit" id="buttonEditBook"/></div>
        </form>
    </section>

    <section id="showSelected">
        <h3></h3>
        <div><input type="text" id="textAuthor" disabled></div>
        <div><textarea id="textDescription" rows="10" disabled></textarea></div>


    </section>

</main>

<footer>Book Library - Simple SPA Application</footer>


<script>
    function start() {

        sessionStorage.clear(); // Clear user auth data
        const kinveyBaseUrl = "https://baas.kinvey.com/";
        const kinveyAppKey = "kid_HkGYRtH7x";
        const kinveyAppSecret =
                "0aeea03501304ac3916d0b548db494e2";
        const kinveyAppAuthHeaders = {
            'Authorization': "Basic " +
            btoa(kinveyAppKey + ":" + kinveyAppSecret),
        };

        showHideMenuLinks();
        showView('viewHome');
        // Bind the navigation menu links
        $("#linkHome").click(showHomeView);
        // Bind the form submit actions
        $("#formLogin").submit(loginUser);

        function showHideMenuLinks() {
            $("#menu a").hide();
            if (sessionStorage.getItem("authToken")) {
                //logged in user
                $("#linkHome").show();
                $("#linkListBooks").show();
                $("#linkCreateBook").show();
                $("#linkLogout").show();
            }
            else {
                //no user logged
                $("#linkHome").show();
                $("#linkLogin").show();
                $("#linkRegister").show();
            }
        }

        function showView(viewName) {
            // Hide all views and show the selected view only
            $('main > section').hide();
            $('#' + viewName).show();
        }

        function showHomeView() {
            showView("viewHome")
        }

        function loginUser() {
            let userData = {
                username: $('#formLogin input[name=username]').val(),
                password: $('#formLogin input[name=passwd]').val()
            };
            if (userData.username !== "" && userData.password !== "") {
                $.ajax({
                    method: "POST",
                    url: kinveyBaseUrl + "user/" + kinveyAppKey + "/login",
                    headers: kinveyAppAuthHeaders,
                    data: userData,
                    success: loginSuccess,
                    error: handleAjaxError
                });
            } else {
                showError("Username AND Password should be filled")
            }

            function loginSuccess(userInfo) {

                saveAuthInSession(userInfo);
                showHideMenuLinks();
                listBooks();
                showInfo('login successful.');
            }
        }

        function showLoginView() {
            showView("viewLogin");
            $('#formLogin').trigger('reset');
        }

        function showRegisterView() {

            $('#formRegister').trigger('reset');
            showView('viewRegister');
        }

        function getKinveyUserAuthHeaders() {
            return {
                'Authorization': "Kinvey " +
                sessionStorage.getItem('authToken'),
            };
        }

        function listBooks() {
            $('#books').empty();
            showView('viewBooks');
            $.ajax({
                method: "GET",
                url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/books",
                headers: getKinveyUserAuthHeaders(),
                success: loadBooksSuccess,
                error: handleAjaxError
            });

            function loadBooksSuccess(books) {

                $('#books').empty();
                showInfo('Books loaded.');
                if (books.length == 0) {
                    $('#books').text('No books in the library.');
                } else {
                    let table = $(`
                             <table>
                                   <tr>
                                      <th>Title</th>
                                      <th>Author</th>
                                      <th>Description</th>
                                      <th>Price</th>
                                      <th>Actions</th>
                                   </tr>
                             </table>`);
                    for (let book of books) {
                        let tr = $("<tr>");
                        displayTableRow(tr, book);
                        table.append(tr);
                    }
                    $('#books').append(table);//
                }
            }

            function displayTableRow(tr, book) {

                let links = [$("<a href='#'>more</a>")
                        .click(function () {
                            showMoreOfSelected(book)
                        }), " "];
                if (book._acl.creator == sessionStorage.getItem("userId")) {

                    let deleteLink = $("<a href='#'>delete</a>")
                            .click(function () {
                                let x;
                                if (confirm("are you sure you want to delete this?") == true) {
                                    deleteBookById(book._id)
                                }


                            });
                    let editLink = $("<a href='#'>edit</a>")
                            .click(function () {
                                loadBookForEdit(book._id)
                            });
                    links.push(deleteLink);
                    links.push(" ");
                    links.push(editLink);
                }

                tr.append(
                        $("<td>").text(book.book),
                        $("<td>").text(book.author),
                        $("<td>").text(book.description),
                        $("<td>").text(book.price),
                        $("<td>").append(links)
                )
            }
        }

        function showMoreOfSelected(book) {
            $("#showSelected h3").text(book.book)
            $("#textAuthor").val(book.author)
            $("#textDescription").text(book.description)
            showView('showSelected');

        }

        function deleteBookById(bookId) {
            $.ajax({
                method: "DELETE",
                url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/books/" + bookId,
                headers: getKinveyUserAuthHeaders(),
                success: deleteBooksSuccess,
                error: handleAjaxError
            });
            function deleteBooksSuccess() {
                showInfo("book deleted")
                listBooks();
            }
        }

        function showCreateBookView() {
            $('#formCreateBook').trigger('reset');
            showView('viewCreateBook');
        }

        function logoutUser() {
            sessionStorage.clear();
            $('#loggedInUser').text("");
            showHideMenuLinks();
            showView('viewHome');
            showInfo('Logout successful.');
        }

        function registerUser() {
            setTimeout(function(){ }, 3000);
            let userData = {
                username: $('#formRegister input[name=username]').val(),
                password: $('#formRegister input[name=passwd]').val(),
                profilePicture:$('#formRegister input[name=image]').val()
            };
            if (userData.username !== "" && userData.password !== "") {

                $.ajax({
                    method: "POST",
                    url: kinveyBaseUrl + "user/" + kinveyAppKey + "/",
                    headers: kinveyAppAuthHeaders,
                    data: userData,
                    success: registerSuccess,
                    error: handleAjaxError
                });
            } else {
                showError("Username AND Password should be filled")
            }

            function registerSuccess(userInfo) {

                saveAuthInSession(userInfo);
                showHideMenuLinks();
                listBooks();
                showInfo('User registration successful.');
            }
        }

        function saveAuthInSession(userInfo) {
            sessionStorage.setItem('authToken', userInfo._kmd.authtoken);
            sessionStorage.setItem('userId', userInfo._id);

            let username = userInfo.username;
            $('#loggedInUser')
                    .text("Welcome, " + username + "!")
                    .append( $("<img>").attr("src",userInfo.profilePicture))


        }

        function handleAjaxError(response) {
            let errorMsg = JSON.stringify(response);
            if (response.readyState === 0)
                errorMsg = "Cannot connect due to network error.";
            if (response.responseJSON &&
                    response.responseJSON.description)
                errorMsg = response.responseJSON.description;
            showError(errorMsg);
        }

        function showInfo(message) {
            $('#infoBox').text(message);
            $('#infoBox').show();
            setTimeout(function () {
                $('#infoBox').fadeOut();
            }, 2000);
        }

        function showError(errorMsg) {
            $('#errorBox').text("Error: " + errorMsg);
            $('#errorBox').show();
        }

        function createBook() {
            let bookData = {
                book: $('#viewCreateBook input[name=title]').val(),
                author: $('#viewCreateBook input[name=author]').val(),
                description: $('#viewCreateBook textarea[name=descr]').val(),
                price: $('#viewCreateBook input[name=price]').val()
            };


            if (bookData.book !== "" && bookData.author !== "" && bookData.description !== "" && bookData.price !== "") {

                $.ajax({
                    method: "POST",
                    url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/books",
                    headers: getKinveyUserAuthHeaders(),
                    data: bookData,
                    success: bookCreateSuccess,
                    error: handleAjaxError
                });
            } else {
                showError("Title,Author Description AND Price should be filled!")
            }

            function bookCreateSuccess() {
                showHideMenuLinks();
                listBooks();
                showInfo('book added successfully.');
            }
        }

        function loadBookForEdit(bookId) {
            $.ajax({
                method: "GET",
                url: kinveyBookUrl = kinveyBaseUrl + "appdata/" +
                        kinveyAppKey + "/books/" + bookId,
                headers: getKinveyUserAuthHeaders(),
                success: loadBookForEditSuccess,
                error: handleAjaxError
            });

            function loadBookForEditSuccess(book) {
                $('#formEditBook input[name=id]').val(book._id);
                $('#formEditBook input[name=title]').val(book.book);
                $('#formEditBook input[name=author]').val(book.author);
                $('#formEditBook input[name=price]').val(book.price);
                $('#formEditBook textarea[name=descr]').val(book.description);
                showView('viewEditBook');
            }
        }

        function editBook() {
            let bookData = {
                book: $('#formEditBook input[name=title]').val(),
                author: $('#formEditBook input[name=author]').val(),
                price: $('#formEditBook input[name=price]').val(),
                description: $('#formEditBook textarea[name=descr]').val()
            };
            console.dir(bookData)
            if (bookData.book !== "" && bookData.author !== "" && bookData.description !== "" && bookData.price !== "") {
                $.ajax({
                    method: "PUT",
                    url: kinveyBaseUrl + "appdata/" + kinveyAppKey +
                    "/books/" + $('#formEditBook input[name=id]').val(),
                    headers: getKinveyUserAuthHeaders(),
                    data: bookData,
                    success: editBookSuccess,
                    error: handleAjaxError
                });

            } else {
                showError("Title,Author Description AND Price should be filled!")
            }

                function editBookSuccess(response) {
                    alert("sux")
                    listBooks();
                    showInfo('Book edited.');
                }
            }

        // Bind the navigation menu links
        $("#linkHome").click(showHomeView);
        $("#linkLogin").click(showLoginView);
        $("#linkRegister").click(showRegisterView);
        $("#linkListBooks").click(listBooks);
        $("#linkCreateBook").click(showCreateBookView);
        $("#linkLogout").click(logoutUser);
        // Bind the form submit buttons
        $("#buttonLoginUser").click(loginUser);
        $("#buttonRegisterUser").click(registerUser);
        $("#buttonCreateBook").click(createBook);
        $("#buttonEditBook").click(editBook);
        // Bind the info / error boxes: hide on click
        $("#infoBox, #errorBox").click(function () {
            $(this).fadeOut();
        });
        // Attach AJAX "loading" event listener
        $(document).on({
            ajaxStart: function () {
                $("#loadingBox").show()
            },
            ajaxStop: function () {
                $("#loadingBox").hide()
            }
        });
        $("form").submit(function (e) {
            e.preventDefault()
        });
    }
</script>
</body>
</html>
//////////////////////////////selfPreparation//////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body onload="start()">
<header id="header">
    <a href="#" id="linkHome">Home</a>
    <a href="#" id="linkLogin">Login</a>
    <a href="#" id="linkRegister">Register</a>
    <a href="#" id="linkAddClub">Add club</a>
    <a href="#" id="linkDisplayClubs">Show Clubs</a>
    <a href="#" id="linkLogout">logout</a>
    <span id="welcome" style="float: right"></span>
</header>


<section id="sectionHome">
    Tell us what's your favorite football team and why.
</section>

<h1 id="infoDiv"></h1>

<main id="main">
    <section id="sectionLogin">
        <form id="viewLogin">
            <div>Your name:<input type="text" class="in" id="nameLogin"></div>
            <div>Password:<input type="password" class="in" id="passwordLogin"></div>
            <button type="submit" id="btnLogin">Login</button>
        </form>
    </section>

    <section id="sectionRegister">
        <form id="viewRegister">
            <div>Your name:<input type="text" class="in" id="nameRegister"></div>
            <div>Password:<input type="password" class="in" id="passwordRegister"></div>
            <div>Confirm Password:<input type="password" class="in" id="confirmPasswordRegister"></div>
            <button type="submit" id="btnRegister">Register</button>
        </form>
    </section>

    <section id="sectionAddClub">
        <form id="viewAddClub">
            <div>Club:<input type="text" class="in" id="addClub"></div>
            <div>Country:<input type="text" class="in" id="addCountry"></div>
            <div style="display: inline ;">Why You Support It?</div>
            <textarea id="addDescription"></textarea>
            <button type="submit" id="btnAddClub">Add</button>
        </form>
    </section>

    <section id="sectionEditClub">
        <form id="viewEditClub">
            <div>Club:<input type="text" class="in" id="editClub"></div>
            <div>Country:<input type="text" class="in" id="editCountry"></div>
            <div style="display: inline ;">Why You Support It?</div>
            <textarea id="editDescription"></textarea>
            <button type="submit" id="btnEditClub">Edit Changes</button>
        </form>
    </section>

    <section id="sectionShowClubs">
        <form id="viewShowClubs">
            <div id="teams">

            </div>
        </form>
    </section>

    <section id="sectionLogout">
        <form id="viewLogout">

        </form>
    </section>
</main>

<footer>
    No rights reserved.YOSIFOV 2016
</footer>

<script>
    function start() {
        sessionStorage.clear(); // Clear user auth data
        const kinveyBaseUrl = "https://baas.kinvey.com/";
        const kinveyAppKey = "kid_HJOa7qYQe";
        const kinveyAppSecret = "b5c713f9f48d4c18bb617636726127a0";
        const kinveyAppAuthHeaders = {
            'Authorization': "Basic " +
            btoa(kinveyAppKey + ":" + kinveyAppSecret),
        };
        showHideHeaders();

        function showHideHeaders() {
            clearAll();
            if (sessionStorage.getItem("authToken")) {
                $("#linkAddClub").show();
                $("#linkDisplayClubs").show();
                $("#linkLogout").show();
                $("#linkRegister").hide();
                $("#linkLogin").hide();
            }
            else {
                $("#linkAddClub").hide();
                $("#linkDisplayClubs").hide();
                $("#linkLogout").hide();
                $("#linkRegister").show();
                $("#linkLogin").show();
            }
        }

        function clearAll() {
            $("#sectionRegister").hide();
            $("#sectionLogin").hide();
            $("#sectionLogout").hide();
            $("#sectionAddClub").hide();
            $("#sectionShowClubs").hide();
            $("#sectionEditClub").hide();
        }

        function info(message) {
            $("#sectionHome").append($("<h1>").text(message))
            setTimeout(function () {
                $("#sectionHome").find("h1").fadeOut();
            }, 2000)
        }

        function auth(userData) {
            sessionStorage.setItem("authToken", userData._kmd.authtoken);
            sessionStorage.setItem("userId", userData._id)
        }

        //::::::KINVEY RELATED:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

        function registerUser() {
            let confirm = $("#confirmPasswordRegister").val()
            let userData = {
                username: $("#nameRegister").val(),
                password: $("#passwordRegister").val()
            }
            if (userData.username == "" || userData.password == "" || confirm == "") {
                info("All fields Should be Filled!");
            }
            else if (userData.password !== confirm) {
                info("Password Don't Match")
            }
            else {
                $.ajax({
                    method: "POST",
                    url: kinveyBaseUrl + "user/" + kinveyAppKey,
                    headers: kinveyAppAuthHeaders,
                    data: userData,
                    success: successReg,
                    error: errorHandler
                })
            }

            function successReg(userData) {
                clearAll();
                $("#confirmPasswordRegister").val('')
                $("#nameRegister").val(''),
                        $("#passwordRegister").val('')
                $("#welcome").text("Welcome, " + userData.username + "!")
                info("Registration Succesful");
                auth(userData);
                showHideHeaders();
                viewDisplay();
            }

        }

        function loginUser() {
            let userData = {
                username: $("#nameLogin").val(),
                password: $("#passwordLogin").val()
            }
            if (userData.username == "" || userData.password == "") {
                info("All fields Should be Filled!");
            }
            else {
                $.ajax({
                    method: "POST",
                    url: kinveyBaseUrl + "user/" + kinveyAppKey + "/login",
                    headers: kinveyAppAuthHeaders,
                    data: userData,
                    success: successLogin,
                    error: errorHandler
                })
            }
            function successLogin(userData) {
                clearAll();
                $("#welcome").text("Welcome, " + userData.username + "!")
                info("Login Succesful");

                $("#nameLogin").val(""),
                        $("#passwordLogin").val("")
                auth(userData);
                showHideHeaders();
                viewDisplay();
            }
        }

        function addClub() {
            let userData = {
                team: $("#addClub").val(),
                country: $("#addCountry").val(),
                description: $("#addDescription").val()
            }
            if (userData.team == "" || userData.country == "" || userData.description == "") {
                info("All fields Should be Filled!");
            }
            else {
                $.ajax({
                    method: "POST",
                    url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams",
                    headers: {
                        "authorization": "Kinvey " + sessionStorage.getItem("authToken")
                    },
                    data: userData,
                    success: successAdd,
                    error: errorHandler
                })
            }

            function successAdd(userdata) {

                $("#addClub").val(""),
                        $("#addCountry").val(""),
                        $("#addDescription").val("")
                info("Team Added");
                clearAll();
                viewDisplay();
            }
        }

        function errorHandler(error) {
            info(error.responseJSON.error)
        }

        //::::::VIEWS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

        function viewLogin() {
            $("#sectionLogin").show()
        }

        function viewRegister() {
            $("#sectionRegister").show()
        }

        function viewAddClub() {
            $("#sectionAddClub").show();
        }

        function viewDisplay() {
            $.ajax({
                method: "GET",
                url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams",
                headers: {
                    "authorization": "Kinvey " + sessionStorage.getItem("authToken")
                },

                success: successDisplay,
                error: errorHandler
            })

            function successDisplay(userData) {
                $("#teams").empty();
                $("#teams")
                        .append(
                                $("<table>"),
                                $("<tr>"),
                                $("<th>").text("Club"),
                                $("<th>").text("Country"),
                                $("<th>").text("description")
                        )
                for (team of userData) {
                    let a = $("<tr>");
                    aa(a, team);
                    $("#teams").append(a);
                    function aa(a, team) {
                        a.append(
                                $("<tr>"),
                                $("<td>").text(team.team),
                                $("<td>").text(team.country),
                                $("<td>").text(team.description)
                        )
                        if (sessionStorage.getItem("userId") == team._acl.creator) {
                            a.append(
                                    $("<button>").text("delete").click(function () {
                                        let x;
                                        if (confirm("are you sure you want to delete this?") == true) {
                                            deleteTeam(team._id)
                                        }


                                    }), $("<button>").text("edit").click(function () {
                                        editTeam(team)
                                    })
                            )
                        }
                    }
                }
                $("#sectionShowClubs").show()
            }
        }

        function deleteTeam(teamId) {
            $.ajax({
                method: "DELETE",
                url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams/" + teamId,
                headers: {
                    "authorization": "Kinvey " + sessionStorage.getItem("authToken")
                },
                success: successDelete,
                error: errorHandler
            })

            function successDelete() {
                info("Team Deleted");
                clearAll();
                viewDisplay();
            }
        }

        function editTeam(team) {
            clearAll();
            $("#sectionEditClub").show();
            $("#editClub").val(team.team),
                    $("#editCountry").val(team.country),
                    $("#editDescription").val(team.description)
            $("#btnEditClub").click(function () {
                let userData = {
                    team: $("#editClub").val(),
                    country: $("#editCountry").val(),
                    description: $("#editDescription").val()
                }
                if (userData.team == "" || userData.country == "" || userData.description == "") {
                    info("All fields Should be Filled!");
                }
                else {
                    $.ajax({
                        method: "PUT",
                        url: kinveyBaseUrl + "appdata/" + kinveyAppKey + "/teams/" + team._id,
                        headers: {
                            "authorization": "Kinvey " + sessionStorage.getItem("authToken")
                        },
                        data: userData,
                        success: successEdit,
                        error: errorHandler
                    })
                }
            });
        }

        function successEdit() {
            info("Edit Successful!")
            clearAll();
            viewDisplay();
        }

        //::::::BUTTONS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

        $("#linkHome").click(function () {
            clearAll();

        });
        $("#linkLogin").click(function () {
            clearAll();
            viewLogin();
        });
        $("#linkRegister").click(function () {
            clearAll();
            viewRegister()
        });
        $("#linkAddClub").click(function () {
            clearAll()
            viewAddClub();
        });
        $("#linkDisplayClubs").click(function () {
            clearAll();
            viewDisplay();
        });
        $("#linkLogout").click(function () {
            sessionStorage.clear()
            $("#welcome").text("")
            showHideHeaders();

            info("Logout Succesful");
        })

        $("#btnRegister").click(registerUser);
        $("#btnLogin").click(loginUser);
        $("#btnAddClub").click(addClub);
    }
</script>
</body>
</html>