GeeMail is a coding exercise meant to simulate an e-mail web application inbox.
With this coding challenge you will be creating a simulation of a little known current e-mail web application you may or may not have heard of.
We have created a basic mail generator script for you that will load a handful of pre-populated messages when your application loads and you will be requried to consume that data and build out UI elements to display that data along with populating new messages and some other basic functionality.
You will need the following tools to complete this challenge
- A personal GitHub account
- Sublime Text 3
- Git
- Fork this repository to your own GitHub profile and clone to your local machine.
-
Create a basic page layout via HTML/CSS with a top header section with the name of the application and a content section where you will display the messages.
-
When your page loads, via JavaScript access our prepopulated data stored in the
window.geemailsvariable. Each object in the array has the following properties:- date - The date message was sent
- subject - The subject of the message
- sender - The sender of the message
- body - The GeeMail message content
-
With this data you must make a visual list of mail messages on the page with the following minimum requirements.
- Each message should have it's own row showing:
- Date
- Sender
- Subject
- When clicking on a message you must provide some method of showing the message for that row.
- Each message should have it's own row showing:
-
You must show an inbox count somewhere on the page to show the current number of messages in your inbox.
-
Set a recurring function to via the JavaScript
setIntervalfunction that will call our existinggetNewMessagefunction that we have created for you that will return a newly created message with the same properties as your previous messages. -
All CSS styles should be created in the
css\style.cssfile included in the project. -
All JavaScript should be created in the
<head>element in your includedindex.htmlfile inside of the window.onload function already created in the<head>section. -
Commit your code often and when you are completed send us a pull request from your repository so that we may review your code.
Bonus: You may add any images or any extra functionality that you wish to your application and use any other JavaScript frameworks if you like.