artismarti / taboola-articles

Taboola Articles

ASSUMPTION:

The API returns data with the names that I have used.

Notes:

In the absence of an actual API I have rendered all the HTML here manually. If I had access to the API I would have used the widget.js file in index.html to render the html

Build responsive page that shows articles

Build a ​responsive​ Taboola widget with the following requirements.

Requirements:

1. For desktop and tablet, the widget should be three columns and two rows (3x2). Includethe item title and branding below each image. Add a header to the top of the widgetwith your choice of text.
2. For smartphone, the widget should be one column with six rows (1x6). Include the itemtitle and branding below each image. Add a header to the top of the widget with yourchoice of text.
3. For each item in the widget, the thumbnail image, item title, and branding text shouldbe clickable links that load the url of that item (use the corresponding item ​url​ value provided in the response).

Please refer to the below Taboola Widget Glossary for identification of the elements that makeup the widget. You are welcome to use similar styling for the widget you build, or you can dosomething different. For reference, you can see a live responsive Taboola widget in the wild atthe bottom of the article on this page:https://www.bild.de/unterhaltung/royals/royals/prinz-charles-feiert-70-geburtstag-worin-er-schon-laengst-koenig-ist-58420240.bild.html

IMPORTANT: You can only use pure HTML, CSS, and JavaScript to build and display the widget.Do not use any external libraries (e.g. jQuery, Bootstrap).