Rhodes

In this example below you will see how to do a Rhodes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Userrrfriendly, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Userrrfriendly ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Rhodes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
    <link rel="stylesheet" href="style.css">
    <title>#greek Udacity Team Project</title>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lakki+Reddy|Ubuntu" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet">
  </head>

  <body>

      <div class="wrap">
    <h1 class='text-center header mb-2 pb-1'>Welcome to the <strong>#Greek-Team Udacity</strong> Travelling Card Project </h1>
    <div class='container-fluid'>
      <div class='row'>
        <div class='col-md-2'>
          <!-- <button id='xyButton' type="button" class="btn btn-success">Get Coordinates<br> from map</button> -->
          <!-- start of sidemenu -->
            <nav class="nav flex-column nav-pills">
                <a class="nav-link text-center" id='xyButton' href="#">Get Coordinates From Map</a>
                <li class="nav-item dropdown text-center">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Change Skin</a>
                    <div class="dropdown-menu">
                      <a class="dropdown-item disabled" href="#">summer</a>
                      <a class="dropdown-item disabled" href="#">winter</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Default Skin</a>
                    </div>
                  </li>
                <a class="nav-link text-center" href="about.html">About</a>
                <a id="toggleContributorsBtn" class="nav-link text-center" href="#">List of Contributors</a>
            </nav>
            <hr>
            <ul id="listOfContributors" class="list-group text-center hidden">
                <button class="btn btn-light up"><i class="fas fa-arrow-circle-up"></i></button>
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li>
                <button class="btn btn-light down mb-1"><i class="fas fa-arrow-circle-down"></i></button>
            </ul>
          <!-- /end of sidemenu -->
        </div>
        <div class='col-md-6'>
            <div class='mx-auto' id="mapid"></div>
        </div>
        <!-- Default Style Card -->
        <div id='defaultCard' class='col-md-4'>
          <div class="card mx-auto  bg-warning mb-3 text-center" style="width: 20rem;">
            <img class="card-img-top" id='cardImage' src="./img/udacity.png" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title" id='cardTitle'>Travelling Card Project</h4>
                <p class="card-text" id = 'cardText'>This is an open source project made by students of <a href='https://www.udacity.com/google-scholarships'>Google Udacity Developer Challenge</a>: Web Developer Path. The idea was conceived by students from the #greek slack channel. The purpose of this project is to further develop our skills by contributing to this project ;P. <br> Click on a marker on the map to expand the Information Card!<br> You can contribute to this Open Source project on <a href='https://github.com/Userrrfriendly/Udacity_Travel_Trade_Cards' target='blank'>GitHub</a></p>
              </div>
            </div>
        </div>
        <!-- end  Default Style -->
        
        <!-- Start Animal Card -->
<div id="styling" class="card mb-4 col-md-4 virginiasverkiouwfi" style="display: block;">
            <h2 class="card-title">Rhodes</h2>
            <img class="card-img" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Sunrise_at_the_Island_of_Rhodes%2C_Greece.jpg" alt="#">
            <div class="card-body">
              <h3 class="card-subtitle"><div class="note1">The 4th largest island of Greece!</div><div class="note2">Rhodes is a "must" if you want to visit Greece! It has a lot of different destinations that include sightseeing, historical statues and more..! The most popular places to visit are:</div></h3>
              <ul class="card-list-group">                
                <li><span class="card-list-group-item">x: </span>The Palace of the Grand Master in the Old Town</li>
                <li><span class="card-list-group-item">y: </span>Lindos</li>
                <li><span class="card-list-group-item">z: </span>Ialissós</li>
                <li><span class="card-list-group-item">x: </span>The area of Petaloúdes</li>
              </ul>
              <p class="card-text"><em>One extra tip:</em> You can take the boat and visit the beautiful island Symi, to discover its wonderful beaches!</p>
            </div><!-- /.card-body -->
        </div>

        <!-- /End Animal Card  -->
        
     

    </div> <!--end row  -->
    </div> <!--end container  -->
    </div>
    <div id="footer">
        <span>Greek-Team Udacity - Front-end Developer Challenge 2017</span>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- <script
  src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>
    <!-- my Script -->
    <script src='app.js'></script>

</body>
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Userrrfriendly/rhodes-YeWwNX */
#mapid {
    height: 100%;
    min-height: 40em;
    /* max-height:600px;  */
}
#styling {
/*     display:none; */
}

#defaultCard {
  display:none;
}

.header {
    font-family: monospace;
    background-color: #3f7aa2;
    color: #fff;
    font-size: 28px;
}

body {
    background-color: #f5f5f5;
}

.hidden {
    display: none;
}

.list-group-item:hover {
    cursor: pointer;
}

/******************
Default Styles
************************/
  /* Bootstrap Card styling overide */

  .card {
    background-color: #fff;
    background-clip: border-box;
    border: none;
  }

  .card-body {
    padding: 0; /* changed */
  }

  .card-title {
    margin-bottom: 0; /* changed */
  }

  .card-subtitle {
    margin-top: 0; /* changed */
    margin-bottom: 0;
  }

  .card-link:hover {
    text-decoration: none;
  }

  .card-link + .card-link {
    margin-left: 0; /* changed */
  }

  .card-img {
    width: 100%;
    /* border-radius: 0; changed */
  }

  ul {
    margin-top: 0;
    margin-bottom: 0; /* changed */
  }

  /* Number of columns for different screen widths */

  @media (min-width: 576px) {
      .card-columns {
          -webkit-column-count: 1;
          -moz-column-count: 1;
          column-count: 1;
      }
     
        #fotter {
          height: 10px;
        }
      
  }

  @media (min-width: 768px) {
      .card-columns {
          -webkit-column-count: 2;
          -moz-column-count: 2;
          column-count: 2;
      }
  }

  @media (min-width: 992px) {
      .card-columns {
          -webkit-column-count: 3;
          -moz-column-count: 3;
          column-count: 3;
      }
  }

  /* Making any card linkable without changing the styling, please don't change */

  .card-switch {
  color: inherit;
  text-decoration: none;
  }

  .card-switch:hover {
  color: inherit;
  text-decoration: none;
  }

  .card-switch {
  color: inherit;
  text-decoration: none;
  }

  .card-switch:hover {
  color: inherit;
  text-decoration: none;
  }

  @media screen and (max-width: 769px) {
      .card {
          margin-top: 5em;
      }
      #mapid {
        margin-top: 2em;
      }
  }

  nav a, ul li {
      color: #242021;
  }
  /*****  scss overrides  *****/
  nav a:hover, dropdown-item:hover, ul li.list-group-item:hover {
    background-color: #242021 !important;
    color: #fff !important;
 }

  .bg-warning {
      background-color: #fff !important;
  }

  .nav-pills .show > .nav-link {
      background-color: #242021 !important;
  }

  .header {
      padding: 20px 0px !important;
  }

  .nav {
      background-color: #fff;
      border-radius: 4px;
  }

  .card-block {
      background: #fff;
      padding: 20px 20px;
      text-align: justify;
  }

  #footer {
      height: 30px;
      background-color: #2b516b;
      color: #fff;
      text-align: center
  }

  .wrap {
    min-height: calc(100vh - 30px);
  }

 /********************************** Card Styles ***************************/

/* .ThomasZ {
  font-family: 'Great Vibes', black, cursive;
  border-radius: 15px;
  padding: 10px 15px;
  border: 1px solid black;
  background-image: url("https://n6-img-fp.akamaized.net/free-photo/grunge-paper-background_1048-6689.jpg?size=338&ext=jpg");
  box-shadow: 5px 7px 20px #dda04f;
}

.ThomasZ .card-title {
  font-family: "Times New Roman", Times, serif;
  margin: 1em 0;
  padding:10px;
  text-align: center;
  font-size: 30px;
  border-radius: 5px;
  box-shadow: 0px 2px 15px black;
  color:black;
  text-shadow: 2px 2px 10px #dda04f;
  background: url("https://image.freepik.com/free-photo/grunge-paper-background_1048-6689.jpg");
}

.ThomasZ img.card-img {
  border-radius: 5px;
  box-shadow: 0px 0px 15px #fcb455;
}

.ThomasZ .card-body {
  background: url("https://image.freepik.com/free-photo/grunge-paper-background_1048-6689.jpg");
  margin: 25px 0;
  padding: 8px;
  font-size: 20px;
  font-weight: 500;
  text-shadow: 2px 2px 10px #dda04f;
  line-height: 1.2em;
  box-shadow: 0px 2px 15px black;
}

.ThomasZ .card-subtitle {
  text-align: center;
  font-size: 24px;
  font-family: "Times New Roman", Times, serif;
}

.ThomasZ .card-link {
 display: none;
} */

/* Chalkidiki, Afytos 3 */
.ThomasZ {
  border-radius: 15px;
  padding: 10px 15px;
  background-color: #ccf2ff ;
}

.ThomasZ .card-title {
  font-family: "Comic Sans MS", cursive, sans-serif;
  margin: 15px;
  padding: 0;
  text-align: center;
  font-size: 30px;
}

.ThomasZ img.card-img {
  border-radius: 5px;
}

.ThomasZ .card-body {
  margin: 25px 0;
  padding: 8px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2em;
}

.ThomasZ .card-subtitle {
  text-align: center;
  font-size: 20px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-style: italic;
}

.ThomasZ .card-link {
 display: none;
}
.ThomasZ ul {
  display: none;
}


/************************
*****CUSTOM STYLES*******
************************/
.customcard {
 display:none; 
}
/* ntina_t - Tsarvouli Konstantina - KAVALA */
.ntina_t .place-card{
  font-family: 'Raleway', sans-serif;
  padding: 0 10px 10px 10px;
  /* width:310px; */
  border-radius: 7px 7px 7px 7px;
  -webkit-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
background-image:url("./img/backGroundImages/Trikalaclocktower.jpg");
   background-attachment: fixed;
	/* background-position:center; */
	background-repeat: no-repeat;
	background-size:cover;
	overflow: auto;
}
.ntina_t .details{
  border-radius: 25px;
  padding:1px;
  border:1px solid #9f9f9f;
  padding: 0 10px 10px 10px;
  margin-top: 15px;
  vertical-align: top;
  border-radius:0 0 1em 1em;
  font-size:15px;
  color:#364b4a;
 background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(246,246,246,0.64) 47%, rgba(237,237,237,0.24) 100%);
}
.ntina_t .polaroid {
  position: relative;
  /* width: 220px; */
}
.ntina_t h2{
 text-align: center;
 font-weight: bold;
 color: #0e2b3c;
 font: 400 50px/1'Kaushan Script', cursive;
}
.ntina_t .polaroid img {
  padding: 20px; 
  /* width: 290px;
  height: 200px;  */
  padding:2px;
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
.ntina_t .italic{
  font-style: italic;
}
.ntina_t span {
	font-weight: bold;
  font-family: 'Raleway', sans-serif;
  color:#77804f ;
}
.ntina_t ul {
  color:#364b4a ;
  padding: 0;
  list-style-type: none;
}
/* samothraki */
.ntina_t2 .place-card{
  font-family: 'Raleway', sans-serif;
  padding: 0 10px 10px 10px;
  /* width:310px; */
  border-radius: 7px 7px 7px 7px;
  -webkit-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
background-image:url("./img/backGroundImages/Trikalaclocktower.jpg");
   background-attachment: fixed;
	/* background-position:center; */
	background-repeat: no-repeat;
	background-size:cover;
	overflow: auto;
}
.ntina_t2 .details{
  border-radius: 25px;
  padding:1px;
  border:1px solid #9f9f9f;
  padding: 0 10px 10px 10px;
  margin-top: 15px;
  vertical-align: top;
  border-radius:0 0 1em 1em;
  font-size:15px;
  color:#364b4a;
 background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(246,246,246,0.64) 47%, rgba(237,237,237,0.24) 100%);
}
.ntina_t2 .polaroid {
  position: relative;
  /* width: 220px; */
}
.ntina_t2 h2{
 text-align: center;
 font-weight: bold;
 color: #0e2b3c;
 font: 400 50px/1'Kaushan Script', cursive;
}
.ntina_t2 .polaroid img {
  padding: 20px; 
  /* width: 290px;
  height: 200px;  */
  padding:2px;
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
.ntina_t2 .italic{
  font-style: italic;
}
.ntina_t2 span {
	font-weight: bold;
  font-family: 'Raleway', sans-serif;
  color:#77804f ;
}
.ntina_t2 ul {
  color:#364b4a ;
  padding: 0;
  list-style-type: none;
}
 /* /ntina_t2 - Tsarvouli Konstantina - KAVALA */

.xrisaant .place-card{
  font-family: 'Raleway', sans-serif;
  padding: 0 10px 10px 10px;
  /* width:310px; */
  border-radius: 7px 7px 7px 7px;
  -webkit-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
  background-image:url("./img/backGroundImages/Trikalaclocktower.jpg");
   background-attachment: fixed;
	/* background-position:center; */
	background-repeat: no-repeat;
	background-size:cover;
	overflow: auto;

}

.xrisaant .details{
  border-radius: 25px;
  padding:1px;
  border:1px solid #9f9f9f;
  padding: 0 10px 10px 10px;
  margin-top: 15px;
  vertical-align: top;
  border-radius:0 0 1em 1em;
  font-size:15px;
  color:#364b4a;
 background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(246,246,246,0.64) 47%, rgba(237,237,237,0.24) 100%);
}


.xrisaant .polaroid {
  position: relative;
  /* width: 220px; */
}
 

.xrisaant h2{
 text-align: center;
 font-weight: bold;
 color: #0e2b3c;
 font: 400 50px/1'Kaushan Script', cursive;
}

.xrisaant .polaroid img {
  padding: 20px; 
  /* width: 290px;
  height: 200px;  */
  padding:2px;
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
.xrisaant .italic{
  font-style: italic;
}
.xrisaant span {
	font-weight: bold;
  font-family: 'Raleway', sans-serif;
  color:#77804f ;
}
.xrisaant ul {
  color:#364b4a ;
  padding: 0;
  list-style-type: none;
}
/* end xrisaant */
/*amorgos evigiannakou*/

.evigiannakou .card {
  width: 400px;
  margin: auto;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 6px;
  background-image: url('./img/backGroundImages/amorgosBG.jpg');
  background-size: 750px;
  opacity: 0.9;
  filter: alpha(opacity=40);
}

.evigiannakou img {
  margin: auto;
  display: block;
  width: 400px;
  height: 200px;
  padding: 10px;
  position: relative;
  border-radius: 18px;
}

.evigiannakou .item {
  font-weight: bold;
}

.evigiannakou .list {
  list-style-type: none;
  margin: auto;
  list-style-position: outside;
}

.evigiannakou .introduction {
  font-style: italic;
}

.evigiannakou .section {
  box-sizing: border-box;
  border: 2px solid #ff7f50;
  margin: auto;
  border-radius: 10px;
  border-spacing: 1px 1px;
  /* width: 400px; */
  padding: 6px;
  background-color: #f4d5a5;
  opacity: 0.8;
  position: relative;
  font-family: "Times";
}

.evigiannakou ul {
  margin: 0;
  padding: 0;
}
.evigiannakou .customcard {
  background-color: rgb(129, 9, 9) !important;
}

.evigiannakou .title {
  box-sizing: border-box;
  font-family: "Palatino Linotype";
  font-size: 40px;
  color: #1e8a9d;
  opacity: 0.9;
  text-align: center;
}
/* amorgos second card by evigiannakou2 */
.evigiannakou2 .card {
  width: 400px;
  margin: auto;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 6px;
  background-image: url('./img/backGroundImages/amorgosBG.jpg');
  background-size: 750px;
  opacity: 0.9;
  filter: alpha(opacity=40);
  
}

.evigiannakou2 img {
  margin: auto;
  display: block;
  width: 400px;
  height: 200px;
  padding: 10px;
  position: relative;
  border-radius: 18px;
}

.evigiannakou2 .item {
  font-weight: bold;
}

.evigiannakou2 .list {
  list-style-type: none;
  margin: auto;
  list-style-position: outside;
}

.evigiannakou2 .introduction {
  font-style: italic;
}


.evigiannakou2 .section {
  box-sizing: border-box;
  border: 2px solid #ff7f50;
  margin: auto;
  border-radius: 10px;
  border-spacing: 1px 1px;
  padding: 6px;
  background-color: #f4d5a5;
  opacity: 0.8;
  position: relative;
  font-family: "Times";
}

.evigiannakou2 ul {
  margin: 0;
  padding: 0;
}

.evigiannakou2 .title {
  box-sizing: border-box;
  font-family: "Palatino Linotype";
  font-size: 40px;
  color: #1e8a9d;
  opacity: 0.9;
  text-align: center;
}

/* thessaloniki Tagathag */
.Tagathag .mycard{
  /* width: 325px; */
  margin: auto;
  background: linear-gradient(black, blue);
  border-radius: 10px;
  box-shadow: 10px 10px 40px -4px rgba(0,0,0,0.75);
  /* height: auto; */
  padding: 0.5px 0 0.5px 0;
}

.Tagathag .heading{
 padding-left: 1em;
 padding-top: 1em;
 color: #fff;
 margin: 12.5px 0 1px 0;
 border: none;
}

.Tagathag img {
  /* width: 300px; */
  /* height: auto; */
  border: thin solid #d6d4d4;
  border-radius: 10px;
  /* margin: 12.5px; */
  display:block;
  
}

.Tagathag .info-border{
  border: thin solid #d6d4d4;
  padding: 0 1em 0 1em;
  margin: 0 12.5px 12.5px 12.5px;
  border-radius: 10px;
  background-color: #fff;
  height:300px;
  overflow:scroll;
}

.Tagathag #fact{
  font-style: italic;
  text-align: center;
}

.Tagathag ul {
  list-style-type: none;
  padding-left: 0;
}

.Tagathag span.list {
  font-weight: bold;
}
/*  κατερινα - συρος */
.kathrin023 {
  margin: 0 auto;
  max-width: 390px;
  font-family: Helvetica, sans-serif;
  border: 1px solid;
  padding: 25px;
  background-image: url('./img/backGroundImages/flow-blue-2.jpg');
  background-position: center;
  background-size: cover;
  box-shadow: 6px 6px 5px 0px #cecece;
}

.kathrin023 .card-title {
  font-weight: bold;
  font-size: xx-large;
  color: #fffffffa;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 11px;
  /* font-family: 'Ubuntu', sans-serif; */
}

.kathrin023 img.card-img {
    border-radius: 5px;
}
/* .kathrin023 .card-descripion {
  display:none;
} */

.kathrin023 .card-body {
  margin-top: 17px;
  line-height: 21px;
  border: 1px solid;
  padding: 25px;
  border-radius: 3px;
  background-color: #ffffff8f;
/*  text-align: left;
	line-height: 18px;
	font-size: small;
	border: 1px solid;*/
}

.kathrin023 .card-subtitle {
    font-size: medium;
    line-height: 21px;
    display:none;
/*    font-style: italic;
    margin: 0;*/
}
/*.kathrin023 span {
	font-weight: bold;
}*/
.kathrin023 ul {
  display:none;
}
/* DANIELMATZAKOS - PARTHENON danielmantzakos*/
/* .card */
.danielmantzakos {
	width: 300px;
	border-style: solid;
	border-color: #cecece;
	border-width: 1px;
	margin: 0px auto;
	padding: 10px;
	box-shadow: 7px 7px #e6e6e6;
}
.danielmantzakos .card-img {
  margin-bottom:1rem;
  margin-top:.5rem;
}
.danielmantzakos .card-subtitle{
  font-style: italic;
  font-size: 1rem;
}
.danielmantzakos .card-list-group-item{
	font-weight: bold;
}
.danielmantzakos ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.danielmantzakos .card-body{
	border-style: solid;
	border-color: #cecece;
	border-width: 1px;
	padding: 10px;
  text-align: justify;
}
/* .danielmantzakos img{
	padding-bottom: 10px;
	width: 300px;
} */
/* gfa61ga6dz6 George Alexandris  */
.gfa61ga6dz6 {
  padding: 5px;
  border: 1px solid white;
  border-radius: 10px;
  box-shadow: 0 0 5px 6px #ccc;
  background-image: url('./img/backGroundImages/glitter_background.jpg');
}

.gfa61ga6dz6 .card-title {
  font-family: 'Lato', sans-serif;
  padding-left: 5px;
  color: black;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.3em;
  margin: 1em 0;
}

.gfa61ga6dz6  img.card-img {
  border: 1px solid white;
  border-radius: 10px;
}

.gfa61ga6dz6  .card-body {
  margin-top: 5px;
  padding: 5px;
  border: 1px solid white;
  border-radius: 10px;
  background-color: #E0E0E0;
}

.gfa61ga6dz6  .card-subtitle {
  font-style: italic;
  font-size: 0.8em;
  margin: 1em 0;
}

.gfa61ga6dz6  .card-list-group {
  font-family: 'Catamaran', sans-serif;
  font-size: small;
  list-style-type: none;
  display: block;
  padding-left: 5px;
  padding-right: 5px;
  /* display: none; */
}

.gfa61ga6dz6  .card-list-group span {
  font-weight: bold;

}

.gfa61ga6dz6  .card-text {
  font-family: 'Catamaran', sans-serif;
  font-size: small;
  padding-left: 5px;
  padding-right: 5px;
  margin: 1em 0;
}

.gfa61ga6dz6  .card-link {
display: none;
}

/* Virginia Rhodes virginiasverkiouwfi*/
.virginiasverkiouwfi  {
  border: 2px solid #ffc45f;
  border-radius: 8px;
  max-width: 400px;
  /* width: 310px;
  height: 570px; */
  background-color: #ffc45f !important;
  box-shadow: 5px 2px #6b635b;
}

.virginiasverkiouwfi .card-title {
  margin-left: 110px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 30px;
}

.virginiasverkiouwfi img {
  max-width: 350px;
  max-height: 250px;
  margin-left: 5px;
  margin-top: 10px;
}

.virginiasverkiouwfi .note1 {
  margin-left: 48px;
  margin-top: 10px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.virginiasverkiouwfi .note2,
.virginiasverkiouwfi ul,
.virginiasverkiouwfi .card-text {
  margin-left: 13px;
  margin-top: 10px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.virginiasverkiouwfi span {
  display: none; 
}
/******************** Add your style here *******************************/
/* For example:

.your-udacityForumUserName {
  border: 1px solid #BEBEBE;
  padding:10px;
  background-color: #F0E68C;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.2)
}

.your-udacityForumUserName .card-title {
  font-family: "Times New Roman";
  font-size: 1.3em;
  margin: 1em 0;
}

.your-udacityForumUserName img.card-img {
  background: white;
}

.your-udacityForumUserName .card-body {
  margin-top: 5px;
  border:1px solid #D3D3D3;
  padding: 25px 10px;
  background-color: #f3eba5;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.2)
}

.your-udacityForumUserName .card-subtitle {
  font-family: "Times New Roman";
  font-style: italic;
  font-size: 0.9em;
}

*******************************************************************/
/* background correction class*/
.transparent-background {
  background-color:#fff0 !important;
}
/* media queries */
@media (min-width: 250px) {
  #footer {
    height: 50px;
  }
}
@media (min-width: 400px) {
  #footer {
    height: 30px;
  }
}

.summer {
  border: solid transparent;
  border-image: url("./img/border-image-5.png");
  border-image-slice: 12 12 12 12;
  border-image-width: 12px 12px 12px 12px;
  border-image-outset:0px;
  border-image-repeat: repeat;
  background: url("./img/summer_myrtos.jpg");
  /* no-repeat center: center fixed !important; */
  background-size: cover !important;
}
.winter{
background: url("img/winter_mountain.jpeg");
/* no-repeat center:center fixed !important; */
background-size: cover !important;
}

/* ABOUT PAGE */


/*Downloaded from https://www.codeseek.co/Userrrfriendly/rhodes-YeWwNX */
const mymap = L.map('mapid').setView([39.00496, 22.9248], 6);
const $styling = $('#styling');
const $defaultCard = $('#defaultCard');
const $listOfContributors = $('#listOfContributors');
const contributors = {};
const arrOfObjectsContributors = []; //arrayOfObjects - currently has no point of existance - probably will be removed
const arrOfContributors = [];
let contDropDownList =[]; // [ ['User Name',badge, 'data-foum-name','data-state']]; //array of arrays
let markers = {};
let defaultClass = 'default';
let xyOnClick = false;
const $pinButton = $('<button type="button" class="btn btn-outline-dark mb-1 mt-1">xalkidiki den exei</button>'); //currently has no point of existance - probably will be removed
const data = [
    //{
   //To add a new pin on the map (with default-bootstrap-style-card)
   //Uncomment the following lines and change the values
   // userName: 'Your Real Name', //not required but will probably added somewher in the page in a latter update
   // udacityForumUserName: "ThomasZ",
   // placeName: "Serres, Upper Poroia",
   // altPlaceName: "Σέρρες, Άνω Πορόια",
   // description: "this text goes for descritption.",
   // latLong:[43.285892, 22.035583],
   // imgUrl: "./img/placeholder.jpg",
   // country: "Greece"
   // styling: false
   //},
  {
    userName:'Veniamin Tsigourof',
    udacityForumUserName:'tsigourof_ben6oqe',
    placeName:'Thassos, Ancient Quarries',
    altPlaceName:'Αλυκή Θάσου, Αρχαία Λατομεία',
    description:'Alykes is a peninsula of archaeological interest where the ancient quarry of marble is situated. The quarry of marble was used from the ancient to byzantine years. If you happen to visit Thassos it is hard to miss Alykes, since right next to the archeological site rests one of the most popular beach of the island.',
    latLong:[40.60436,24.74364],
    imgUrl:'./img/thassos_aliki.jpg',
    country:'Greece',
    styling: false
  },
  {
    userName:'Veniamin Tsigourof',
    udacityForumUserName:'tsigourof_ben6oqe',
    placeName:'Patmos, Chora',
    altPlaceName:'Πάτμος, Χώρα',
    description:"Patmos is a small Greek island in the Aegean Sea, most famous for being the location of both the vision of and the writing of the Christian Bible's Book of Revelation.    On the highest point of the island is located the picturesque traditional settlement Chora and the Monastery of Saint John the Theologian which along with the Cave of the Apocalypse were declared World Heritage Sites by UNESCO in 1999. If you choose Patmos as your travel destination you will find crystal clear beaches, beautiful landscape, dozens of monasteries, and a sense of tranquility that surrounds the island like a magical veil.",
    latLong:[37.30903, 26.54765],
    imgUrl:'./img/patmos.jpg',
    country:'Greece',
    styling: false
  },
  {
    userName:'Veniamin Tsigourof',
    udacityForumUserName:'tsigourof_ben6oqe',
    placeName:'Mount Beshtau',
    altPlaceName:'Бештау',
    description:'Standing on top of the Beshtau Mountain gazing at the world from 1400 meters. Clouds above and clouds below, makes you feel like an Olympian God who lost his way.',
    latLong:[44.09749, 43.02235],
    imgUrl:'./img/beshtau.jpg',
    country:'Russia',
    styling: false
  },
  {
    userName: 'Thomas Zegos',
    udacityForumUserName: "ThomasZ",
    placeName: "Serres, Upper Poroia",
    altPlaceName: "Σέρρες, Άνω Πορόια",
    description: "Upper Poroia is a large settlement of Serres in Macedonia. It is built on the foot of Mount Belles northwest of Lake Kerkini. It 's an alternative and homely place for relaxion. Horseback riding and hiking are remarkable entertaining activities you couldn't lose.",
    latLong:[41.285892, 23.035583],
    imgUrl: "./img/Ano-Poroia.JPG", //"./img/Ano-Poroia.jpg", https://image.ibb.co/m1PiUR/Ano_Poroia.jpg
    country: "Greece",
    styling: false,
    custom:false
  },
  {
    userName: 'Thodoris Pliakas',
    udacityForumUserName: "theorios",
    placeName: "Volos",
    altPlaceName: "Βόλος",
    description: "Volos is the newest of the Greek port cities, built at the innermost point of the Pagasetic Gulf and at the foot of Mount Pilio (Pelion, the land of the Centaurs). It includes the municipal units of Volos, Nea Ionia and Iolkos, as well as smaller suburban communities.",
    latLong:[39.3630, 22.9408],
    imgUrl: "https://thumb.ibb.co/bY0ig6/volos.jpg",
    country: "Greece",
    styling: false
  },
  {
    userName: 'Athanasios Markou',
    udacityForumUserName: "TheLastMoikan",
    placeName: "Mytilene",
    altPlaceName: "Μυτιλήνη",
    description: "Mytilene is a city founded in 11th century BC, also it is the capital and port of island Lesbos. Mytilene is built on the southeast edge of the island and it is the seat of metropolitan bishop of the Orthodox church. The city has a port with ferries that serves some nearby islands and the mainland cities of Pireaus, Athens and Thessaloniki. Besides, there are more than 15 commercial producers that produce ouzo (an alcholic drink)." + '<hr>' + 'The town of Mytilene has a large number of neoclassical buildings, public and private houses. Some of them are the building of the Lesbos Prefecture, the old City Hall, the Experimental Lyceum and various mansions and hotels all over the town. The Baroque church of Saint Therapon dominates at the port with its impressive style.',
    latLong:[39.1041231, 26.5585513],
    imgUrl: "https://preview.ibb.co/mw4AeR/Mytilene.jpg",
    country: "Greece",
    styling: false
  },
    {
    userName: 'Thomas Zegos',
    udacityForumUserName: "ThomasZ",
    placeName: "Chalkidiki, Afytos",
    altPlaceName: "Χαλκιδική, Άφυτος",
    description: "Afytos is a village in Chalkidiki, northern Greece. It is one of the most beautiful places for vacation. You can take a lot of pictures near the sea, eat good seafood and of course, you can take a dip in the sea. And, if you 're lucky you will see dolphins, too. This place is highly recommended for couples.",
    latLong:[40.098651,23.436987],
    imgUrl: "./img/Afytos.jpg",
    country: "Greece",
    cardText: '',
    styling: true,
    customCard:false,
    cardList: [["",""],["",""],["",""],["",""]]
  },
    {
    userName: 'Christina-Angeliki Antoniou',
    udacityForumUserName: "xrisaant",
    placeName: "Trikala",
    altPlaceName: "Τρίκαλα",
    description: "Trikala (Greek: Τρίκαλα) is a city in northwestern Thessaly, Greece. The region of Trikala has been inhabited since prehistoric times, with the first indications of permanent settlement been uncovered in the cave of Theopetra, and dating back to approx. 49,000 BC!",
    latLong:[39.555634, 21.766896],
    imgUrl: "https://upload.wikimedia.org/wikipedia/commons/d/d7/Lithaiosrivertrikala.jpg",
    country: "Greece",
    styling: true,
    customCard:true
  },
   {
     userName: 'Anastasios Agathaggelou',  
     udacityForumUserName: "Tagathag",
     placeName: "Thessaloniki",
     altPlaceName: "Θεσσαλονίκη",
     description: "The city was founded around 315 BC by the King Cassander of Macedon, on or near the site of the ancient town of Therma and 26 other local villages. He named it after his wife Thessalonike, a half-sister of Alexander the Great and princess of Macedon as daughter of Philip II. Under the kingdom of Macedon the city retained its own autonomy and parliament and evolved to become the most important city in Macedon",
     latLong:[40.623156, 22.945599],
     imgUrl: "./img/thessaloniki.jpg",
     country: "Greece",
     styling: true,
     customCard:true
    },
    {
      userName: 'Eleni Nistikaki',
      udacityForumUserName: "elenica99426rl6",
      placeName: "Chania, Crete",
      altPlaceName: "Χανιά Κρήτη",
      description: "<strong>Crete is the place where Zeus, king of gods, was born!</strong><br>Since the ancient times, the city of Chania has faced many conquerors and the influences of many civilizations through time, evident on the city monuments. The beautiful city of Chania managed to preserve its original colors and historical character, despite the fast-growing tourist industry. It is considered as one of the most beautiful cities of Greece and the most picturesque city of Crete. The city of Chania is also characterized by a rich cultural life. A plethora of cultural events are organized every year (exhibitions, festivals, theatrical and musical performances, ect.)",
      latLong:[35.516253, 24.018549],
      imgUrl: "./img/old-venetian-harbor-1454681052DYt.jpg",
      country: "Greece",
      styling: false
    },
    {
      userName:'Foteini Kollia',
      udacityForumUserName:'foteinikolliagvt',
      placeName:'Delos',
      altPlaceName:'Δήλος',
      description:'Just a stone\'s throw from cosmopolitan Mykonos, Delos is the holy island of ancient Greece, a place imposing, bare of vegetation but exceptionally brilliant under the sunlight. It is the birthplace of Apollo and Artemis, according to mythology.',
      latLong:[37.395603, 25.270252],
      imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Temple_of_Isis%2C_Delos_01.jpg/1024px-Temple_of_Isis%2C_Delos_01.jpg',
      country:'Greece',
      styling: false
    },
    /************************
    *****ANIMAL CARD TEMPLATES*******
    ************************/
    {
      userName: "Katerina Makri",
      udacityForumUserName: "kathrin023",
      placeName: "Syros, Cyclades",
      altPlaceName: "Σύρος, Κυκλάδες",  
      description: "",
      latLong:[37.4499982, 24.8999964],
      imgUrl: "./img/syros.jpg",
      country: "Greece",
      styling: true,
      customCard:false,
      cardText: 'Ermoúpoli (means “the city of Hermes") is the island’s capital town and has been the first important trade and industrial centre of the country in the 19th century. Evidence of this glorious past can be seen on public buildings (the City Hall, the Customs Office, “Apollo” theatre), on the neoclassical houses and at the beautiful squares. Syros is considered a favorable pole of attraction throughout the year as each season dresses the already breathtaking scenery with its own colors and aromas, with its own beauties and contrasts always offering a special and unforgettable experience for all visitors.',
      cardList: [["Region: ","South Aegean"],["Capital: ","Ermoupoli"],["Area: ","101.9 km2"],["Population: "," 21,507 people"]]
    },
    {
      //rodes
      userName: "Virginia Sverkiou",
      udacityForumUserName: "virginiasverkiouwfi",
      placeName: "Rhodes",
      altPlaceName: "Ρόδος",  
      description: '<div class="note1">The 4th largest island of Greece!</div>' + '<div class="note2">Rhodes is a "must" if you want to visit Greece! It has a lot of different destinations that include sightseeing, historical statues and more..! The most popular places to visit are:</div>',
      latLong:[36.077285, 28.072477],
      imgUrl: "https://upload.wikimedia.org/wikipedia/commons/3/3c/Sunrise_at_the_Island_of_Rhodes%2C_Greece.jpg",
      country: "Greece",
      styling: true,
      customCard:false,
      cardText: '<em>One extra tip:</em> You can take the boat and visit the beautiful island Symi, to discover its wonderful beaches!',
      cardList: [["x: ","The Palace of the Grand Master in the Old Town"],["y: ","Lindos"],["z: ","Ialissós"],["x: ","The area of Petaloúdes"]]
    },
    {//mesolongi
      userName: "George Alexandris",
      udacityForumUserName: "gfa61ga6dz6", //gfa61.ga6dz6
      placeName: "Messolongi, Western Greece",
      altPlaceName: "Μεσολόγγι, Δυτική Ελλάδα",
      description: '<strong>Τhe holy city of Greece</strong> (244 km from Athens). The heroic exodus of the free besieged was a crucial point in modern Greek history and a source of inspiration for poets such as Solomos and Lord Byron.',
      latLong:[38.368674, 21.430415],
      imgUrl: "https://gfa61-ga.github.io/Google-Scholarship-Front-End-Web-Dev/messolongi.jpg",
      country: "Greece",
      styling: true,
      customCard:false,
      cardText: "Every year, during the day of Lazarus and Palm Sunday the Exodus is remembered. Messologgi is a nice, quiet town with a lot of traditional houses. The architecture is notable. A visit to this city will remind you of past times.<br>On the mountain slopes above Mesolongi is the Monastery of Saint Symeon with historical importance. The Garden of Heroes in the centre of the town is a nice place to walk around, hosting monuments of heroes from the Greek Revolution of 1821. In short drive distance from Mesolongi are nice villages and beaches to explore.<br>Even the finest photographers have trouble capturing the light that turns the vast Messolongi lagoon golden at sunset.The lagoon is a fisherman’s tale of cinematic proportions, made up of ‘corrals’, or special fishing enclosures, weirs that fiddle a little with the water flow, fishing huts on stilts, flat-bottomed boats and the islets of Kleisova and Agios Sostis; sights that will have you clicking your camera nonstop.",
      cardList: [["Population: ","14.386"],["Sights: ","Messolongi lagoon"],["Historical Point: ","Garden of Heroes"],["Popular Beaches:"," Tourlida, Louros"]]
    },
    {
      userName: "Daniel Mantzakos",
      udacityForumUserName: "danielmantzakos", //daniel.mantzakos
      placeName: "Parthenon, Athens",
      altPlaceName: "Παρθενώνας",
      description: "The Parthenon is considered as one of the world's greatest cultural monuments.",  
      latLong:[37.971542, 23.726587],
      imgUrl: "./img/parthenon.jpg",
      country: "Greece",
      styling: true,
      customCard:false,
      cardText: 'The Parthenon is a former temple, on the Athenian Acropolis, Greece, dedicated to the goddess Athena, whom the people of Athens considered their patron. To the Athenians who built it, the Parthenon and other Periclean monuments of the Acropolis, were seen fundamentally as a celebration of Hellenic victory over the Persian invaders and as a thanksgiving to the gods for that victory. Today, Parthenon attracts millions of tourists every year.',
      cardList: [["Type: ","Temple"],["Architectural style: ","Classical"],["Construction started: ","447 BC"],["Completed: ","432 BC"]]
    },
    {
      //sparta
      userName: "Daniel Mantzakos",
      udacityForumUserName: "danielmantzakos", //daniel.mantzakos
      placeName: "Sparta",
      altPlaceName: "Σπάρτη",
      description: "Around 650 BC, Sparta rose to become the dominant military land-power in ancient Greece.",  
      latLong:[37.0735338,22.4121275],
      imgUrl: "./img/sparta.jpg",
      country: "Greece",
      styling: true,
      customCard:false,
      cardText: 'Sparta was a prominent city-state in ancient Greece. In antiquity the city-state was known as Lacedaemon, while the name Sparta referred to its main settlement on the banks of the Eurotas River in Laconia, in south-eastern Peloponnese. Given its military pre-eminence, Sparta was recognized as the overall leader of the combined Greek forces during the Greco-Persian Wars. Between 431 and 404 BC, Sparta was the principal enemy of Athens during the Peloponnesian War, from which it emerged victorious, though at a great cost of lives lost.',
      cardList: [["Foundation: ","900s BC"],["Population: ","16,239"],["Battle of Thermopylae: ","480 BC"],["Peloponnesian War:"," 431–404 BC"]]
    },
    /************************
    *****CUSTOM STYLES*******
    ************************/
    {
      userName: 'Tsarvouli Konstantina',
      udacityForumUserName: "ntina_t",
      placeName: "Kavala",
      altPlaceName: "Καβάλα",
      latLong:[40.934914, 24.415186],
      country: "Greece",
      styling: true,
      customCard:true
    },
    {
      userName: 'Tsarvouli Konstantina',
      udacityForumUserName: "ntina_t2",
      placeName: "Samothrace",
      altPlaceName: "Σαμοθράκη",
      latLong:[40.45316, 25.584357],
      country: "Greece",
      styling: true,
      customCard:true
    },
    {
      userName: 'Evi Giannakou',
      udacityForumUserName: "evigiannakou",
      placeName: "Amorgos",
      altPlaceName: "Αμοργός",
      latLong:[36.792607, 25.765614],
      country: "Greece",
      styling: true,
      customCard:true
    },
    {
      userName: 'Evi Giannakou',
      udacityForumUserName: "evigiannakou2",
      placeName: "Amorgos",
      altPlaceName: "Αμοργός",
      latLong:[36.903418, 25.980246],
      country: "Greece",
      styling: true,
      customCard:true
    },

    /************************
    ***end of CUSTOM STYLES**
    ************************/
];

/*****************foteini  we can add our skin codes here*******************/
const body=$('body');
const header=$('.header');
const dropdown_menu = $('.dropdown-menu');
dropdown_menu.on('click','a',function(event){
  event.preventDefault();
  let x=$(event.target).text();
  if(x==="summer"){  //to x= θα είναι το όνομα του skin
    body.removeClass();  //βγαζει προηγουμενο στυλ
    body.addClass("summer");//εδώ θα είναι το όνομα του δικου μας class
    header.css({"background-color": "transparent"});//εδώ βγάζει το background-color απο το header
  } else if(x===" skin's name"){
    body.removeClass();
    body.addClass("class name");
    header.css({"background-color": "transparent"});
    } 
    else if(x==="winter"){
      body.removeClass();
      body.addClass("winter");
      header.css({"background-color": "transparent"});
      } else {
        header.css({"background-color": "#3f7aa2"})
        body.removeClass();
      }
});
//*************telos allaghs foteini***************************************************
/***************************
*    Show Contributors     *
***************************/
// function addContributor() {
//     for( i=0; i < data.length; i++) {
//             document.getElementsByClassName('contributor')[i].innerHTML = data[i].userName;
//     }
// }
// addContributor();

/****************************
Leaflet - Initialize map
***************************/
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '<a href="https://carto.com/">Carto </a>|   <a href="https://www.openstreetmap.org">OpenStreetMap</a>',
}).addTo(mymap);
/****************************
 Leaflet  - EXTENDING THE ICON CLASS- snippet from https://stackoverflow.com/questions/25683871/assign-id-to-marker-in-leaflet
 ****************************/
const MarkerIcon = L.Icon.extend({
  options: {
      customId: ""
  }
});
//This is used to create the option customId on the MarkerIcon that will work as unique id for each marker on the map and for each element of the markers object
/****************************
 Leaflet - Icons - markers
***************************/
const myDefaultMarker = new MarkerIcon({
  customId: "",
  iconUrl: 'https://unpkg.com/leaflet@1.3.1/dist/images/marker-icon-2x.png',
  iconSize: [25,41]
});
//  const iconArcheology = L.icon({
//   iconUrl: './img/archeology.svg',
//   iconSize: [40,40],
//   iconAnchor: [40,40],
//   popupAnchor: [-3,-76]
// });

function generateMarkers(arr) {
  let id = 0;
  arr.forEach(function(element) {
    element.id = id;
    const idString = id.toString();
    L.marker(element.latLong, {icon: myDefaultMarker, customId: idString, title:element.placeName}).addTo(mymap)
    .on('click', markerClick)
    .bindPopup(`<b>${element.placeName}</b><br>${element.altPlaceName}`);
    markers[id] = element;
    id+=1;
  });
};
generateMarkers(data);
/****************************
Leaflet - map Click Events
***************************/
function markerClick(e) {
  const customId = this.options.customId;
  if (!markers[customId].styling) {
    $('.customcard').hide();
    $styling.hide();
    $defaultCard.show();
    $('#cardImage').attr('src', markers[customId].imgUrl);
    $('#cardTitle').html(markers[customId].placeName);
    $('#cardText').html(markers[customId].description);
  } else {
    !markers[customId].customCard ? defaultAnimalCard() : customCard();
    function defaultAnimalCard() {
      $defaultCard.hide();
      $('.customcard').hide();
      $styling.show();
      const currentClass = markers[customId].udacityForumUserName;
      $styling.removeClass(defaultClass).addClass(currentClass);
      defaultClass = currentClass;
      $('#styling .card-img').attr('src', markers[customId].imgUrl);
      $('.card-title').html(markers[customId].placeName);
      $('.card-subtitle').html(markers[customId].description);
      $('.card-text').html(markers[customId].cardText);
      let listItems = $('.card-list-group li');
      for (let i = 0; i < 4; i++) {
        const span = $('<span class="card-list-group-item"></span>').html(markers[customId].cardList[i][0]);//global?
        $(listItems[i]).html(markers[customId].cardList[i][1]).prepend(span);
      }
    }
    function customCard() {
      $('.customcard').hide();
      $defaultCard.hide();
      $styling.hide();
      const cardName ='.' + (markers[customId].udacityForumUserName).toString();
      $(cardName).show();
    }
    //
  }
};
//Get Coordinates From Map
const popup = L.popup();
function onMapClick(e) {
    popup
      .setLatLng(e.latlng)
      .setContent("You clicked the map at " + e.latlng.toString())
      .openOn(mymap);
};

// Enable / Disable Coordinates on click
$('#xyButton').on('click', function() {
  if (!xyOnClick) {
    xyOnClick = !xyOnClick;
    mymap.on('click', onMapClick);
    $('#xyButton').text('Disable Coordinates on click'); //.removeClass('btn-success').addClass('btn-warning');
  } else {
    xyOnClick = !xyOnClick;
    mymap.off('click', onMapClick);
    $('#xyButton').text('Get Coordinates from the map'); //.removeClass('btn-warning').addClass('btn-success');
  }
});
//Toggle List of Contributors
$('#toggleContributorsBtn').on('click', function() {
  $listOfContributors.slideToggle(500,"swing");
});
//populate list of contributors
function getContributors() {
  Object.keys(markers).forEach(function(key) {
    //Loops through the object. snippet from https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object
    if (contributors[markers[key].udacityForumUserName] == null) {
        // checks if undefined or null. code snippet from https://stackoverflow.com/questions/2647867/how-to-determine-if-variable-is-undefined-or-null
        contributors[markers[key].udacityForumUserName] = [key];
    } else {
        contributors[markers[key].udacityForumUserName].push(key);
    }
  });
};
getContributors();

function  contrToArray() {
  Object.keys(contributors).forEach(function(key) {
    let temp = {};
    temp[key] = contributors[key];
    arrOfObjectsContributors.push(temp);
    arrOfContributors.push(key);
  });
};
contrToArray();

$('.contributor').on('click', function(){
  switch ($(this).attr('data-state')) {
    case 'idle':
      let arrayOfPins = contributors[$(this).attr('data-forum-name')];
      $('<div class="pins"></div>').clone().insertAfter(this);
      for (let i = 0; i< arrayOfPins.length; i++) {
        let placeName = markers[contributors[$(this).attr('data-forum-name')][i]].placeName;
        let lat = markers[contributors[$(this).attr('data-forum-name')][i]].latLong[0];
        let long = markers[contributors[$(this).attr('data-forum-name')][i]].latLong[1];
        tempButton = $('<button type="button" class="btn btn-outline-dark mb-1 mt-1">' + placeName + '</span></button>');
        tempButton.attr('data-lat', lat).attr('data-long', long);
        $(this).next('div.pins').append(tempButton);
      };
      $(this).attr('data-state','expanded');
      break;
    case 'expanded':
      $(this).next('div.pins').toggleClass('hidden');
      $(this).attr('data-state','collapsed');
      break;
    case 'collapsed':
      $(this).next('div.pins').toggleClass('hidden');
      $(this).attr('data-state','expanded');
      break;
    };
});

function showContributors() {
  //Object.keys(obj).length //number of keys( contributors)
  for (let i=0; i< arrOfContributors.length ; i++) {
    //arrOfContributors[i] //forumname
    let tempElement = [
      markers[contributors[arrOfContributors[i]][0]].userName, //User Name
      '<span class="badge badge-light ml-1">' + contributors[arrOfContributors[i]].length + '</span>',//badge
      arrOfContributors[i], //data-forum-name
      'idle' //data-state
    ];
    contDropDownList.push(tempElement);
    if (i<5) {
      document.getElementsByClassName('contributor')[i].innerHTML = contDropDownList[i][0];
      $($('.contributor')[i])
        .attr('data-forum-name', arrOfContributors[i])
        .attr('data-state','idle')
        .append($(contDropDownList[i][1]));
    }
  }
};
showContributors();

//Attach the click on body because the button.btn-outline-dark elements are added dynamically
$('body').on('click','button.btn-outline-dark', function() {
  const lat = parseFloat($(this).attr('data-lat'));
  const long = parseFloat($(this).attr('data-long'));
  mymap.setView([lat,long],11);
})

$('button.down').on('click', function() {
  const lastIndex = $($('.contributor')[4]).attr('data-forum-name'); //last index forumID
  const firstIndex = $($('.contributor')[0]).attr('data-forum-name'); //first index forumID
  if (arrOfContributors.indexOf(lastIndex) < arrOfContributors.length-1) {
    const $firstElement = $($('.contributor')[0]);
    const $lastElement = $($('.contributor')[4]);
    $('div.pins').remove();
    for (let i = 0; i<5; i++) {
      $($('.contributor')[i]).attr('data-state','idle');
    }
    $firstElement
    .html(contDropDownList[arrOfContributors.indexOf(lastIndex) + 1][0])
    .attr('data-forum-name', arrOfContributors[arrOfContributors.indexOf(lastIndex) + 1 ])
    .attr('data-state','idle')
    .append($(contDropDownList[arrOfContributors.indexOf(lastIndex) + 1][1]));
    $($lastElement).after($firstElement);
  }
}
);

$('button.up').on('click', function() {
  const lastIndex = $($('.contributor')[4]).attr('data-forum-name'); //last index forumID
  const firstIndex = $($('.contributor')[0]).attr('data-forum-name'); //first index forumID
  if (arrOfContributors.indexOf(firstIndex) -1 >= 0) {
    const $firstElement = $($('.contributor')[0]);
    const $lastElement = $($('.contributor')[4]);
    $('div.pins').remove();
    for (let i = 0; i<5; i++) {
      $($('.contributor')[i]).attr('data-state','idle');
    }
    $lastElement
    .html(contDropDownList[arrOfContributors.indexOf(firstIndex) - 1][0])
    .attr('data-forum-name', arrOfContributors[arrOfContributors.indexOf(firstIndex) -1 ])
    .attr('data-state','idle')
    .append($(contDropDownList[arrOfContributors.indexOf(firstIndex) - 1][1]));
    $($firstElement).before($lastElement);
  }
}
);



/***************************
 KNOWN BUGS && IMPROVEMENTS
 ***************************/
//Maybe add a feaure so that a user can place two images in a single pin...
//...by clicking on the card image the next one will toggle
//list on contributors: apart from zooming in to the pin it should also oopen the card

Comments