Project

HTML, CSS, and JavaScript

Overview

For this cumulative assessment on HTML, CSS, and JavaScript, you will select and complete one of the following Frontend Mentor challenges:

IP Address Tracker: Build an application that tracks and displays the location of a given IP address using the IP Geolocation API by IPify and LeafletJS for map rendering.
- Click here to download the starter files.
URL Shortening API Landing Page: Create a landing page that integrates with the bitly API to shorten URLs, featuring a list of shortened links and the ability to copy them to the clipboard.
- Click here to download the starter files.
- Important Note: Due to Cross-Origin Resource Sharing (CORS) policies causing errors with the originally suggested CleanURI API, we have modified this project to use the bitly API.
REST Countries API with Color Theme Switcher: Develop an application that fetches data from the REST Countries API , displays country information, and includes a color theme switcher for light and dark modes.
- Click here to download the starter files.

The code, briefs, and images for each challenge are included within this module as well, for reference. You should use the material included with this module, just in case the challenges changes in scope or

This project aims to assess your ability to apply the skills and knowledge acquired throughout the course in a practical, real-world scenario. Choose the challenge that best aligns with your interests and strengths, and demonstrate your proficiency in front-end development.

Project Requirements

Responsive Design: Ensure the application is fully responsive across various devices and screen sizes.
API Integration: Effectively integrate the specified API to fetch and display data dynamically.
Interactivity: Implement interactive elements such as search functionality, form validation, and dynamic content updates.
Accessibility: Follow best practices to make the application accessible to all users.
Version Control: Use Git for version control, with regular commits and a well-documented GitHub repository.
Documentation: Include a comprehensive README.md file detailing the project setup, features, and any additional notes.

Getting Started

Start by reviewing each project’s description, brief, and associated images, then choose the challenge that aligns most with your skills and interests.

Once you’ve selected a project:

Download the starter files.
Initialize a git repository.
Plan your application structure.
Begin coding and implementing the project’s features.

Required Research

Each of the project options intentionally includes things you may not be familiar with, such as new APIs, new libraries, or new concepts. You will be required to research and learn about these new technologies throughout the project.

While the research requirements will vary depending on the project you select, you will absolutely need to research deployment as it is one of the required submission requirements below.

Deployment is the act of making a web application accessible on a public URL. It is a crucial step in the project process, as it allows you to share and test your work with others. We have included a [Required Reading] section on deployment within this module to get you started. You may review this material at any point during the project timeline.

Submission Requirements

GitHub Repository:
- Host your project on GitHub with all source code and assets.
- Ensure the repository is public and includes a detailed README.md file.
Live Demo:
- Deploy your application using a platform like GitHub Pages, Netlify, or Vercel.
- Provide a link to the live demo in your README.md file.
Reflection Document:
- Write a 200-300 word reflection discussing your development process, challenges faced, solutions implemented, and potential improvements.
- Include this reflection in your GitHub repository.

Evaluation Criteria

Criteria	Excellent	Good	Satisfactory	Needs Improvement	Incomplete
Responsive Design (20 points)	(17-20 points) The design is fully responsive and adjusts well across all screen sizes, including mobile, tablet, and desktop.	(11-16 points) The design is mostly responsive, with minor layout issues on certain screen sizes.	(8-10 points) The design is partially responsive, with noticeable issues on smaller or larger screens.	(1-7 points) The design is not responsive and has significant layout issues, affecting usability.	(0 points) The design does not respond to different screen sizes.
API Integration (15 points)	(14-15 points) Effectively integrates the API, fetching and displaying data dynamically with proper error handling.	(11-13 points) API integration works, but may have minor issues such as occasional errors or incomplete data handling.	(8-10 points) API integration is basic, with limited error handling or inconsistent data display.	(1-7 points) API integration is incomplete, with significant issues in data fetching or display.	(0 points) No API integration or failed attempts at data retrieval.
Interactivity (20 points)	(17-20 points) The application is highly interactive, with well-implemented features like search, form validation, and dynamic content updates.	(11-16 points) The application is interactive, but some features may have minor bugs or usability issues.	(8-10 points) Basic interactivity is present, but several features may be incomplete or poorly implemented.	(1-7 points) Limited interactivity, with key features missing or not functional.	(0 points) No interactive features implemented.
Accessibility (10 points)	(9-10 points) Follows best practices for accessibility, including semantic HTML, ARIA labels, and keyboard navigation.	(7-8 points) Good use of accessibility features, but may lack some best practices or have minor issues.	(5-6 points) Basic accessibility considerations are made, but several key aspects are missing.	(1-4 points) Limited or poor accessibility, making the application difficult to use for some users.	(0 points) No consideration for accessibility.
Version Control (10 points)	(9-10 points) Commits are frequent, clear, and descriptive, following best practices for Git.	(7-8 points) Commits are generally clear, but may lack frequency or detailed messages.	(5-6 points) Commits are infrequent or poorly described.	(1-4 points) Few commits, with unclear messages or lack of version control practices.	(0 points) No commits or insufficient use of Git.
Deployment (10 points)	(9-10 points) The application is successfully deployed and fully functional, with a working link provided in the README.	(7-8 points) The application is deployed, but may have minor issues or inconsistencies.	(5-6 points) The application is deployed but has noticeable issues affecting usability or functionality.	(1-4 points) The application is deployed with significant problems or errors.	(0 points) No deployment or failed attempt at deployment.
Project Documentation (10 points)	(9-10 points) README is thorough, well-organized, and provides a clear overview of the project setup, features, and approach.	(7-8 points) README covers most aspects but may lack detail or organization in certain areas.	(5-6 points) README is present but lacks depth or clarity, with missing information.	(1-4 points) README is incomplete or missing important details about the project.	(0 points) No README file or missing key information.
Reflection (5 points)	(5 points) The reflection is detailed and insightful, discussing challenges faced, solutions implemented, and potential improvements.	(4 points) The reflection covers challenges and solutions but lacks depth or analysis of improvements.	(3 points) The reflection is brief and does not fully explore the problem-solving process.	(1-2 points) The reflection is minimal or does not provide much insight into challenges faced.	(0 points) No reflection provided.

Total Score: ____ / 100 Points