techdegree-fewd-project-7

Mobile-first

1. [DONE] The HTML file includes the viewport meta tag in the head of each document.
2. [DONE] A mobile-first approach is utilized using min-width properties for media queries.
3. [DONE] Appropriate media queries are in place and the content responds to mobile (320px), tablet (768px) and desktop (1024px) screen sizes.
4. [DONE] Use CSS grid to lay out the main elements (header, sidebar navigation, main content) on the page.

---

Alert Notifications

1. [DONE] Includes alert banner that user can close.
2. [DONE] Includes an alert icon in the header with a marker to notify the user of new alerts and messages.
3. [DONE] Add a CSS transition to the bell icon when the user hovers over it.

Exceeds Expectations

1. [DONE] Displays at least two notifications at the same time when the user clicks the alerts icon (this could be a pop-up window or dropdown menu).

---

Chart Widgets

1. [DONE] Successfully implements chartjs.org for the charts:

• [DONE] Web Traffic (line chart)
• [DONE] Daily Traffic Bar Chart (bar chart)
• [DONE] Mobile User Pie Chart (donut chart)

2. [DONE] General spacing and arrangement of the elements matches the layout of the widgets in the mockup.

Exceeds Expectations

1. [DONE] Traffic chart widget:

• Includes navigation allowing user to switch between viewing an Hourly, Daily, and Weekly chart.

2. [DONE] Traffic chart widget:

• Hourly, Daily, Weekly and Monthly buttons display a different line chart on click.

---

Social Network Information

1. [DONE] Includes a widget (or three separate widgets) that display social network stats for three social networks.
2. [DONE] SVG icons are added as inline SVG's.
3. [DONE] SVG fill colors have been changed to match the mockups.
4. [DONE] General spacing and arrangement of the elements match the layout of the widget in the mockup.

---

New Members and Recent Activity

1. [DONE] Includes a widget that lists out new members and displays an avatar, member name, email and join date for each member.
2. [DONE] Includes a Recent Activity widget that displays an avatar, type of activity, and time since activity for each member.
3. [DONE] General spacing and arrangement of the elements matches the layout of the widgets in the mockup.

---

Message User Widget

1. [DONE] Implement a messaging widget that includes the following:

• [DONE] A field for searching for a user. (Real search functionality is not required.)
• [DONE] A message textarea field that lets a user add a message.
• [DONE] A “Send” button that uses JS to allow a user to submit the form and display a confirmation the message was sent.
• [DONE] Uses JS to display error messages if both or either the user or message field is empty.

2. [DONE] General spacing and arrangement of the elements matches the layout of the widget in the mockup.

Exceeds Expectations

1. [DONE] Displays working autocomplete search input field that lets the user search for members.

---

Settings Widget

1. [DONE] The settings widget has been created and displays the following settings options:

• [DONE] An on/off widget for whether to send email notifications.
• [DONE] An on/off widget for whether to set profile to public or private.
• [DONE] A dropdown to select timezone options.
• [DONE] Save and Cancel buttons (these do not have to do anything functional).

Exceeds Expectations

1. [DONE] Local storage is used to save the settings. When page is reloaded the settings are remembered.