completed episode 10

snehap02 · snehap02 · commit 32fcc4e582b0 · 2024-03-12T21:03:03.000+05:30
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/.postcssrc b/Episode10-Jo dikhta hai Vo bikta hai/Coding/.postcssrc
@@ -0,0 +1,5 @@
+ {
+  "plugins": {
+    "tailwindcss": {}
+  }
+}
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/index.css b/Episode10-Jo dikhta hai Vo bikta hai/Coding/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/index.html b/Episode10-Jo dikhta hai Vo bikta hai/Coding/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="index.css">
     <title>Episode-10</title>
 </head>
 <body>
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/src/components/Body.js b/Episode10-Jo dikhta hai Vo bikta hai/Coding/src/components/Body.js
@@ -38,17 +38,17 @@ const Body = () => {
     <Shimmer />
   ) : (
     <div className="body">
-      <div className="filter">
-        <div className="search">
+      <div className="filter flex justify-between items-center py-6 px-8">
+        <div className="search flex gap-4">
           <input
             type="text"
-            className="search-box"
+            className="search-box ring-2 outline-none rounded-md px-1"
             value={searchText}
             onChange={(e) => {
               setSearchText(e.target.value);
             }}
           />
-          <button
+          <button className="text-lg font-medium bg-neutral-800 text-white rounded-md px-6 py-1 cursor-pointer"
             onClick={() => {
               //onClick filter the restaurant cards based on the search condition and update the UI
               const filterRes = listOfRestaurents.filter((restrau) =>
@@ -63,7 +63,7 @@ const Body = () => {
           </button>
         </div>
         <button
-          className="filter-btn"
+          className="filter-btn bg-neutral-700 text-white rounded-md h-10 px-4 cursor-pointer"
           onClick={() => {
             const filter = listOfRestaurents.filter(
               (val) => val.info.avgRating > 4
@@ -72,10 +72,10 @@ const Body = () => {
             setListOfRestaurents(filter);
           }}
         >
-          Click Here to Filter Restraurents
+          Top Rated Restraurents
         </button>
       </div>
-      <div className="res-container">
+      <div className="res-container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-10 px-8 py-14">
         {filteredList?.map((restaurant) => (
           <Link key={restaurant.info.id} to={"/restaurants/" + restaurant.info.id}>
           <RestaurantCard resData={restaurant} />
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/src/components/Header.js b/Episode10-Jo dikhta hai Vo bikta hai/Coding/src/components/Header.js
@@ -10,12 +10,12 @@ const Header = () => {
 
   useEffect(() => {}, []);
   return (
-    <div className="header">
+    <div className="header flex justify-between">
       <div className="logo-container">
-        <img src={LOGO_URL} alt="" className="logo" />
+        <img src={LOGO_URL} alt="" className="logo w-16" />
       </div>
       <div className="nav-links">
-        <ul className="links">
+        <ul className="links flex gap-4 leading-[3rem] md:leading-[3rem] font-medium md:gap-8 text-xs md:text-base">
           <li>Online Status: {isOnline ? "🟢" : "🔴"}</li>
           <li>
             <Link to="/">Home</Link>
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/src/components/RestaurantCard.js b/Episode10-Jo dikhta hai Vo bikta hai/Coding/src/components/RestaurantCard.js
@@ -4,16 +4,15 @@ import { CDN_URL } from "../utils/constants";
 const RestaurantCard = (props) => {
   // const {resName, cuisine} = props;
   const { resData } = props;
-  const { name, cuisines, avgRating, slaString, cloudinaryImageId } =
+  const { name, cuisines, avgRating, cloudinaryImageId } =
     resData?.info;
   return (
-    <div className="res-card" style={{ backgroundColor: "#f0f0f0" }}>
-      <img src={CDN_URL + cloudinaryImageId} alt="res-logo" />
-      <h3>{name}</h3>
+    <div className="res-card px-2 bg-neutral-300 p-2 shadow-md shadow-neutral-400 h-full">
+      <img src={CDN_URL + cloudinaryImageId} alt="res-logo" className="bg-neutral-200 p-3 rounded-md hover:scale-95 transition-all hover:duration-300 shadow-md hover:shadow-neutral-600" />
+      <h3 className="text-2xl font-bold">{name}</h3>
       {/* if you have an array in your JSON data just join them with gap and commas with (.join()) */}
-      <h4>{cuisines.join(" , ")}</h4>
-      <h4>⭐{avgRating}</h4>
-      <h4>{slaString}</h4>
+      <h4 className="font-medium">{cuisines.join(" , ")}</h4>
+      <h4 className="font-bold text-lg">⭐{avgRating}</h4>
     </div>
   );
 };
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/style.css b/Episode10-Jo dikhta hai Vo bikta hai/Coding/style.css
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Coding/tailwind.config.js b/Episode10-Jo dikhta hai Vo bikta hai/Coding/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: ["./src/**/*.{html,js,ts,jsx,tsx}",],
   theme: {
     extend: {},
   },
diff --git a/Episode10-Jo dikhta hai Vo bikta hai/Theory/JoDikhtaHaiVoBiktaHai.md b/Episode10-Jo dikhta hai Vo bikta hai/Theory/JoDikhtaHaiVoBiktaHai.md
@@ -0,0 +1,6 @@
+# Chapter 10 Covers:
+
+### A) Explore all the ways of writing css.
+### B) How do we configure tailwind?
+### C) Why do we have .postcssrc file?
+### D) In tailwind.config.js, what does all the keys mean (content, theme, extend, plugins)?

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`