Commit 791d370

committed

day 29

1 parent 1a8fe90 commit 791d370Copy full SHA for 791d370

File tree

+109

-0

lines changed

+109

-0

lines changed

Lines changed: 21 additions & 0 deletions

Original file line number	Diff line number	Diff 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`	`+![]()`

Lines changed: 21 additions & 0 deletions

Original file line number	Diff line number	Diff 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>`

Lines changed: 30 additions & 0 deletions

Original file line number	Diff line number	Diff 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`	`+`

Lines changed: 37 additions & 0 deletions

Original file line number	Diff line number	Diff 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`	`+}`

Comments

(0)