Skip to content

Latest commit

 

History

History
115 lines (72 loc) · 6.04 KB

README.md

File metadata and controls

115 lines (72 loc) · 6.04 KB
Raw

Phase-1-Project

Simple Interactive Social Media Website

Details

Author: Mark Brian

Link to Website: https://phase-1-project-rho.vercel.app/

Learning Goals:

  1. Design and architect features across a frontend
  2. Communicate and collaborate in a technical environment
  3. Integrate JavaScript and an external API
  4. Debug issues in small- to medium-sized projects
  5. Build and iterate on a project MVP

Project Requirements

  1. Your app must be a HTML/CSS/JS frontend that accesses data from a public API or from a db.json file using json-server. Your API or db.json should return a collection of at least 5 objects with each object having at least 3 attributes. All interactions between the client and the API should be handled asynchronously and use JSON as the communication format. Try to avoid using an API that requires a key. APIs that are free and require no authorization will be easiest to use. For ideas, see this list of no-auth APIsLinks to an external site.. If you would like to use an API that requires a key, please consult with your instructor on how to protect that key. NEVER push your API key to github!

  2. Your entire app must run on a single page. There should be NO redirects or reloads. In other words, your project will contain a single HTML file.

  3. Use at least 3 distinct event listenersLinks to an external site. (3 events of different types) that enable interactivity. What this means is that, if you had 3 click events, that would only count as 1 distinct event and you would need to add at least 2 more. Think search or filter functionality, toggling dark/light mode, upvoting posts, etc. Each of your event listeners should also have its own unique callback function. These must be added using JavaScript's .addEventListener() method. Events embedded into HTML elements and CSS will not count toward the total. Please ask your instructor if you have questions regarding this requirement.

  4. Your project must implement at least one instance of array iteration using available array methods (map, forEach, filter, etc). Manipulating your API data in some way should present an opportunity to implement your array iteration.

  5. Follow good coding practices. Keep your code DRY (Do not repeat yourself) by utilizing functions to abstract repetitive code.

Pre-requisite Data

  1. Memes Data
  2. Music Data
  3. Random Programming Joke Data
  4. Friend Suggestions Data
  5. Random Technology Quote Data
  6. User GeoData
  7. 40 Random Dogs Data

Deliverables

As a user, one can:

  1. Enter a username and submit it to have it displayed on the website and to customize the caption when changed.
  2. Click on navigation links in the left navigation bar to navigate to different sections of the website faster instead of scrolling.
  3. Interact with an ad at the bottom of the left navigation bar and click on its elements to be directed to the appropriate website endpoint.
  4. Click on the floating Whatsapp Icon at the bottom-right of the website then click on Chat on Whatsapp to reach out to the author of the website via Whatsapp.
  5. View friend suggestions,a random programming joke, a technology-related quote, their geographical data and the date and time of login.
  6. Double click on a meme image to like the meme then double click again to undo the like.
  7. Enter text into the input field below a meme and click on change caption to change the meme's caption(With the username logged in,the username will be appended to the beginning of the caption).
  8. Click on the 'Link to Youtube' text to be directed to a new tab with the clicked music video link on youtube.
  9. Click the Random Dogs Navigation Link to view 40 random dogs.

Pre-requisites

In order to use this website you will need the following:

  • A browser of your choice
  • Operating System (Windows 10+, Linux 3.8+, or MacOS X 10.7+)
  • RAM >= 4GB
  • Free Space >= 2GB

User Manual

To access the website, click the link provided at the beginning of this document.

To have a username displayed on the website

Enter a username in the form towards the top left corner and submit it by clicking the button or clicking ENTER(Windows)/RETURN(MAC OS).

Is successful if the form disappears and the username is displayed

To navigate through the website sections

Click on a navigation link of choice in the left navigation bar to navigate to its section.

To interact with the advertisement on the website
  1. Click on any element(username,profile photo or name) in its header to view the profile.
  2. Click on the arrows to navigate through the account's feed.
  3. Click on an item in the feed to view the feed in pop-up mode and display additional details about the posts.
To reach out to the website author via whatsapp

Click on the floating Whatsapp Icon at the bottom-right of the website then click on Chat on Whatsapp.

To scroll through memes

Scroll using the mouse or scroll bar. One can move from one meme to the next by pressing the space-bar.(I don't know why this worked tbh)

To like a meme

Double click on a meme image.

To undo liking, double click the meme image once more.

To change a meme's caption

Enter text into the input field below a meme and click on change caption. One can Enter text then press tab to select the button then press ENTER/RETURN to change the caption.

With the username logged in,the username will be appended to the beginning of the caption

To watch a music video on Youtube

Click on the 'Link to Youtube' text to be directed to a new tab with the clicked music video.

To view 40 random dogs

Click the Random Dogs Navigation Link.