Edit Media Query

.gitignore

@@ -1,5 +1,6 @@
 # Ignore node_modules and other generated files in the root
 **/node_modules/
+**/.angular/
 package-lock.json
 yarn-error.log
 

backend-travel/server.js

@@ -1,22 +1,25 @@
-import express from "express"
-import cors from 'cors'
-import { getFavorites,getFavoriteDescription } from "./controllers/favoriteController.js"
-const app =express()
-app.use(cors())
-const port = 5000
+import express from "express";
+import cors from "cors";
+import {
+  getFavorites,
+  getFavoriteDescription,
+} from "./controllers/favoriteController.js";
+const app = express();
+app.use(cors());
+const port = 3000;
 
-app.get("/api/favorites",(req,res)=>{
-    getFavorites(req,res)
-})
+app.get("/api/favorites", (req, res) => {
+  getFavorites(req, res);
+});
 
-app.get("/api/favorites/:cityname", (req,res)=>{
-    getFavoriteDescription(req,res)
-})
+app.get("/api/favorites/:cityname", (req, res) => {
+  getFavoriteDescription(req, res);
+});
 
 app.use((err, req, res, next) => {
-    res.status(500).json({ error: 'Something went wrong' });
-  });
+  res.status(500).json({ error: "Something went wrong" });
+});
 
-app.listen(port ,()=>{
-    console.log("Server started 300")
-})
+app.listen(port, () => {
+  console.log("Server started 300");
+});

frontend-travel/src/app/favorite-cities/favorite-cities.component.css

@@ -6,9 +6,14 @@
   margin-bottom: 4.2rem;
 }
 
+@media (max-width: 65em) {
+  .cards-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
 
 @media (max-width: 41em) {
   .cards-container {
     grid-template-columns: repeat(2, 1fr);
   }
-}
+}

frontend-travel/src/app/services/backend.service.ts

@@ -1,30 +1,28 @@
-import { Injectable , EventEmitter } from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { BackendApiResponse } from '../dataTypes';
 
 @Injectable({
   providedIn: 'root',
 })
 export class BackendService {
-  constructor(private http : HttpClient) {}
-  apiUrl = "http://127.0.0.1:5000/api/favorites/"
+  constructor(private http: HttpClient) {}
+  apiUrl = 'http://127.0.0.1:3000/api/favorites/';
   backendApiServiceStatus = new EventEmitter<Object>();
-   getFavoriteCities() {
-     return this.http.get(this.apiUrl)
+  getFavoriteCities() {
+    return this.http.get(this.apiUrl);
   }
 
-  getCityDescriptionByName(cityName:string){
-    this.http.get(this.apiUrl+cityName).subscribe((val:any)=>{
-      if(val){
+  getCityDescriptionByName(cityName: string) {
+    this.http.get(this.apiUrl + cityName).subscribe((val: any) => {
+      if (val) {
         this.backendApiServiceStatus.emit({
           data: val,
           loading: false,
           error: '',
-        })
-      }else{
-
-      } 
-    })
+        });
+      } else {
+      }
+    });
   }
-
 }

frontend-travel/src/styles.css

@@ -3,8 +3,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  --brand-color:  #009874;
-
+  --brand-color: #009874;
 }
 
 html {
@@ -18,34 +17,30 @@ body {
   font-weight: 400;
 }
 
-
-.container{
-    margin-top: 4.8rem;
+.container {
+  margin-top: 4.8rem;
 }
 
-.main-container{
+.main-container {
   margin: 0 auto;
   max-width: 120rem;
   padding: 0 3.2rem;
 }
 
-
 .results-container {
   display: grid;
-  grid-template-columns: repeat(2,1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 1.6rem;
   align-items: center;
 }
 
-
-
-@media (max-width: 62.5em) {
+@media (max-width: 75em) {
   html {
     font-size: 56.25%;
   }
 }
 
-@media (max-width: 52em) {
+@media (max-width: 59em) {
   html {
     font-size: 50%;
   }
@@ -61,4 +56,4 @@ body {
   .results-container {
     grid-template-columns: 1fr;
   }
-}
+}