/lab-angular-routing-forms

Primary LanguageTypeScript

logo_ironhack_blue 7

LAB | Angular Routing & Forms

Introduction

In this lab, you'll continue exploring Angular navigation, handling URL parameters and form validation.

Let's begin!

Setup

  • Fork this repo

  • Clone this repo

  • Open the LAB and start:

    $ cd lab-vue-basics
$ npm install
$ npm run dev

Submission

  • Upon completion, run the following commands:

    git add .
git commit -m "done"
git push origin main

  • Create a Pull Request so that your TAs can check your work.

Instructions

For this lab you'll build a freelance profile website. This app will have the following pages:

Iteration 1 | Home Page

The home page will be a personal introduction, should include a main photo (or a picture), some basic professional information, and a list of projects.

Iteration 2 | Contact Page

You must have a page with a contact form that has the following requirements:

  1. It will have the fields name, occupation, email, subject, and content.
  2. Every field is required but occupation.
  3. Content must be a textarea field and has a minimum length of 10 and a maximum length of 255 characters.
  4. You must highlight all invalid fields and show error messages.
  5. The email must be a valid email address.
  6. After successful submission, you must show a success message and clear the form.

Iteration 3 | Error 404 Page

If the user tries to access a non-existing page a custom 404 Error page should be displayed.


Note: You are free to work with the design, you can take a look for examples and inspiration you may need. But you have to use Angular material components in the design.


Sounds good? Let's get started!


Happy coding! ❤️