JS_API

Index – Table of Contents

• User Experience (UX)
• Features
• Design
• Technologies Used
• Testing
• Deployment
• Credits

User Experience (UX)

• User stories

  • Homepage:

    1. In order to learn about the API status as a user, I can check the status on homepage
    2. In order to learn about the quality of the javascript codes as a user, I can input my code
    3. In order to learn about the results of errors as a user, I can see the error response from API

  • Navigation:

  • Footer:

  • Case studies:

Features

Existing Features

• Check status Section

• Code information form input Section

  • On the landing page the information input form.
  • The user can input file name or url or code which to be checking the quality.

• Footer Section

• Feedback Modal

Features Left to Implement

Design

• Colour Scheme

• Typography

• Logo/Icon

• Wireframes

Technologies Used

Languages Used

• HTML5
• CSS3
• JAVASCRIPT

Frameworks, Libraries & Programs Used

• Google Fonts: was used to import the 'Roboto Condensed' and 'Roboto' fonts into the style.css file which are used on all pages of the project.
• Font Awesome: was used to add icons for aesthetic and UX purposes.
• Git: was used for version control by utilising the Gitpod terminal to commit to Git and Push to GitHub.
• GitHub: is used as the respository for the projects code after being pushed from Git.
• Balsamiq: was used to create the wireframes during the design process.
• bootstrap 5.3: was the framework used to streamline styling classes.
• favicon: was used for creating website logo icons.

Testing

Validator Testing

• HTML -through the official [W3C validator](https://validator.w3.org/nu/?doc=
• CSS
  • through the official [(Jigsaw) validator](https://jigsaw.w3.org/css-validator/validator?uri=

Unfixed Bugs

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • Click pages on the left side
  • In the branch section, use the drop down menu to select the main branch
  • Click save, and then wait for the deployment to be generated
  • Click visit site button at top of settings

The live link can be found here -

Credits

Content

• The layout was influenced by the following code institute projects:
  • API_boilerplate

Media

• The icons were taken from Font Awesome

• The fonts used were imported from Google Fonts