The implementation of this application is completed as an exercise for CS50's Web Programming with Python and Javascript, an online course offered by Harvard University.
The requirement was to design a frontend for an email client that makes API calls to send, receive, and update emails, using the API provided by the application.
This single-page-app had to be completed using JavaScript, HTML, and CSS. Django, a Python-based framework, is used for the backend.
- From
mail/
runpython manage.py runserver
- To interact with the website, it is either possible to create a new account or log in with the following test accounts :
-
username:
smurfette@gargamail.com
-
password:
Smurfette
-
username:
brainy@gargamail.com
-
password:
Brainy
-
Using JavaScript, HTML, and CSS, complete the implementation of your single-page-app email client inside of inbox.js
(and not additional or other files; for grading purposes, we’re only going to be considering inbox.js
!). You must fulfill the following requirements:
- Send Mail: When a user submits the email composition form, add JavaScript code to actually send the email.
- You’ll likely want to make a
POST
request to/emails
, passing in values forrecipients
,subject
, andbody
. - Once the email has been sent, load the user’s sent mailbox.
- You’ll likely want to make a
- Mailbox: When a user visits their Inbox, Sent mailbox, or Archive, load the appropriate mailbox.
- You’ll likely want to make a
GET
request to/emails/<mailbox>
to request the emails for a particular mailbox. - When a mailbox is visited, the application should first query the API for the latest emails in that mailbox.
- When a mailbox is visited, the name of the mailbox should appear at the top of the page (this part is done for you).
- Each email should then be rendered in its own box (e.g. as a
<div>
with a border) that displays who the email is from, what the subject line is, and the timestamp of the email. - If the email is unread, it should appear with a white background. If the email has been read, it should appear with a gray background.
- You’ll likely want to make a
- View Email: When a user clicks on an email, the user should be taken to a view where they see the content of that email.
- You’ll likely want to make a
GET
request to/emails/<email_id>
to request the email. - Your application should show the email’s sender, recipients, subject, timestamp, and body.
- You’ll likely want to add an additional
div
toinbox.html
(in addition toemails-view
andcompose-view
) for displaying the email. Be sure to update your code to hide and show the right views when navigation options are clicked. - See the hint in the Hints section about how to add an event listener to an HTML element that you’ve added to the DOM.
- Once the email has been clicked on, you should mark the email as read. Recall that you can send a
PUT
request to/emails/<email_id>
to update whether an email is read or not.
- You’ll likely want to make a
- Archive and Unarchive: Allow users to archive and unarchive emails that they have received.
- When viewing an Inbox email, the user should be presented with a button that lets them archive the email. When viewing an Archive email, the user should be presented with a button that lets them unarchive the email. This requirement does not apply to emails in the Sent mailbox.
- Recall that you can send a
PUT
request to/emails/<email_id>
to mark an email as archived or unarchived. - Once an email has been archived or unarchived, load the user’s inbox.
- Reply: Allow users to reply to an email.
- When viewing an email, the user should be presented with a “Reply” button that lets them reply to the email.
- Pre-fill the composition form with the
recipient
field set to whoever sent the original email. - Pre-fill the
subject
line. If the original email had a subject line offoo
, the new subject line should beRe: foo
. (If the subject line already begins withRe:
, no need to add it again.) - Pre-fill the
body
of the email with a line like"On Jan 1 2020, 12:00 AM foo@example.com wrote:"
followed by the original text of the email.