Commit 4bf738d

committed

css fixes

1 parent 791d370 commit 4bf738dCopy full SHA for 4bf738d

File tree

+58

-3

lines changed

+58

-3

lines changed

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,8 @@`
`16`	`16`	`<input type="search" name="search box" class="search__input" placeholder="Search an Article">`
`17`	`17`	`<button class="btn cta" onclick="getTheArticle()" value=""> search </button>`
`18`	`18`	`</div>`
	`19`	`+`
	`20`	`+ <div class="searchResults"></div>`
`19`	`21`	`<script src="main.js"></script>`
`20`	`22`	`</body>`
`21`	`23`	`</html>`

Lines changed: 25 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -13,16 +13,40 @@ function getTheArticle(){`
`13`	`13`	`isLoding = true;`
`14`	`14`	`fetch(searchArticleUrl)`
`15`	`15`	`.then(res=>res.json())`
`16`		`- .then(data=>console.log(data))`
	`16`	`+ .then(data=>{`
	`17`	`+ console.log(data)`
	`18`	`+ const articles = data.query.search;`
	`19`	`+ displayArticles(articles);`
	`20`	`+ })`
`17`	`21`	`.then(err=>console.log(err))`
`18`	`22`	`isLoding = false;`
`19`	`23`	`//reset the search bar`
`20`	`24`	`}`
`21`	`25`
`22`	`26`	`function displayArticles(articles){`
`23`	`27`
	`28`	+ // Store a reference to `.searchResults`
	`29`	`+ const searchResults = document.querySelector('.searchResults');`
	`30`	`+ // Remove all child elements`
	`31`	`+ searchResults.innerHTML = '';`
	`32`	`+`
	`33`	`+ // Loop over results array`
	`34`	`+ articles.forEach(article => {`
	`35`	+ const url = encodeURI(`https://en.wikipedia.org/wiki/${article.title}`);
	`36`	`+`
	`37`	`+ searchResults.insertAdjacentHTML('beforeend',`
	`38`	+ `<div class="resultItem">
	`39`	`+ <h3 class="resultItem-title">`
	`40`	`+ <a href="${url}" target="_blank" rel="noopener">${article.title}</a>`
	`41`	`+ </h3>`
	`42`	`+ <span class="resultItem-snippet">${article.snippet}</span><br>`
	`43`	`+ <a href="${url}" class="resultItem-link" target="_blank" rel="noopener">${url}</a>`
	`44`	+ </div>`
	`45`	`+ );`
	`46`	`+ });`
`24`	`47`	`}`
`25`	`48`
	`49`	`+`
`26`	`50`	`function displayLoadingSpinner(){`
`27`	`51`
`28`	`52`	`if(isLoding)console.log('display spinner')`

Lines changed: 31 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ html{`
`12`	`12`
`13`	`13`
`14`	`14`	`.search{`
`15`		`- margin: 10% auto;`
	`15`	`+ margin: 1rem auto;`
`16`	`16`	`height: 20rem;`
`17`	`17`	`width: 20rem;`
`18`	`18`	`display:flex;`
`@@ -22,6 +22,23 @@ html{`
`22`	`22`	`background-color: rgb(122, 121, 118);`
`23`	`23`	`}`
`24`	`24`
	`25`	`+.searchResults{`
	`26`	`+ margin: 5rem 40rem ;`
	`27`	`+ width: 55rem;`
	`28`	`+ text-align: left;`
	`29`	`+ font-size: 1.2rem;`
	`30`	`+}`
	`31`	`+`
	`32`	`+.resultItem {`
	`33`	`+ opacity: 0;`
	`34`	`+ margin-bottom: 20px;`
	`35`	`+ animation: show 0.5s forwards ease-in-out;`
	`36`	`+ color: white;`
	`37`	`+ border-radius: 2px;`
	`38`	`+ padding: 10px;`
	`39`	`+ width: 100%;`
	`40`	`+ }`
	`41`	`+`
`25`	`42`	`a{`
`26`	`43`	`height: 2rem;`
`27`	`44`	`background-color: aliceblue;`
`@@ -34,4 +51,16 @@ a{`
`34`	`51`
`35`	`52`	`.search__input{`
`36`	`53`	`background-color: aliceblue;`
`37`		`-}`
	`54`	`+}`
	`55`	`+`
	`56`	`+@keyframes show {`
	`57`	`+ 0% {`
	`58`	`+ opacity: 0;`
	`59`	`+ transform: translateY(100px);`
	`60`	`+ }`
	`61`	`+`
	`62`	`+ 100% {`
	`63`	`+ opacity: 1;`
	`64`	`+ transform: translateY(0);`
	`65`	`+ }`
	`66`	`+ }`

Comments

(0)