Improved added onclick search and removed on change search to reduce no of request to the server

Author: ShivaBhattacharjee

public/index.html

@@ -5,33 +5,43 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
-  <meta name="description" content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account" />
+  <meta name="description"
+    content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account" />
   <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
   <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
   <link rel="manifest" href="/manifest.json" />
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
   <link rel="preconnect" rel="preload" href="https://fonts.googleapis.com">
   <link rel="preconnect" rel="preload" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet" rel="preload">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"
+    rel="preload">
 
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
     integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
     crossorigin="anonymous" referrerpolicy="no-referrer" rel="preload" />
 
 
-    <meta property="og:title" content="AnimeTrix">
-    <meta property="og:description" content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account">
-    <meta property="og:image" content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png">
-    <meta property="og:url" content="https://animetrix.vercel.app/">
-    <meta property="og:type" content="website">
+  <meta property="og:title" content="AnimeTrix">
+  <meta property="og:description"
+    content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account">
+  <meta property="og:image"
+    content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png">
+  <meta property="og:url" content="https://animetrix.vercel.app/">
+  <meta property="og:type" content="website">
+
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="600">
+
+  <meta name="twitter:card"
+    content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png">
+  <meta name="twitter:title" content="Animetrix">
+  <meta name="twitter:description"
+    content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account">
+  <meta name="twitter:image"
+    content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png">
 
-    <meta name="twitter:card" content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png">
-    <meta name="twitter:title" content="Animetrix">
-    <meta name="twitter:description" content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account">
-    <meta name="twitter:image" content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png">
-    
   <title>Watch Download Anime For Free On AnimeTrix</title>
 </head>
 

public/robot.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/Components/Header.jsx

@@ -98,9 +98,13 @@ const Header = forwardRef((props, ref) => {
   const handelChange = (e) => {
     const val = e.target.value;
     setInputVal(val);
-    props.handelChanges(val);
   };
 
+
+  const handleSearchSubmit = () => {
+    props.handelChanges(inputVal);
+  }
+
   useImperativeHandle(ref, () => ({
     emptySearch() {
       setInputVal("");
@@ -177,7 +181,11 @@ const Header = forwardRef((props, ref) => {
             placeholder="I am looking for...."
             value={inputVal}
             onChange={handelChange}
+            required
           />
+          <button className="search-submit" onClick={handleSearchSubmit} type="submit">
+            <i class="fa-solid fa-magnifying-glass">
+            </i></button>
         </div>
         {!isLoggedIn ?
           <li className="login-tab">
@@ -207,6 +215,9 @@ const Header = forwardRef((props, ref) => {
         <div className="mobile-search" ref={menuRef}>
           <div className="search-field">
             <input type="text" className={`active-search-mobile ${searchActive ? 'active' : ''}`} placeholder="I am looking for" value={inputVal} onChange={handelChange} />
+            <button className={`search-submit-mobile ${searchActive ? 'active' : ''}`} onClick={handleSearchSubmit} type="submit">
+              <i class="fa-solid fa-magnifying-glass">
+              </i></button>
             <div className="field-icon-search" onClick={MobileView}>
               <ion-icon name="search-outline"></ion-icon>
             </div>

src/Components/SearchJSX.jsx

@@ -13,15 +13,19 @@ export default function SearchJSX(props) {
       {Object.keys(props.searchResult).length === 0 ? (
         <div align="center">
           <h4 className="no-results" style={{
-            fontSize: "35px", paddingTop:"20px",
+            fontSize: "35px", paddingTop: "20px",
           }}>No Results found</h4>
           <br /><br />
         </div>
       ) : (
         <div align="center">
+          {
+            window.innerWidth > 600 ? null :<> <br /><br /><br /></>
+          }
+
           <div className="movies-grid" >
-          {props.searchResult?.results?.map((rec) => (
-            <Card rec={rec} key={rec.id} ep="false" handelClick={handelClick} />
+            {props.searchResult?.results?.map((rec) => (
+              <Card rec={rec} key={rec.id} ep="false" handelClick={handelClick} />
             ))}
           </div>
         </div>

src/Pages/movie.jsx

@@ -41,7 +41,7 @@ const Movie = (props) => {
           <section className="movies">
             <div className="filter-bar">
               <div className="heading">
-                <h3>Anime Movies</h3>
+                <h3>Movies</h3>
               </div>
             </div>
             <div className="movies-grid" ref={ref}>

src/Pages/topAiring.jsx

@@ -21,7 +21,7 @@ const TopAnimeAiring = (props) => {
 
   return (
     <>
-          <Helmet>
+      <Helmet>
         <meta property="og:title" content="AnimeTrix" />
         <meta property="og:description" content="AnimeTrix is a Free Anime streaming website which you can watch English Subbed and Dubbed Anime online without creating any Account" />
         <meta property="og:image" content="https://user-images.githubusercontent.com/95211406/234815538-17642467-574a-42ec-96d1-75c2a67bebd3.png" />
@@ -36,13 +36,13 @@ const TopAnimeAiring = (props) => {
         <title>Watch Download Anime For Free On AnimeTrix</title>
       </Helmet>
       {Object.keys(props.recent).length === 0 ? (
-   <OtherPagesCard title="Top-Airing"/>
+        <OtherPagesCard title="Top-Airing" />
       ) : (
         <>
           <section className="movies">
             <div className="filter-bar">
               <div className="heading">
-                <h3>Top-Airing</h3>
+                <h3>Trending</h3>
               </div>
             </div>
 

src/css/card.css

@@ -114,7 +114,7 @@
   }
 }
 
-@media(max-width:535px){
+@media(max-width:550px){
   .card-head{
     height: 300px;
   }

src/css/navbar.css

@@ -72,7 +72,28 @@
   color: var(--text-color);
   width: 300px;
 }
-
+.search-submit{
+  background: transparent;
+  padding: 2px;
+  color: var(--button-color);
+  position: absolute;
+  left: 86%;
+  font-size: 20px;
+  top: calc(35% - 10px);;
+  bottom: 20px;
+}
+.search-submit-mobile{
+  display: none;
+}
+.search-submit-mobile.active{
+  display: block;
+  position: absolute;
+  bottom: calc(90% - 139px);
+  right: 16%;
+  font-size: 25px;
+  background: transparent;
+  z-index: 999;
+}
 .search-btn {
   background: none;
   border: none;
@@ -270,7 +291,6 @@
     left: 0;
     right: 0;
     margin: auto;
-    z-index: 9999;
     border-radius: 14px;
     background-color: var(--search-background);
     color: #fff;