Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chanda-abdul/frontend-mentor-angular-dine-restaurant
This is a solution to the Dine Website Challenge challenge on Frontend Mentor using Angular.
https://github.com/chanda-abdul/frontend-mentor-angular-dine-restaurant
angular css moment-js reactive-forms rxjs sass typescript
Last synced: 2 days ago
JSON representation
This is a solution to the Dine Website Challenge challenge on Frontend Mentor using Angular.
- Host: GitHub
- URL: https://github.com/chanda-abdul/frontend-mentor-angular-dine-restaurant
- Owner: Chanda-Abdul
- Created: 2022-06-30T02:33:48.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T23:11:14.000Z (almost 2 years ago)
- Last Synced: 2023-03-04T21:31:38.981Z (over 1 year ago)
- Topics: angular, css, moment-js, reactive-forms, rxjs, sass, typescript
- Language: SCSS
- Homepage: https://phenomenal-crisp-7a42d8.netlify.app/
- Size: 59.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Dine Website Challenge solution
This is a solution to the [Dine Website Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/dine-restaurant-website-yAt7Vvxt7). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [Links](#links)
- [The challenge](#the-challenge)
- [Screenshots](#screenshots)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
# Overview
## Links
- Solution URL: [Github Solution](https://github.com/Chanda-Abdul/Frontend-Mentor-Angular-Dine-Restaurant-Website-Challenge)
- Live Site URL: [Live Site ](https://phenomenal-crisp-7a42d8.netlify.app/)
## The challenge
### Users should be able to:
- [x] View the optimal layout for each page depending on their device's screen size
- [x] Mobile @ `375px`
- [x] Tablet @ `768px`
- [x] Desktop @ `1440px`
- [x] See hover states for all interactive elements throughout the site
- [x] See the correct content for the Family Gatherings, Special Events, and Social Events section when the user clicks each tab
- [x] Receive an error message when the booking form is submitted if:
- [x] The `Name` or `Email Address` fields are empty should show "This field is required"
- [x] The `Email Address` is not formatted correctly should show "Please use a valid email address"
- [x] Any of the `Pick a date` or `Pick a time` fields are empty should show "This field is incomplete"
## Screenshots
Mobile Screenshots @ 375px
### Home
### Event Slides
### Booking
### Error States
### Valid Form
### Confirmation after form submission
Tablet Screenshots @ 768px
### Home
### Event Slides
### Booking
### Error States
### Valid Form
### Confirmation after form submission
Desktop Screenshots @ 1440px
### Home
### Event Slides
### Booking
### Error States
### Valid Form
### Confirmation after form submission
## My process
### Built with
- [Angular](https://angular.io/) (JavaScript framework)
- [Angular Material](https://material.angular.io/)
- Reactive Forms 😭
- [RxJs](https://rxjs.dev/guide/overview) - library for composing asynchronous and event-based programs by using observable sequences.
- TypeScript
- JavaScript
- ⏰ [Moment.js ](https://momentjs.com/docs) - To validate reservation dates and times
- Figma
- Sass/CSS custom properties(❗️this project required ALOT of CSS)
- [fxLayout API](https://github.com/angular/flex-layout/wiki/fxLayout-API) Angular Flexbox API
- Mobile-first workflow
- Semantic HTML5 markup
## What I learned
## How to build Angular Reactive Forms with custom validation
I created the reservation form in the `booking` component using [Angular Reactive forms](https://angular.io/guide/reactive-forms). I also added custom validation for `input` and `select`
### `rezzo-form.component.html`
```html
...
{{nameValidationErrorMessage}}
...
Pick a Date
{{dateValidationErrorMessage}}
MM
{{ month }}
...
{{dateValidationErrorMessage}}
...
Make
Reservation
```
### Custom validation in the component class `rezzo-form.component.ts`
```ts
private nameValidationMessages: any = {
required: 'Please enter your name.',
minlength: 'Name must be longer than 4 characters.'
}
...
this.rezzoForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(4)]],
...
});
...
const nameControl = this.rezzoForm.get('name');
nameControl.valueChanges.pipe(
debounceTime(1000)
).subscribe(
(value: any) =>
this.setNameValidationErrorMessage(nameControl));
...
setNameValidationErrorMessage(n: AbstractControl): void {
this.nameValidationErrorMessage = '';
if ((n.touched || n.dirty) && n.errors) {
this.nameValidationErrorMessage = Object.keys(n.errors).map(
key => this.nameValidationMessages[key]).join(' ')
}
}
...
```
## Creating a custom component to display responsive images
This project contained many images that would change at each breakpoint. I created a seperate component to render images responsively, using [Attribute Binding](https://angular.io/guide/attribute-binding)
### The template
`picture-responsive.html`
```html
```
### The component class
```ts
```
### The data
```ts
...
EventItem[] = [
{
id: 1,
...
imageTitle: "family-gathering",
mobileImage: "../assets/images/homepage/family-gathering-mobile.jpg",
tabletImage: "../assets/images/homepage/family-gathering-tablet.jpg",
desktopImage: "../assets/images/homepage/family-gathering-desktop.jpg"
},
...
```
## ⏰ [Moment.js](https://momentjs.com/docs) library for custom form validation
I used the [Moment.js](https://momentjs.com/docs) library to validate the `date` and `time` selects before displaying error messages
### `rezzo-form.component.ts`
```ts
...
setDateValidationErrorMessage(month, day, year): void {
this.dateValidationErrorMessage = '';
let now = moment();
let reservation = moment([year.value, moment(month.value, 'MMM').month(), day.value]);
let later = moment().add(6, 'months');
if (!reservation.isValid() || now > reservation || reservation > later) {
this.dateValidationErrorMessage = 'Please select a valid date within the next 6 months'
}
}
...
```
## Continued development
This Dine project would be a good opportunity to add several useful/interesting features. Usually it is challenging to create ideas for extras to add to these projects. A few features I would like to add are listed below.
### Features to Add
➕ Cool animations, this could be a good project to practice [parallex](https://webflow.com/blog/parallax-scrolling), and play with Angular or CSS animations
➕ Authenticate/Authorization with ability to update
- [ ] Add authentication /Authorization
- [ ] Login/logout, with a password, for managers/admins so that they can update menu options, reservations, and events
- [ ] view/edit menu options
- [ ] view/edit menu event options
- [ ] view/edit menu reservations
- [ ] button? reset to default menu/event data default. for testing purposes
➕ Authenticate/Authorization with ability to view only
- [ ] add a view only option for admins to view menu, reservations, and events
➕ Menu Page
- [ ] add menu component to show list of all current offerings.
➕ About page
- [ ] add about chef/restaraunt section/page
➕ Event Booking Component
- [ ] add event booking component so that users can book events, similar to the reservation component
#
### Useful resources
- 🙌🏾 [Angular Reactive Forms By Deborah Kurata(Pluralsight Course)](https://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents) - This is an amazing YouTube which helped me understand how to build Reactive Forms with Angular. I'd recommend it to anyone still learning this concept.
- ⏰ [Moment.js ](https://momentjs.com/docs) - To validate reservation dates and times
- [Reactive forms](https://angular.io/guide/reactive-forms) - This helped me... I really liked this pattern and will use it going forward.
- 🙌🏾 [Angular Reactive Forms in 10 Minutes](https://youtu.be/MMP_OcjWNQo) - This is an amazing YouTube which helped me finally understand how to build Reactive Forms with Angular. I'd recommend it to anyone still learning this concept.
- [/angular/flex-layout](https://github.com/angular/flex-layout) - This helped me because it's much easier to incorporate Flexbox into a template than a CSS stylesheet 🤔 . I really liked this pattern and will use it going forward. Now, I prefer to create flex styles with Sass
- [Udemy: Angular (Full App) with Angular Material, Angularfire & NgRx Created by Maximilian Schwarzmüller](https://www.udemy.com/share/101WvC3@iwU-zs0EjLuBHrh2IFqrITl0TXzocf5BeqTXM5rBHhVGmHco65hhIW8VnrsMxYA=/) - Great Tutorials. Would Recommend.
- [Managing Image Breakpoints With Angular](https://www.smashingmagazine.com/2019/02/image-breakpoints-angular/) - Yes. Then I moved the resonsive images into a seperate component👌🏽
- [Using forms for user input](https://angular.io/start/start-forms) - 🤷🏽♀️
- [Angular 13 Select Dropdown with Reactive Forms Examples](https://www.positronx.io/angular-select-dropdown-with-reactive-forms-examples/) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
## Author
- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)
- Website - [Chanda Codes](https://chandacodes.com/)
- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)
## Acknowledgments