Student.com Frontend Task

README.md

Student.com Frontend Task

Outline

Build a single page that will provide information and photos of the different room types of a property based on the desktop and mobile wires.

Criteria

• The page should be functional and presentable in modern browsers and devices
• The provided wireframes are to be used as a guideline of functionality only. We encourage you to make design changes that improve the user experience.
• The room types are expanded in desktop but collapsed in mobile. There should be transitions when navigating between the room types in mobile. You are free to come up with what this transition looks like.
• Please satisfy the following "Dynamic Content" user story:

Dynamic Content

As a user I want to be encouraged by how many friends of mine have stayed in a room I'm viewing. I don't need to see all my friends, just a summary.

Provided is friends.json which includes an object of rooms with lists of friends who stayed in each room. Based on the data per room, you will need to show the information to the user sorted by name ascending. For example:

• if 0 friends, then don't show any message
• if 1 friend, then show "Jane Doe has stayed here"
• if 2 friends, then show "Jane Doe and John Doe have stayed here"
• if 3 friends, then show "Jane Doe, John Doe, and 1 other friend have stayed here"
• if 4 or more friends, then show "Jane Doe, John Doe, and 2 other friends have stayed here"

Submission

• Please make your test available as a git repo we can clone locally to play with.
• Please include a README in Markdown format with an explanation that talks about your technology decisions and anything else you want us to know about your task.

Questions

Feel free to email any questions to daniel.antelo@student.com

friends.json

{
    "deluxe": {
        "friends": [
            "Bob Smith",
            "Jane Doe",
            "Bubba Hyde",
            "Betsy Toheavens"
        ]
    },
    "shared": {
        "friends": [
            "Bob Smith"
        ]
    },
    "animal-friendly": {
        "friends": [
            "Bob Smith",
            "Jane Doe",
            "Bubba Hyde"
        ]
    },
    "another": {
        "friends": [
            "Bob Smith",
            "Jane Doe"
        ]
    },
    "and-another": {
        "friends": []
    }
}

wireframe_desktop.png

wireframe_mobile.png