Skip to content

Latest commit

 

History

History
184 lines (137 loc) · 12.3 KB

README.md

File metadata and controls

184 lines (137 loc) · 12.3 KB

Enviornment Web Application

FED Assignment 2

Group Members Features
Enjia Quiz, Community, Profile page and login system
Wenya Home, Contact, About page and login interface
Kaylea FAQ, News page and statistics popup

This project aims to create a web application that fosters a heightened awareness of environmental issues and actively engages the general public in challenges geared towards environmental conservation. The platform is designed to cater to two distinct groups of users. Firstly, environmental enthusiasts who are eager to enrich their journey towards sustainability and a community to support them. Secondly, individuals who seek to expand their knowledge on effective contributions to environmental preservation. This web application aims to encourage users to partake in eco-friendly challenges, elevate their understanding of the current state of the environment, and establish a readily accessible community for both environmental enthusiasts and those aspiring to embark on an environmental journey.

Github Page
Video Pitch

Design Process

The website is designed to provide an engaging and comprehensive experience for the general public interested in our environment by providing a responsive and gamified design.

As a user, I want a quick and easy way to access all parts of the website.

  • The navigation bar contains all the essential buttons for easy access to the different pages of the website, ensuring a seamless and straightforward user experience.

As a user, I want to see the latest environmental news and updates.

  • The news page highlights recent environmental news articles, keeping users informed about current events and developments in the environmental field.

As a user, I learn about the environment in an engaging and involved manner

  • The quiz feature allows users to test their knowledge and learn in an engaging and involved manner.

As a user, I want to discover ways to take action and make a positive impact on the environment.

  • The community page shows information about various events related to the environment such as volunteering projects and webinars that people can join and participate in.

As a user, I want to be able to clarify any questions I may have about the website

  • The FAQ page contains the many answers to questions that the user may have while navigating the website, and should their question not be there, the user can reach out to us for more information via the Contact Us page.

As a user, I want to have a personalised learning experience

  • The user can create an account with their own username and level tracking, allowing for a sense of individuality and personalisation.

As a user, I want to feel a sense of accomplishment as I learn

  • The level system rewards the user with XP when they complete a quiz, offering a sense of accomplishment and progression through gamification.

As a user, I want to know the details of my account

  • The profile page displays details of the user's account, which the user can view at any time and personalize their experience.

As a user, I want to know about the purpose of the website

  • The About page explains the intentions and goals behind the creation of this website and allows the user to become familiar with its purpose

In conclusion, we designed this website to educate users on the environment in an engaging way. The website has gamification features to enhance the user experience and seeks to inspire users to bring about positive environmental change.

Figma Link

Features

Existing Features

• News page - Fetches data from an API and displays News articles. Allows users to keep up with the latest news regarding the environment, as well as linking them to the original article should they wish to know more

• Responsive Navigation Bar - Provides a visually appealing and accessible navigation bar that transforms into a hamburger menu for smaller screens, ensuring seamless navigation across devices.

• Statistics popup – A popup shows up-to-date data regarding the environment to raise awareness of the severity of climate change to inspire users to take action.

• FAQ – Users can clear their uncertainties about using and navigating the website. Users can click on the questions to see the answers.

• Home page - Introduction to the website, talks about the benefits and importance of recycling and links to all the other pages in the website.

• About page - The About page explains the intentions and goals behind the creation of this website, it seeks to motivate and inspire the user to join us in pushing for a greener world.

• Community page - The community page is for people to post and read about environmental events such as volunteering projects and webinars that people can join and participate in. They can edit, delete and add posts.

• Contact page - Allows users to get in contact with us and provide feedback and report on problems that we may have missed during development, as well as ask questions that are not already included in the FAQ

• Account creation - Allows the user to have a more personalised experience, as well as track their progress

• Levelling and XP - Completing quizzes allows the user to gain XP and level up, this gives the user a sense of progression when completing a quiz, and encourages them to strive to do better to get more xp. This is a gamification feature.

• Profile page - The profile page shows information about the user's account, adds some personality sparkle individualism personalisation

• Quiz - The quiz allows users to test their knowledge and learn in an engaging and involved manner by generating random questions and answers that align with the topic of Science and Nature.

Features left to implement

1. Enhanced Hover Effects for Images

2. One-time log-in to access the entire website

3. Smooth visual transitions between sections and pages

Technologies Used

1. HTML

  • This project uses HTML as the markup language.

2. CSS

  • This project uses CSS for styling and formatting.

3. JavaScript

  • This project uses JS to enhance the features of the website.

4. Rest DB

  • This project uses Rest DB as the database to store necessary information.

5. Trivia API

  • This project uses Trivia API to generate questions and answers for the quiz.

6. Climate News API

  • This project uses Climate News API to generate news articles on the news page.

7. Live World Data API

  • This project uses Live World Data API to generate statistics for the home page pop-up.

Testing

Responsive Design - Test on Different Browsers

  1. Verify that the content does not spill out of the page as the screen size decreases.
  2. Verify that the content shrinks in size, including font size and image size.
  3. Verify that the content remains visually appealing and all functions continue to work normally as the screen size changes.

Contact Form

  1. Go to the "Contact" page
  2. Verify that a "Success" pop up is shown upon submission of form

Newsletter

  1. Go to the "Home" page
  2. Verify that a "Success" pop up is shown upon click of subscribe

Community - Add new post

  1. Go to the "Community" page
  2. Click on the "Add new post" button
  3. Try to submit the empty form and verify that it will prompt you to fill up the empty inputs
  4. Try to submit the form with an invalid email address and verify that a relevant error message appears.
  5. Try to submit the form with a description of less than 50 words and verify that a relevant error message appears.
  6. Try to submit the form with all inputs valid and verify that a success message appears and that your post can be seen.

Community - Edit post

  1. Go to the "Community" page
  2. Hover over the elipses on the top right side of a post and click edit
  3. Verify that all the inputs have been filled up with the respective post information
  4. Try to remove text from an input and verify that it will prompt you to fill up the empty inputs
  5. Try to submit the form with an invalid email address and verify that a relevant error message appears.
  6. Try to submit the form with a description of less than 50 words and verify that a relevant error message appears.
  7. Try to submit the form with all inputs valid and verify that a success message appears and that your post has been updated.

Community - Delete post

  1. Go to the "Community" page
  2. Hover over the elipses on the top right side of a post and click delete
  3. Verify that your post has been deleted and is no longer displayed in the community page.

Log-in

  1. Click on the Login button at the top right of the screen
  2. Verify that a form appears
  3. Try to submit the empty form and verify that it will prompt you to fill up the empty inputs
  4. Try to submit the form with an invalid email address and verify that a relevant error message appears.
  5. Try to submit the form with a registered email address and wrong password and verify that a relevant error message appears
  6. Try to submit the form with all inputs valid and verify that login button has changed to a profile icon.

Register

  1. Click on the Login button at the top right of the screen
  2. Verify that a form appears
  3. Click on the register button at the bottom of the form
  4. Try to submit the empty form and verify that it will prompt you to fill up the empty inputs
  5. Try to submit the form with an invalid email address and verify that a relevant error message appears.
  6. Try to submit the form with all inputs valid and verify that a success message appears.

Quiz

  1. Go to the "Quiz" page
  2. Click on the start button
  3. Verify that the questions and answers show up neatly
  4. Click on an option
  5. Verify that option turns red or green upon selection and that question details change
  6. At the end of the quiz, verify that quiz points are correct and user xp has changed.

Credits

Media

Acknowledgements