- Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables
- Tailwind styling used for search form and search results cards
- Note: to open web links in a new window use: ctrl+click on link
![GitHub last commit](https://camo.githubusercontent.com/36ccebe76461f19dfe57fc79a9f3cae4d24e58cd838d09f59ebedfe46bd42d99/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f416e647265774a426174656d616e2f616e67756c61722d72786a732d6170693f7374796c653d706c6173746963)
- Displays Wikipedia API JSON search data
- Wikipedia API does not require an API key
- RxJS pluck operator used
![screenshot](./img/searchpanel.png)
- Install dependencies using
npm i
- Run
ng serve
for a dev server. Frontend will open at http://localhost:4200/
- refreshes on code changes
- Run
npm run build
to create build folder
- Run
ng test
to run Jasmine unit tests via Karma. Testing not set up
- Article card using Tailwind CSS styling and data-binding of search results
<article class="flex flex-wrap max-w-xl mx-auto shadow-lg md:flex-nowrap">
<div class="p-4 my-auto">
<h1 class="text-2xl font-semibold text-gray-800">{{ article.title }}</h1>
<p class="mt-2 text-base text-gray-600" [innerHTML]="article.snippet">
</p>
</div>
</article>
- Small build bundle size due to Tailwind styles (288kB)
๐ Status, Testing & To-Do List
- Status: Working. Deployed to Github pages
- To-Do: Optional nav-bar and about/contact pages
- This project is licensed under the terms of the MIT license.