Build a Web Page - 11/05/2017 17:37 EDT

Your job is to develop a front end for the posts and comments routes of this fake API. You are free to use whatever front-end framework you see fit for the project. You must implement the following views.

Navbar (Sticks to top)

On Desktop, there should be 2 buttons side-by-side for Home and About. On mobile sized browsers, the should be a button that slides down a menu containing the Home and About options. The nav bar should dynamically load page content, without reloading the page.

Home: the page containing the list of posts

About: a carousel of 4 randomly selected posts

Desktop:

[ Home | About ]

Mobile:

| |Hamburger Menu Btn v|

| Home |

| About |

Homepage (Scrolling list of posts)

A front end view of the JSON data from the following posts: [url removed, login to view] The homepage should be a list of posts with a box to create a post.

Each post must be clickable/have a link to a post details page containing the post, author (retrieved by ID from [url removed, login to view] or for specific users [url removed, login to view] ), and comments.

The posts list page should periodically refresh and update the page using AJAX.

There is no requirement for login/logout. All CRUD function for posts and post comments should be implemented.

Each post should contain the ‘title’, ‘body’, the poster’s ‘name’ and their ‘city’, and the number of comments on that post.

Each post should also include a “Read Comments” button that expands the div to show all the comments on that post. The button should then toggle to read “Hide Comments”, and pressing it will undo the div expansion. The comments should include the ‘name’ (key in the comments JSON), ‘body’ and the name of the poster

The page should contain a sticky navbar, there is a rough layout under the Navbar section.

About Us Page

The About page should contain a carousel of 4 slides. There should be 4 clickable “buttons” to allow the users to instantly switch to a certain slide. Clicking the right side of the carousel should switch the to the next slide. Clicking the left side should switch to the previous slide. The carousel should automatically switch to the next slide every 7 seconds, unless the user’s mouse is over the slide.

The contents of each slide should contain 4 random posts, which include the ‘title’ of the post and the ‘name’ of the poster. The background should be a different color for each slide. The colors used should be red, blue, yellow, and green. The order of the colors and the corresponding text color of each slide is at your discretion.

The randomness of the posts should be defined on each page load. Meaning once the page loads, each slide should have 4 set posts. But the next time the page loads, it will select 4 new random posts. The same 4 posts should be maintained while switching between slides if the page has not been reloaded.

Important Things to Note:

Use this project as an opportunity to showcase your skillset. It is not recommended to simply just meet each requirement to the minimum extent.

The website should be responsive (things move around to fit in the page based on browser height/width). I.e. It should also adapt to a mobile browser.

AJAX HTML JavaScript Diseño de sitios web

Nº del proyecto: #14005048

Sobre el proyecto