Skip to content

Commit 791d370

Browse files
fullstackNRJfullstackNRJ
committed
day 29
1 parent 1a8fe90 commit 791d370

File tree

4 files changed

+109
-0
lines changed

4 files changed

+109
-0
lines changed

‎each day build day!/Day 29/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# A Wikipedia Viewer
2+
3+
This is the fifth project for Free Code Camp's Front-End certificate.
4+
5+
Completed On: 06 May 2020
6+
7+
## Objectives
8+
9+
Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/.
10+
11+
**Rule #1**: Don't look at the example project's code. Figure it out for yourself.
12+
13+
**Rule #2**: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
14+
15+
## User Stories
16+
17+
- I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
18+
- I can click a button to see a random Wikipedia entry.
19+
20+
# Demo
21+
![]()

‎each day build day!/Day 29/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Random Wiki Article 📄 </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="search">
12+
<div class="search__btn">
13+
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" rel="noopener">Random Article</a>
14+
</div>
15+
16+
<input type="search" name="search box" class="search__input" placeholder="Search an Article">
17+
<button class="btn cta" onclick="getTheArticle()" value=""> search </button>
18+
</div>
19+
<script src="main.js"></script>
20+
</body>
21+
</html>

‎each day build day!/Day 29/main.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
3+
let isLoding = false;
4+
5+
function getTheArticle(){
6+
const input = document.querySelector('.search__input').value
7+
console.log(input)
8+
keywords = input.trim();
9+
number = 2;
10+
limit = 10;
11+
const searchArticleUrl = `https://en.wikipedia.org/w/api.php?origin=*&action=query&list=search&format=json&srlimit=${limit}&srsearch=${keywords}&sroffset=${number}`;
12+
13+
isLoding = true;
14+
fetch(searchArticleUrl)
15+
.then(res=>res.json())
16+
.then(data=>console.log(data))
17+
.then(err=>console.log(err))
18+
isLoding = false;
19+
//reset the search bar
20+
}
21+
22+
function displayArticles(articles){
23+
24+
}
25+
26+
function displayLoadingSpinner(){
27+
28+
if(isLoding)console.log('display spinner')
29+
}
30+

‎each day build day!/Day 29/style.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
html{
2+
font-size: 62.5%;
3+
box-sizing: border-box;
4+
}
5+
6+
*,*::before,*::after{
7+
margin: 0;
8+
padding: 0;
9+
box-sizing: inherit;
10+
background-color: #333;
11+
}
12+
13+
14+
.search{
15+
margin: 10% auto;
16+
height: 20rem;
17+
width: 20rem;
18+
display:flex;
19+
flex-direction: column;
20+
justify-content: space-evenly;
21+
align-items: center;
22+
background-color: rgb(122, 121, 118);
23+
}
24+
25+
a{
26+
height: 2rem;
27+
background-color: aliceblue;
28+
cursor: pointer;
29+
}
30+
31+
.btn .cta{
32+
33+
}
34+
35+
.search__input{
36+
background-color: aliceblue;
37+
}

0 commit comments

Comments
 (0)