A Pen by Craig Meister

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Craig Meister</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

  
  
</head>

<body>

  <select id="usersDropdown">
    <option>Select your username</option>
</select>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>


<script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/rcmeisty/a-pen-by-craig-meister-erEomy */
// Initialize Firebase
var config = {
    apiKey: "AIzaSyBizUSUbb4B-p5y_FftCXgdSkiBrtb5P1U",
    authDomain: "web-quickstart-bc8d8.firebaseapp.com",
    databaseURL: "https://web-quickstart-bc8d8.firebaseio.com",
    projectId: "web-quickstart-bc8d8",
    storageBucket: "web-quickstart-bc8d8.appspot.com",
    messagingSenderId: "1011019532200"
};
firebase.initializeApp(config);

var dbUsers = firebase.database().ref().child("users");

dbUsers.on("value", getUsers);

var users;
function getUsers(result){
  users = result.val();
  var i;
  var interUser;
  var toWriteUsers ="<option>Select your username</option>";
  for(i=0;i<users.length;i++){
    interUser = users[i].user;
    toWriteUsers = toWriteUsers + "<option value='"+interUser+"' class='dropdown-item'>" + interUser + "</option>";
  }
  $("#usersDropdown").html(toWriteUsers);
  console.log(users);
}

Comments