Scrolling-GotoBtn

README.md

@@ -13,7 +13,7 @@ Website for the D4 Community that helps in keeping engagement with members and k
 3. Run `npm i` Or `npm install`to install all dependencies
 4. Run `npm start` to start the application
 5. Visit `https://localhost:3000` to view the application
-6. Use node version 16.17.0(Lts)
+6. Use node version 16.17.0 (Lts)
 
 
 ## ⚙️ Tech Stack/ Libraries used:

package.json

@@ -10,10 +10,11 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1",
-    "react-scripts": "5.0.1",
+    "react-icons": "^4.12.0",
+    "react-scripts": "^5.0.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
+    "styled-components": "^6.1.12",
     "swiper": "^8.4.5",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -6,21 +6,56 @@ import Navbar from "./components/Navbar/Navbar";
 import WhatisD4 from "./components/WhatisD4/WhatisD4";
 import UpcomingEvents from "./components/Upcoming Events/UpcomingEvents";
 import Footer from "./components/Footer/Footer";
+import GoToTop from "./components/GoToTop/GoToTop"; 
+import { ThemeProvider } from 'styled-components';
 
+const theme = {
+  btn: {
+    backgroundColor: '#000',
+  },
+  colors: {
+    shadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+  },
+  media: {
+    mobile: '768px',
+  },
+};
 
-const App = () => {
+function App() {
   return (
+    <ThemeProvider theme={theme}>
+      return (
     <div className="App">
       <div className="gradient__bg">
         <Navbar />
         <Header />
         <WhatisD4 />
         <Members/> 
         <UpcomingEvents/>
+        <GoToTop />
         <Footer/>
       </div>
     </div>
   );
-};
+    </ThemeProvider>
+  );
+}
 
 export default App;
+
+// const App = () => {
+
+//   return (
+//     <div className="App">
+//       <div className="gradient__bg">
+//         <Navbar />
+//         <Header />
+//         <WhatisD4 />
+//         <Members/> 
+//         <UpcomingEvents/>
+//         <GoToTop />
+//         <Footer/>
+//       </div>
+//     </div>
+//   );
+// };

src/components/Cards/Cards.jsx

@@ -45,7 +45,10 @@ const Cards = () => {
   return (
     <div className="cards">
       <Slider {...settings}>
-        {Data.map((item) => (
+        {Data.map((item, index)   =>
+
+        (
+
           <div className="card">
             <div className="imgBox">
               <img src={item.Img} alt={item.name} />

src/components/GoToTop/GoToTop.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { FaArrowUp } from "react-icons/fa";
+import { ThemeProvider } from 'styled-components';
+
+
+
+const GoToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const goToBtn = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  };
+
+  const listenToScroll = () => {
+    let heightToHidden = 250;
+    const winScroll =
+      document.body.scrollTop || document.documentElement.scrollTop;
+
+    if (winScroll > heightToHidden) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", listenToScroll);
+    return () => window.removeEventListener("scroll", listenToScroll);
+  }, []);
+
+  return (
+    <Wrapper>
+      {isVisible && (
+        <div className="top-btn" onClick={goToBtn}>
+          <FaArrowUp className="top-btn--icon" />
+        </div>
+       )} 
+    </Wrapper>
+  );
+};
+
+
+const Wrapper = styled.section `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+
+  .top-btn {
+    font-size: 2.4rem;
+    width: 4rem;
+    height: 4rem;
+    color: #fff;
+    background-color: #042c54;
+    box-shadow: ${({ theme }) => theme.colors.shadow};
+    border-radius: 50%;
+    position: fixed;
+    bottom: 5rem;
+    right: 1rem;
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &--icon {
+      animation: gototop 1.2s linear infinite alternate-reverse;
+    }
+
+    @keyframes gototop {
+      0% {
+        transform: translateY(-0.4rem);
+      }
+      100% {
+        transform: translateY(0.5rem);
+      }
+    }
+  }
+  @media (max-width: ${({ theme }) => theme.media.mobile}) {
+    .top-btn {
+      right: 0;
+      left: 90%;
+    }
+  }
+
+`;
+
+export default GoToTop;

src/index.js

@@ -1,5 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
+import { createRoot } from 'react-dom/client';
 import App from './App';
-ReactDOM.render(<App />, document.getElementById('root'));
+
+
+import './index.css';
+
+const container = document.getElementById('root');
+const root = createRoot(container); // Create a root.
+root.render(<App />); // Initial render
+
+
+
+