Skip to content
Advertisements

JSON Users (Modal Box)

Github:https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Users%20(Modal%20Box)


HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CARD GAME</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="\css\main.css">
    <script src="/javascript/main.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
<body>

    <div id="backWall">
      <div id="modalBox">
          <img id="img" alt="person" src="">
          <h3 id="fullName">s</h3>
          <div>ID: <label id="id"></label></div>
          <div>Age: <label id="age"></label></div>
          <div>From: <label id="from"></label></div>
          <div>Job: <label id="job"></label></div>
          <span class="close">×</span>
      </div>
    </div>
    
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Furkan</td>
          <td>Gulsen</td>
          <td>
            <button class="btn btn-dark more" id="furkan">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Allen</td>
          <td>
            <button class="btn btn-dark more" id="Jacob">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Maria</td>
          <td>Quenn</td>
          <td>
            <button class="btn btn-dark more" id="maria">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">4</th>
          <td>Jack</td>
          <td>Jones</td>
          <td>
            <button class="btn btn-dark more" id="jack">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">5</th>
          <td>Harry</td>
          <td>Williams</td>
          <td>
            <button class="btn btn-dark more" id="harry">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">6</th>
          <td>Charlie</td>
          <td>Brown</td>
          <td>
            <button class="btn btn-dark more" id="charlie">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">7</th>
          <td>Emily</td>
          <td>Taylor</td>
          <td>
            <button class="btn btn-dark more" id="emily">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">8</th>
          <td>Ava</td>
          <td>Davies</td>
          <td>
            <button class="btn btn-dark more" id="ava">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">9</th>
          <td>Jessica</td>
          <td>Wilson</td>
          <td>
            <button class="btn btn-dark more" id="jessica">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">10</th>
          <td>Isabella</td>
          <td>Evans</td>
          <td>
            <button class="btn btn-dark more" id="isabella">MORE</button>
          </td>
        </tr>
      </tbody>
    </table>
    
</body>
</html>

CSS

#backWall {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.25); }

#modalBox {
  display: none;
  text-align: center;
  background-color: #fff;
  z-index: 99;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #262626;
  width: 400px;
  padding: 25px; }
  #modalBox .close {
    color: #aaaaaa;
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    transition: .25s; }
    #modalBox .close:hover, #modalBox .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transform: scale(1.5);
      color: red; }

#more {
  font-size: 12px; }

#img{
  width: 100px;
  height: 100px;
}

JavaScript

let backWall = $("#backWall");
let modal = $("#modalBox");

$(".more").click(function(){
    backWall.show(0);
    modal.show(500);
  });

$(".close").click(function(){
  backWall.hide(0);
  modal.hide(0);
})
window.onclick = function(event) {
  if (event.target == document.getElementById("backWall")) {
    backWall.hide(0);
    modal.hide(0);
  }
};

  let more = document.querySelectorAll(".more");

  more.forEach( (x)=> x.addEventListener("click", function(){
    var a = x.getAttribute("id");
    console.log(a);
    let xmlRequest,obj;
    xmlRequest = new XMLHttpRequest();
    xmlRequest.onreadystatechange = function(){
      if(this.readyState === 4 && this.status === 200){
        obj = JSON.parse(this.responseText);
        $("#fullName").text(obj[a]["fullName"]);
        $("#id").text(obj[a]["id"]);
        $("#age").text(obj[a]["age"]);
        $("#from").text(obj[a]["from"]);
        $("#job").text(obj[a]["job"]);
        var imageSource = obj[a]["image"];
        console.log(imageSource);
        let profile_image = document.getElementById("img");
        profile_image.setAttribute("src",imageSource);
      }
    } 
    xmlRequest.open("GET","/javascript/info.json",true);
    xmlRequest.send();
  }))

JSON

{
    "furkan" : {
        "fullName" : "Furkan Gulsen",
        "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
        "id" : 1,
        "age" : 21,
        "from" : "TURKEY",
        "job" : "Software Engineer"
    },
    "Jacob" : {
        "fullName" : "Jacob Allen",
        "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
        "id" : 2,
        "age" : 28,
        "from" : "FRANCE",
        "job" : "Math Engineer"
    },
    "maria" : {
        "fullName" : "Maria Quenn",
        "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
        "id" : 3,
        "age" : 32,
        "from" : "ITALY",
        "job" : "Computer Engineer"
    },
    "jack" : {
        "fullName" : "Jack Jones",
        "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
        "id" : 4,
        "age" : 26,
        "from" : "CANADA",
        "job" : "industrial engineer"
    },
    "harry" : {
        "fullName" : "Harry Williams",
        "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
        "id" : 5,
        "age" : 34,
        "from" : "USA",
        "job" : "architect"
    },
    "charlie" : {
        "fullName" : "Charlie Brown",
        "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
        "id" : 6,
        "age" : 23,
        "from" : "GERMANY",
        "job" : "designer"
    },
    "emily" : {
        "fullName" : "Emily Taylor",
        "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
        "id" : 7,
        "age" : 36,
        "from" : "CHINA",
        "job" : "electrical engineer"
    },
    "ava" : {
        "fullName" : "Ava Davies",
        "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
        "id" : 8,
        "age" : 25,
        "from" : "TURKEY",
        "job" : "construction engineer"
    },
    "jessica" : {
        "fullName" : "Jessica Wilson",
        "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
        "id" : 9,
        "age" : 27,
        "from" : "FRANCE",
        "job" : "Cyber security expert"
    },
    "isabella" : {
        "fullName" : "Isabella Evans",
        "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
        "id" : 10,
        "age" : 29,
        "from" : "RUSSIA",
        "job" : "designer"
    }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: