We would like you to demonstrate your development skills by delivering a single page web site based on a set of requirements that match the way we deliver solutions within our team.

• We don't expect that this task should take longer than 2 hours. However, the amount of time you spend is entirely up to you
• You will need a GitHub account to clone this repository (Developer-Interview-Task)
• Once you have finished, please push it to your own GitHub repository and let us know

=======

During the face-to-face interview we would like to discuss your solution and your approach. We will expect you to demonstrate how the acceptance criteria have been met and also any challenges you faced during development, together with any enhancements that you'd make if you had further time.

If you have any questions, please get in touch.

Good luck :)

The Marie Curie Caring Services department wish to better promote their Helper service on the charity's website.

The Helper Service matches trained volunteers with people living with a terminal illness and provides support to them or their families. Support is provided free of charge and is available to people aged 18 or over with any terminal illness, and their families

The Website Scrum team Product Owner and Business Analyst have agreed with the Caring Services team that a page will be developed for the website that will list out available Helper Services; show how they can be contacted and dynamically highlight if and when they can be contacted.

The following user story and acceptance criteria was created and will be used by the team to design and validate their work.

See image below for an idea of how the page will look - the template has been provided for you

"As a website user who needs help and support I want to be able to find Helper Services so that I know what support is available to me and how to contact them"

Background: GIVEN I am on the Marie Curie website

WHEN I view the Helper Service page

AC1: Display

THEN I want to see a list that contains all Marie Curie Helper Services

AC2: Detail

THEN each Helper Service list item will have the following properties: Title - linked to a page (https://www.mariecurie.org.uk/help/helper-volunteers), Description, Telephone number and a currently open / closed status

AC3: Dynamic status

THEN I want to see whether the helpline is OPEN or CLOSED with the label copy as per below

OPEN - OPEN TODAY UNTIL {closing time}

CLOSED - REOPENS {day} at {opening time}

AC4: Visual

THEN the Helper Service list item displays a clear visual representation of whether it is the service is open or closed

Use grey background on card for closed, and orange for open

The style sheet classes that you will need to use to indicate the closed and open states are –

bg-color-light-grey and bg-color-donation-orange

AC5: Backend

Create a simple logger service (from scratch, to a file) that can capture all requests made to the service (maybe write out time of access, IP address - anything you'd like), plus log any errors that the application generates.

AC6: Backend

We'd like the current weather for each of the helper regions under their name - rough location is fine. Create a button, that when pressed calls an action on a controller that sends a request to a weather API https://openweathermap.org/current (full documentation on that page) and display the response on the page. Do not worry too much about the presentation - this isn't a test of front-end skills.

The code that handles the Helper Service inforation has been provided for you.