Skip to content

Commit 25e76db

Browse files
jigar-sablejigar-sable
committed
Updates
1 parent 6e0ad73 commit 25e76db

84 files changed

Lines changed: 122 additions & 334 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎api-projects/country-api/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<!-- stylessheet -->
8+
<link rel="stylesheet" href="styles.css">
9+
<!-- bootstrap link -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
11+
<title>Country Search API</title>
12+
</head>
13+
<body>
14+
<section class="container p-5 search-section">
15+
<h1>Country Search App</h1>
16+
<div class="row mt-4">
17+
<div class="col-6">
18+
<input class="form-control search-bar" type="text" placeholder="Enter the country name">
19+
</div>
20+
<div class="col-6">
21+
<button id="search-btn" class="btn btn-primary">Search</button>
22+
</div>
23+
</div>
24+
</section>
25+
<section class="result"></section>
26+
27+
<!-- javascript -->
28+
<script src="script.js"></script>
29+
</body>
30+
</html>

‎api-projects/country-api/script.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const searchBar = document.querySelector(".search-bar");
2+
const searchBtn = document.querySelector("#search-btn");
3+
const result = document.querySelector(".result");
4+
const searchSection = document.querySelector(".search-section");
5+
6+
searchBtn.addEventListener("click", () => {
7+
let url = `https://restcountries.com/v3.1/name/${searchBar.value}`;
8+
fetch(url)
9+
.then((res) => res.json())
10+
.then((data) => displayCountry(data));
11+
});
12+
13+
const displayCountry = (data) => {
14+
// console.log(data);
15+
data.forEach((country) => {
16+
const div = document.createElement("div");
17+
div.className = "card d-flex m-5 shadow";
18+
div.style.width = "18rem";
19+
div.innerHTML = `
20+
<img src="${country.flags.svg}" class="card-img-top" alt="...">
21+
<div class="card-body">
22+
<h2 class="card-text">${country.name.common}</h2>
23+
</div>
24+
`;
25+
result.appendChild(div);
26+
});
27+
};

‎api-projects/country-api/styles.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.result {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: center;
5+
}
6+
7+
.card {
8+
cursor: pointer;
9+
}

assests/css/style.css renamed to assets/css/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ header a.conbtn:hover{
385385
/* apibased section starts */
386386
.apibased{
387387
background: rgb(206, 252, 206);
388-
min-height: 115vh;
388+
min-height: 70vh;
389389
}
390390
.apibased .heading{
391391
text-align: center;

assests/js/projects.json renamed to assets/js/projects.json

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,9 @@
6161
},
6262
{
6363
"name":"Simple Calculator",
64-
"desc":"A Simple Caculator Built Using JQuery With Glassmorphism.",
64+
"desc":"A Simple Caculator Built Using JQuery.",
6565
"meta":"basic-calc"
6666
},
67-
{
68-
"name":"JavaScript Calculator",
69-
"desc":"A Simple Caculator With TiltJS Effects And Glassmorphism.",
70-
"meta":"calc-tilt"
71-
},
7267
{
7368
"name":"Neomorphism Clock",
7469
"desc":"Basic Neomorphism Clock With Hour, Min, Sec With Light And Dark Mode. Tilt Effect.",

assests/js/script.js renamed to assets/js/script.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ $(document).ready(function(){
4343
const projectsContainer = document.getElementById('projects-container');
4444
let project = '';
4545

46-
fetch('https://jigar-sable.github.io/JavaScript-Projects/assests/js/projects.json')
46+
fetch('./assets/js/projects.json')
4747
.then(res => res.json())
4848
.then(projects => {
4949
// console.log(projects);
@@ -52,7 +52,7 @@ fetch('https://jigar-sable.github.io/JavaScript-Projects/assests/js/projects.jso
5252
// console.log(proj);
5353
project += `
5454
<div class="box">
55-
<img src="https://raw.githubusercontent.com/jigar-sable/JavaScript-Projects/main/assests/projects-img/${proj.meta}.PNG" alt="">
55+
<img src="./assets/projects-img/${proj.meta}.png" alt="project">
5656
<div class="content">
5757
<h3>${proj.name}</h3>
5858
<p>${proj.desc}</p>

assests/projects-img/agecalc.PNG renamed to assets/projects-img/agecalc.PNG

File renamed without changes.

assests/projects-img/basic-calc.PNG renamed to assets/projects-img/basic-calc.PNG

File renamed without changes.

assests/projects-img/calc-tilt.PNG renamed to assets/projects-img/calc-tilt.PNG

File renamed without changes.

assests/projects-img/color-switcher.PNG renamed to assets/projects-img/color-switcher.PNG

File renamed without changes.

0 commit comments

Comments
 (0)