My seventh Front-end Web Development Techdegree project.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
icons
img
js
README.md
index.html

README.md

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)
  1. [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.
  1. [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.
  1. [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.