Git Product home page Git Product logo

lab-angular-routing-forms's Introduction

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! ❤️

lab-angular-routing-forms's People

Contributors

danicima avatar sandrabosk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.