Skip to content

Commit 159058d

Browse files
sourcecodebdsourcecodebd
committed
site making done
1 parent d021bce commit 159058d

File tree

8 files changed

+288
-2
lines changed

8 files changed

+288
-2
lines changed

‎README.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1-
# random-user-generate
2-
This is simple app where I implemented generating system of random user through API. HTML5, CSS3, JavaScript has been used. Hope you will like it! Feel free to share with other students
1+
# Random User Generate
2+
## Site-Link
3+
https://sourcecodebd.github.io/random-user-generate
4+
5+
## Author
6+
[Nafi Mahmud][author]
7+
8+
[author]: https://sourcecodebd.github.io/nafi.com/
9+
This is a simple app where I implemented a generating system of the random users through API. HTML5, CSS3, Bootstrap and JavaScript has been used. Hope you will like it! Feel free to share with other students

‎css/style.css

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
*{
2+
caret-color: transparent;
3+
}
4+
body{
5+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
6+
background-color:rgb(0, 10, 95);
7+
}
8+
section{
9+
background: url('../media/bg-blue.gif') no-repeat;
10+
background-size: cover;
11+
}
12+
13+
.custom-card{
14+
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
15+
border-radius: 20px;
16+
width: fit-content
17+
}
18+
19+
#custom-modal{
20+
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
21+
border-radius: 15px;
22+
width: fit-content;
23+
padding: 15px
24+
}
25+
26+
h1{
27+
color: blue;
28+
}
29+
a, button {
30+
text-decoration: none;
31+
}
32+
p {
33+
text-align: justify;
34+
}
35+
36+
.photoContainer img{
37+
border-radius: 50%;
38+
border: 2px solid white;
39+
background-color: rgb(250, 128, 76);
40+
}
41+
42+
#home-tab{
43+
background-color: rgba(20, 146, 146, 0.651);
44+
border: 1px solid white;
45+
}
46+
#profile-tab{
47+
background-color: rgba(20, 146, 146, 0.651);
48+
border: 1px solid white;
49+
}
50+
#contact-tab{
51+
background-color: rgba(20, 146, 146, 0.651);
52+
border: 1px solid white;
53+
}
54+
55+
#home-tab:hover{
56+
background-image: linear-gradient(to right top, #9f21ff, #8753ff, #756fff, #6d84ff, #7195f8, #64a5fb, #61b2fb, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
57+
color: black !important;
58+
}
59+
#profile-tab:hover{
60+
background-image: linear-gradient(to right top, #9f21ff, #8753ff, #756fff, #6d84ff, #7195f8, #64a5fb, #61b2fb, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
61+
color: black !important;
62+
}
63+
#contact-tab:hover{
64+
background-image: linear-gradient(to right top, #9f21ff, #8753ff, #756fff, #6d84ff, #7195f8, #64a5fb, #61b2fb, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
65+
color: black !important;
66+
}
67+
68+
/* Scrollbar starts */
69+
70+
.country::-webkit-scrollbar {
71+
display: none;
72+
}
73+
#country-details::-webkit-scrollbar {
74+
display: none;
75+
}
76+
77+
::-webkit-scrollbar {
78+
width: 20px;
79+
}
80+
81+
/* width */
82+
83+
/* Track */
84+
::-webkit-scrollbar-track {
85+
box-shadow: inset 0 0 5px grey;
86+
border-radius: 10px;
87+
}
88+
89+
/* Handle */
90+
::-webkit-scrollbar-thumb {
91+
background-image: linear-gradient(rgb(61, 79, 243) 0%, rgb(53, 67, 188) 100%);
92+
border-radius: 10px;
93+
}
94+
95+
/* Handle on hover */
96+
::-webkit-scrollbar-thumb:hover {
97+
background: rgb(250, 128, 76);
98+
}
99+
100+
/* Scrollbar ends */
101+
102+
.btn {background-image: linear-gradient(to right, #7b4397 0%, #dc2430 51%, #7b4397 100%)}
103+
.btn {
104+
text-align: center;
105+
text-transform: uppercase;
106+
transition: 0.5s;
107+
background-size: 200% auto;
108+
color: white;
109+
border-radius: 10px;
110+
height: 50px;
111+
font-size: 16px;
112+
outline: none;
113+
border: none;
114+
cursor: pointer;
115+
box-Shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px
116+
}
117+
.btn:hover {
118+
background-position: right center; /* change the direction of the change here */
119+
color: #fff;
120+
text-decoration: none;
121+
}
122+
input:focus, textarea:focus {
123+
outline: none;
124+
}
125+
textarea::-webkit-scrollbar{
126+
display: none;
127+
}
128+
129+
@media only screen and (min-width: 768px){
130+
section{
131+
background: url('../media/bg-blue.gif') repeat;
132+
}
133+
}
134+
135+
footer{
136+
background-color: rgba(108, 111, 253, 0.397);
137+
color: white;
138+
margin-top: 50px
139+
}

‎index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<!-- Icon -->
9+
<link rel="icon" sizes="192x192" type=image/x-icon" href="media/icons/javascript.ico">
10+
<!-- Font Awesome -->
11+
<script src="https://kit.fontawesome.com/5485bfc962.js" crossorigin="anonymous"></script>
12+
<!-- Bootstrap CSS -->
13+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
14+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
15+
<link rel="stylesheet" type="text/css" href="css/style.css">
16+
<title>Photo API</title>
17+
</head>
18+
19+
<body class="text-white">
20+
<header class="container">
21+
<h1 class="text-uppercase text-center text-warning my-4">Welcome to the Photo API Website!</h1>
22+
</header>
23+
24+
<main class="mb-5">
25+
<section class="container">
26+
<div class="d-flex justify-content-center align-items-center" id="modal">
27+
<!-- modal -->
28+
29+
</div>
30+
<div class="d-flex justify-content-center">
31+
<button onclick="loadPhotos()"
32+
class="btn w-50 my-2 d-flex justify-content-center align-items-center">Load
33+
Random
34+
User</button>
35+
</div>
36+
<div class="custom-card">
37+
<!-- random-user -->
38+
</div>
39+
</section>
40+
</main>
41+
<footer class="text-uppercase p-3">
42+
<p class="text-center fw-bold">CopyRight &copy; <span id="year"></span> | All Rights Reserved By</p>
43+
<p class="text-center fw-bold">Nafi Mahmud</p>
44+
</footer>
45+
<script>
46+
const d = new Date();
47+
document.getElementById("year").innerText = d.getFullYear();
48+
</script>
49+
<!-- Bootstrap JS -->
50+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
51+
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
52+
crossorigin="anonymous"></script>
53+
<script type="text/javascript" src="js/random-user.js"></script>
54+
</body>
55+
56+
</html>

‎js/random-user.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const loadPhotos = () => {
2+
fetch('https://randomuser.me/api/')
3+
.then(res => res.json())
4+
.then(data => displayPhotos(data.results))
5+
.catch(e => console.log(e));
6+
}
7+
loadPhotos();
8+
9+
const displayPhotos = photos => {
10+
console.log(photos.slice(0, 10));
11+
const mainContainer = document.querySelector('.custom-card');
12+
const photoContainer = document.createElement('div');
13+
const detailContainer = document.createElement('div');
14+
mainContainer.classList.add('d-flex', 'flex-column', 'align-items-center', 'mx-auto');
15+
photoContainer.classList.add('photoContainer', 'my-4');
16+
photos.slice(0, 5000).forEach(photo => {
17+
mainContainer.textContent = '';
18+
var string_date = photo.dob.date;
19+
var date = new Date(string_date);
20+
photoContainer.innerHTML = `<img src="${photo.picture.large}">`;
21+
detailContainer.innerHTML =
22+
`
23+
<div class="text-center">
24+
<button onclick="loadModal('${photo.id.name}')" class="btn my-2">More Info</button>
25+
</div>
26+
<ul class="nav nav-tabs d-flex justify-content-center" id="myTab" role="tablist">
27+
<li class="nav-item" role="presentation">
28+
<button class="nav-link active text-white" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Name</button>
29+
</li>
30+
<li class="nav-item" role="presentation">
31+
<button class="nav-link text-white" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Country</button>
32+
</li>
33+
<li class="nav-item" role="presentation">
34+
<button class="nav-link text-white" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">DOB</button>
35+
</li>
36+
</ul>
37+
<div class="tab-content p-2 text-center" id="myTabContent">
38+
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">${photo.name.title} ${photo.name.first} ${photo.name.last}</div>
39+
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">${photo.location.country}</div>
40+
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">${date}</div>
41+
</div>
42+
`
43+
mainContainer.appendChild(photoContainer);
44+
mainContainer.appendChild(detailContainer);
45+
})
46+
}
47+
48+
const loadModal = (id) => {
49+
console.log(id);
50+
const modalContainer = document.querySelector('#modal');
51+
modalContainer.textContent = '';
52+
const infoContainer = document.createElement('div');
53+
if (id == "") {
54+
infoContainer.innerHTML =
55+
`
56+
<div id="custom-modal">
57+
<h5>Modal title</h5>
58+
<div class="text-center">
59+
<button onclick="closeModal('none')" class="btn">Close</button>
60+
</div>
61+
<p class="text-center text-white">No Id Exists!</p>
62+
</div>
63+
`
64+
}
65+
else {
66+
infoContainer.innerHTML =
67+
`
68+
<div id="custom-modal">
69+
<h5>Modal title</h5>
70+
<div class="text-center">
71+
<button onclick="closeModal('none')" class="btn">Close</button>
72+
</div>
73+
<p class="text-center text-white">ID: ${id}</p>
74+
</div>
75+
`
76+
}
77+
modalContainer.appendChild(infoContainer);
78+
closeModal('block');
79+
}
80+
81+
function closeModal(displayStyle) {
82+
const hidden = document.getElementById('custom-modal');
83+
hidden.style.display = displayStyle;
84+
}

‎media/New Project.mp4

8.92 MB
Binary file not shown.

‎media/bg-blue.gif

862 KB
Loading

‎media/icons/javascript.ico

9.23 KB
Binary file not shown.

‎media/icons/javascript.png

31.6 KB
Loading

0 commit comments

Comments
 (0)