Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Electric Cars</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <style>
            #FixedNavbar{
                position: fixed;
                top: 10px;
                right: 960px;
              }

            .mybutton1{
                position: fixed;
                bottom: 45px;
                right: 80px;
                border-radius: 70%;
              }

            body{
                background-color:#626262;
            }

            #navbar li {
                display: inline;
                padding-right: 30px;
            }
        </style>
    </head>
    <body>

        <pre>

        </pre>

        <div class="container FixedNavbar">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navbar-sus">
                <a class="navbar-brand" href="#" style=" padding-right: 250px"  id="link-home">Electric cars</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                  <ul class="navbar-nav">
                        <li class="nav-item active" style=" padding-right: 250px">
                            <a class="nav-link" href="#" id="link-info">Info </a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Cars
                          </a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="lista-masini">
                            <a class="dropdown-item" href="#">Tesla Model X</a>
                            <a class="dropdown-item" href="#">VW e-Golf</a>
                            <a class="dropdown-item" href="#">BMW i8</a>
                            <a class="dropdown-item" href="#">Audi e-tron</a>
                            <a class="dropdown-item" href="#">Porsche Mission E</a>
                          </div>
                        </li>
                  </ul>
                </div>
            </nav>
        </div>
        <div class="container" id="home-page">
            Home
        </div>
        <div class="container" id="info-page">
            Info
        </div>
        <div class="container" id="info-masina">
            <h1 id="titlu-masina">sdfsdrf</h1>
            <p id="container-masina"> this is the full text about the car </p>
        </div>
        <script>
            var lista= [];
            $(document).ready(function(){
                $("#btn-stil").click(function(e){
                   if ($(this).data("tip") == 0)
                   {
                        $(this).data("tip", 1);
                        $(this).html("Dark");
                        $("#navbar-sus").removeClass("bg-dark");
                        $("#navbar-sus").removeClass("navbar-dark");
                        $("#navbar-sus").addClass("bg-light");
                        $("#navbar-sus").addClass("navbar-light");
                        $("body").css("background-color","#d6d6d6");
                   }
                   else
                   {
                        $(this).data("tip", 0);
                        $(this).html("Light");
                        $("#navbar-sus").addClass("bg-dark");
                        $("#navbar-sus").addClass("navbar-dark");
                        $("#navbar-sus").removeClass("bg-light");
                        $("#navbar-sus").removeClass("navbar-light");
                        $("body").css("background-color","#626262");
                   }
                });

                $("#link-home").click(function(e){
                    $("#home-page").hide();
                    $("#info-page").hide();
                    $("#info-masina").hide();
                    $("#home-page").fadeIn();
                });

                $("#link-info").click(function(e){
                    $("#home-page").hide();
                    $("#info-page").hide();
                    $("#info-masina").hide();
                    $("#info-page").fadeIn();
                });

                $("#link-home").click();

                $.getJSON("json/data.json", {}, function(data){
                    lista = data.lista;
                    //console.log(data);
                    var t = '';
                    for(var i = 0 ; i < lista.length ; i ++)
                    {
                        t += `<a href="#" class="dropdown-item" data-index="${i}" >${lista[i].titlu}</a>`;

                    }
                    $("#lista-masini").html(t);

                    $("#lista-masini a").click(function(event){
                        event.preventDefault();
                        var index = $(this).data("index");
                        console.log(lista[index]);
                        $("#home-page").hide();
                        $("#info-page").hide();
                        $("#info-masina").hide();

                        $("#titlu-masina").html(lista[index].titlu);

                        $("#info-masina").fadeIn();
                    });
                }).fail(function(x,s,t){
                    console.log(s);
                });
            });
        </script>

        <button id="btn-stil" data-tip="0" class="btn btn-dark mybutton1">+</button>

    </body>
</html>