Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christianjtr/vanila-javascript-exercise
Assessment that contains a simple layout made with vanilla javascript, css, and html to practice basis without framework
https://github.com/christianjtr/vanila-javascript-exercise
books-api bulma-css bulma-css-framework css html javascript vanilla vanilla-javascript
Last synced: about 1 month ago
JSON representation
Assessment that contains a simple layout made with vanilla javascript, css, and html to practice basis without framework
- Host: GitHub
- URL: https://github.com/christianjtr/vanila-javascript-exercise
- Owner: christianjtr
- Created: 2024-02-23T12:15:36.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-02-25T01:59:31.000Z (9 months ago)
- Last Synced: 2024-10-02T05:41:40.650Z (about 2 months ago)
- Topics: books-api, bulma-css, bulma-css-framework, css, html, javascript, vanilla, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 773 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Assestment
Follow the next tasks in order to develop a basic book list using vanilla javascript.
## Task/exercises for candidates as frontend developers.
1.- Using public Google Books API `httpps://www.googleapis.com/books/v1/volumes?q=javascript` (No API key necessary) do the next:
- Before executing the request, you must create a new Book object constructor, which contains properties for: **title, authors, publishedDate, publisher and categories**.
- Iterate through the response content and create Book object instances that you prepared in previous step, with available values for each found book and store them in a new Array.
- Output all books to the Javascript console formated like **title, authors, publishDate, publisher, [category1, category2, …]**```
V.g. Javascript: The definitive guide (Activate your Web
Pages), David Flanagan, 2011-04-18, “O’Reilly Media, Inc.”,
[Computers]
```
Consider adding appropriate method to the object constructor to create a formated
string.
- Do the following tasks:
- Sort the Array created in 1) by publishedDate and output in console.
- Calculate and output the average rating of the “Computers” books.
- Do the following tasks:
- Extend the basic Book object and create a new AvailableBook object constructor that inherits all basic book properties and adds 2 new properties for listPrice (listPrice.amount) and buyLink.
- Every AvailableBook instance show now have 2 additional methods: getPrice() and getBuyLink() that returns the price and the link respectively. Also overwrite the toString() method for an extended formated representation of an AvailableBook instance by adding the additional properties:
```
V.g. … - 43.56€ at
https://play.google.com/store/books/details?id=6TA0DdEIxrgC
&rdidi=book-6TAODdEIxrgC&rdot=1&source=gbs_api
```- Create a simple HTML page to display the books in a list using standard DOM manipulation
operations.
- Encapsulate both new object constructors into a namespace structure using a simple
modularization approach.## How to run the project
Clone the repository:
```shell
git clone https://github.com/christianjtr/vanila-javascript-exercise.git
```Noticed you will need a `live server` to launch the project.
**Alternatives**
- [VSCODE Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [npm live-server](https://www.npmjs.com/package/live-server)## Result
Basic layout with the sample result.
![](./demo/books.png)
## Technologies
Vanilla Javascript, CSS, Bulma CSS.