Skip to content

Commit 292aadd

Browse files
author
codeblogger
committed
html, css, js and json
1 parent 5e65510 commit 292aadd

File tree

5 files changed

+310
-0
lines changed

5 files changed

+310
-0
lines changed

‎Users (Modal Box)/css/main.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
#backWall {
2+
display: none;
3+
position: fixed;
4+
z-index: 1;
5+
top: 0;
6+
left: 0;
7+
width: 100%;
8+
height: 100%;
9+
overflow: auto;
10+
background: rgba(0, 0, 0, 0.25); }
11+
12+
#modalBox {
13+
display: none;
14+
text-align: center;
15+
background-color: #fff;
16+
z-index: 99;
17+
position: relative;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%);
21+
box-shadow: 0px 0px 50px #262626;
22+
width: 400px;
23+
padding: 25px; }
24+
#modalBox .close {
25+
color: #aaaaaa;
26+
position: absolute;
27+
top: 5px;
28+
right: 25px;
29+
font-size: 30px;
30+
font-weight: bold;
31+
transition: .25s; }
32+
#modalBox .close:hover, #modalBox .close:focus {
33+
color: #000;
34+
text-decoration: none;
35+
cursor: pointer;
36+
transform: scale(1.5);
37+
color: red; }
38+
39+
#more {
40+
font-size: 12px; }
41+
42+
#img{
43+
width: 100px;
44+
height: 100px;
45+
}

‎Users (Modal Box)/javascript/info.json

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"furkan" : {
3+
"fullName" : "Furkan Gulsen",
4+
"image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
5+
"id" : 1,
6+
"age" : 21,
7+
"from" : "TURKEY",
8+
"job" : "Software Engineer"
9+
},
10+
"Jacob" : {
11+
"fullName" : "Jacob Allen",
12+
"image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
13+
"id" : 2,
14+
"age" : 28,
15+
"from" : "FRANCE",
16+
"job" : "Math Engineer"
17+
},
18+
"maria" : {
19+
"fullName" : "Maria Quenn",
20+
"image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
21+
"id" : 3,
22+
"age" : 32,
23+
"from" : "ITALY",
24+
"job" : "Computer Engineer"
25+
},
26+
"jack" : {
27+
"fullName" : "Jack Jones",
28+
"image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
29+
"id" : 4,
30+
"age" : 26,
31+
"from" : "CANADA",
32+
"job" : "industrial engineer"
33+
},
34+
"harry" : {
35+
"fullName" : "Harry Williams",
36+
"image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
37+
"id" : 5,
38+
"age" : 34,
39+
"from" : "USA",
40+
"job" : "architect"
41+
},
42+
"charlie" : {
43+
"fullName" : "Charlie Brown",
44+
"image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png",
45+
"id" : 6,
46+
"age" : 23,
47+
"from" : "GERMANY",
48+
"job" : "designer"
49+
},
50+
"emily" : {
51+
"fullName" : "Emily Taylor",
52+
"image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
53+
"id" : 7,
54+
"age" : 36,
55+
"from" : "CHINA",
56+
"job" : "electrical engineer"
57+
},
58+
"ava" : {
59+
"fullName" : "Ava Davies",
60+
"image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
61+
"id" : 8,
62+
"age" : 25,
63+
"from" : "TURKEY",
64+
"job" : "construction engineer"
65+
},
66+
"jessica" : {
67+
"fullName" : "Jessica Wilson",
68+
"image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
69+
"id" : 9,
70+
"age" : 27,
71+
"from" : "FRANCE",
72+
"job" : "Cyber security expert"
73+
},
74+
"isabella" : {
75+
"fullName" : "Isabella Evans",
76+
"image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub",
77+
"id" : 10,
78+
"age" : 29,
79+
"from" : "RUSSIA",
80+
"job" : "designer"
81+
}
82+
}

‎Users (Modal Box)/javascript/main.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
let backWall = $("#backWall");
2+
let modal = $("#modalBox");
3+
4+
$(".more").click(function(){
5+
backWall.show(0);
6+
modal.show(500);
7+
});
8+
9+
$(".close").click(function(){
10+
backWall.hide(0);
11+
modal.hide(0);
12+
})
13+
window.onclick = function(event) {
14+
if (event.target == document.getElementById("backWall")) {
15+
backWall.hide(0);
16+
modal.hide(0);
17+
}
18+
};
19+
20+
let more = document.querySelectorAll(".more");
21+
22+
more.forEach( (x)=> x.addEventListener("click", function(){
23+
var a = x.getAttribute("id");
24+
console.log(a);
25+
let xmlRequest,obj;
26+
xmlRequest = new XMLHttpRequest();
27+
xmlRequest.onreadystatechange = function(){
28+
if(this.readyState === 4 && this.status === 200){
29+
obj = JSON.parse(this.responseText);
30+
$("#fullName").text(obj[a]["fullName"]);
31+
$("#id").text(obj[a]["id"]);
32+
$("#age").text(obj[a]["age"]);
33+
$("#from").text(obj[a]["from"]);
34+
$("#job").text(obj[a]["job"]);
35+
var imageSource = obj[a]["image"];
36+
console.log(imageSource);
37+
let profile_image = document.getElementById("img");
38+
profile_image.setAttribute("src",imageSource);
39+
}
40+
}
41+
xmlRequest.open("GET","/javascript/info.json",true);
42+
xmlRequest.send();
43+
}))

‎Users (Modal Box)/main.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>CARD GAME</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="\css\main.css">
8+
<script src="/javascript/main.js"></script>
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
12+
<meta name="viewport" content="width=device-width, initial-scale=1">
13+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
15+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
16+
</head>
17+
<body>
18+
19+
<div id="backWall">
20+
<div id="modalBox">
21+
<img id="img" alt="person" src="">
22+
<h3 id="fullName">s</h3>
23+
<div>ID: <label id="id"></label></div>
24+
<div>Age: <label id="age"></label></div>
25+
<div>From: <label id="from"></label></div>
26+
<div>Job: <label id="job"></label></div>
27+
<span class="close">&times;</span>
28+
</div>
29+
</div>
30+
31+
<table class="table table-striped">
32+
<thead class="thead-dark">
33+
<tr>
34+
<th scope="col">ID</th>
35+
<th scope="col">First Name</th>
36+
<th scope="col">Last Name</th>
37+
<th scope="col"></th>
38+
</tr>
39+
</thead>
40+
<tbody>
41+
<tr>
42+
<th scope="row">1</th>
43+
<td>Furkan</td>
44+
<td>Gulsen</td>
45+
<td>
46+
<button class="btn btn-dark more" id="furkan">MORE</button>
47+
</td>
48+
</tr>
49+
<tr>
50+
<th scope="row">2</th>
51+
<td>Jacob</td>
52+
<td>Allen</td>
53+
<td>
54+
<button class="btn btn-dark more" id="Jacob">MORE</button>
55+
</td>
56+
</tr>
57+
<tr>
58+
<th scope="row">3</th>
59+
<td>Maria</td>
60+
<td>Quenn</td>
61+
<td>
62+
<button class="btn btn-dark more" id="maria">MORE</button>
63+
</td>
64+
</tr>
65+
<tr>
66+
<th scope="row">4</th>
67+
<td>Jack</td>
68+
<td>Jones</td>
69+
<td>
70+
<button class="btn btn-dark more" id="jack">MORE</button>
71+
</td>
72+
</tr>
73+
<tr>
74+
<th scope="row">5</th>
75+
<td>Harry</td>
76+
<td>Williams</td>
77+
<td>
78+
<button class="btn btn-dark more" id="harry">MORE</button>
79+
</td>
80+
</tr>
81+
<tr>
82+
<th scope="row">6</th>
83+
<td>Charlie</td>
84+
<td>Brown</td>
85+
<td>
86+
<button class="btn btn-dark more" id="charlie">MORE</button>
87+
</td>
88+
</tr>
89+
<tr>
90+
<th scope="row">7</th>
91+
<td>Emily</td>
92+
<td>Taylor</td>
93+
<td>
94+
<button class="btn btn-dark more" id="emily">MORE</button>
95+
</td>
96+
</tr>
97+
<tr>
98+
<th scope="row">8</th>
99+
<td>Ava</td>
100+
<td>Davies</td>
101+
<td>
102+
<button class="btn btn-dark more" id="ava">MORE</button>
103+
</td>
104+
</tr>
105+
<tr>
106+
<th scope="row">9</th>
107+
<td>Jessica</td>
108+
<td>Wilson</td>
109+
<td>
110+
<button class="btn btn-dark more" id="jessica">MORE</button>
111+
</td>
112+
</tr>
113+
<tr>
114+
<th scope="row">10</th>
115+
<td>Isabella</td>
116+
<td>Evans</td>
117+
<td>
118+
<button class="btn btn-dark more" id="isabella">MORE</button>
119+
</td>
120+
</tr>
121+
</tbody>
122+
</table>
123+
124+
</body>
125+
</html>

‎Users (Modal Box)/readme.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
### Users(Modal Box)
2+
3+
------
4+
**Used:**
5+
* HTML
6+
* CSS
7+
* JavaScript (JQuery)
8+
* JSON
9+
------
10+
11+
**Features:**
12+
* There's a list of *names* and *surnames*.
13+
* Pressing the button *'More'* will be *'Modal Box'* active.
14+
* There's more information about the person in the 'modal box'.
15+
* Press X to close the 'Modal Box' or anywhere on the screen.

0 commit comments

Comments
 (0)