+
+
+
+
+
+
+
+
+
+
+ Add new food
++
+
+
+
++
+
+
\ No newline at end of file
diff --git a/src/app/food-list/food-list.component.scss b/src/app/food-list/food-list.component.scss
new file mode 100644
index 0000000..66a742b
--- /dev/null
+++ b/src/app/food-list/food-list.component.scss
@@ -0,0 +1,138 @@
+:host{
+ display:grid;
+ grid-template-areas: "search search"
+ "form form"
+ "food menu";
+}
+*{margin: 0; padding: 0;}
+
+.search{
+ grid-area: search;
+}
+
+hr.style-search {
+ margin-top: 10px;
+ height: 12px;
+ border: 0;
+ box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
+}
+
+.form{
+ grid-area: form;
+}
+fa-icon:hover {
+ cursor: pointer;
+}
+
+.menu{
+ grid-area: menu;
+ margin-top: 28px;
+}
+
+.menu-item{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+.add-item{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.food{
+ grid-area: food;
+}
+
+div {
+ margin: 20px;
+}
+
+ul {
+ list-style-type: none;
+ width: 500px;
+}
+
+h3 , .search label {
+ font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
+}
+
+h2 {
+ margin: 0 15px 0 0;
+ font: 18px/1.5 Helvetica, Verdana, sans-serif;
+}
+
+label{
+ margin: 0 15px 0 0;
+ padding: 10px;
+}
+
+input{
+ font: 100 20px/1.5 Georgia, Times New Roman, serif;
+}
+
+li img {
+ float: left;
+ margin: 0 15px 0 0;
+}
+
+p {
+ font: 200 20px/1.5 Georgia, Times New Roman, serif;
+ color:green;
+}
+
+li {
+ padding: 10px;
+ overflow: auto;
+}
+
+li:hover {
+ background: #eee;
+ cursor: pointer;
+}
+
+img.pequeña{
+ width: 50px; height: 50px;
+}
+img.mediana{
+ width: 100px; height: 100px;
+}
+img.grande{
+ width: 200px; height: 200px;
+}
+
+.form-input{
+ background-color:rgb(221, 217, 217);
+ border-radius: 12px;
+ border: 0;
+ box-sizing: border-box;
+ color:black;
+ font-size: 18px;
+ height: 100%;
+ outline: 0;
+ padding: 4px 20px 0;
+ width: 100%;
+ }
+ .skewBtn{
+ margin: 20px 15px 0 0;
+ width: 100px;
+ height: 50px;
+ outline: none;
+ cursor: pointer;
+ background:rgb(228, 225, 225);
+ transition: .5s;
+ border-radius: 5px;
+ font: 200 20px/1.5 Georgia, Times New Roman, serif;
+ &:hover{
+ border: none;
+ color:darkgreen;
+ font-size: 28px;
+ transform:scale(1.1);
+ }
+}
+
+
+
+
diff --git a/src/app/food-list/food-list.component.ts b/src/app/food-list/food-list.component.ts
new file mode 100644
index 0000000..5e7bdfe
--- /dev/null
+++ b/src/app/food-list/food-list.component.ts
@@ -0,0 +1,72 @@
+// import { ElementRef, Renderer2 } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
+import {faMinusCircle} from '@fortawesome/free-solid-svg-icons';
+
+
+import foods from '../foods';
+
+export interface IFoods {
+ name: string,
+ calories: number,
+ image: string,
+ quantity: number
+}
+
+
+@Component({
+ selector: 'app-food-list',
+ templateUrl: './food-list.component.html',
+ styleUrls: ['./food-list.component.scss']
+})
+export class FoodListComponent implements OnInit {
+
+ foodList: IFoods[] = foods as IFoods[];
+ menulist = new Array();
+ pattern!:string;
+ num_calories:number=0;
+ add_form:boolean=true;
+ formGroup!: FormGroup;
+
+ trashIcon = faTrash;
+ plusCircle = faPlusCircle;
+
+ // @ViewChild("ulMenu") ulMenu: ElementRef | undefined;
+
+ constructor(private fb: FormBuilder) { }
+
+ ngOnInit(): void {
+
+ this.formGroup = this.fb.group({
+ "name": ["", Validators.required],
+ "calories":[0, Validators.required],
+ "image":"",
+ "quantity":0
+ });
+ }
+
+ addItemToMenu(item:IFoods){
+ console.log(item);
+ this.menulist.push(item);
+ this.num_calories = this.num_calories+item.calories;
+ }
+ deleteItemFromMenu(item:IFoods){
+ const index = this.menulist.indexOf(item);
+ this.menulist.splice(index, 1);
+ this.num_calories = this.num_calories - item.calories;
+ }
+ toogleAddForm(){
+ this.add_form = ! this.add_form;
+ this.plusCircle = this.add_form ? faPlusCircle:faMinusCircle;
+
+ }
+ onSubmit(){
+
+ console.log(this.formGroup.value);
+ this.foodList.push(this.formGroup.value);
+ }
+
+}
diff --git a/foods.ts b/src/app/foods.ts
similarity index 100%
rename from foods.ts
rename to src/app/foods.ts
diff --git a/src/app/pipes/filter.pipe.ts b/src/app/pipes/filter.pipe.ts
new file mode 100644
index 0000000..2f06bd1
--- /dev/null
+++ b/src/app/pipes/filter.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'filter',
+ pure: false
+})
+export class FilterPipe implements PipeTransform {
+
+ transform(items: any[], field: string, value: string): any[] {
+ if (!items) {
+ return [];
+ }
+ if (!value) {
+ return items;
+ }
+ const myPattern = new RegExp(value, 'i');
+ return items.filter(it => it[field].match(myPattern));
+ }
+
+}
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..f56ff47
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000..997406a
Binary files /dev/null and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..c117988
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ -
+
-
+
+
{{item.name}}
+
+{{item.calories}} calories
+
+