From 2e0b2e246ce8e5f3d870f3144fa807579feace17 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Sat, 22 Jun 2024 18:07:20 +0530 Subject: [PATCH 1/2] Cursor Enhancement --- form/index.html | 4 +-- public/index.html | 86 +++++++++++++++++++++++++++++++---------------- src/index.js | 64 ++++++++++++++++++++++++++++++++++- 3 files changed, 122 insertions(+), 32 deletions(-) diff --git a/form/index.html b/form/index.html index cf856e88..24289337 100644 --- a/form/index.html +++ b/form/index.html @@ -4,7 +4,7 @@ Form Validation - +
@@ -33,6 +33,6 @@

Register

- + diff --git a/public/index.html b/public/index.html index b5f9f3df..83d65445 100644 --- a/public/index.html +++ b/public/index.html @@ -5,40 +5,68 @@ - + - - - - + UniCollab +
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js index 63bd9dee..db119b58 100644 --- a/src/index.js +++ b/src/index.js @@ -5,10 +5,72 @@ import './index.css'; import reportWebVitals from './reportWebVitals'; import Preloader from './Components/Preloader'; +const coords = { x: 0, y: 0 }; +const circles = document.querySelectorAll(".circle"); + +const colors = [ + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "#3fbcc0c6", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "#3fbcc0c6", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", + "darkturquoise", +]; + +circles.forEach(function (circle, index) { + circle.x = 0; + circle.y = 0; + circle.style.backgroundColor = colors[index % colors.length]; +}); + +window.addEventListener("mousemove", function (e) { + coords.x = e.pageX; + coords.y = e.pageY; +}); + +function animateCircles() { + let x = coords.x; + let y = coords.y; + + circles.forEach(function (circle, index) { + circle.style.left = x - 12 + "px"; + circle.style.top = y - 12 + "px"; + circle.style.transform = `scale(${(circles.length - index) / circles.length})`; + + circle.x = x; + circle.y = y; + + const nextCircle = circles[index + 1] || circles[0]; + x += (nextCircle.x - x) * 0.3; + y += (nextCircle.y - y) * 0.3; + }); + + requestAnimationFrame(animateCircles); +} + +animateCircles(); + ReactDOM.render( {/* */} - + , document.getElementById('root') ); From aee560db6a7643799706714e95127254b7c67a32 Mon Sep 17 00:00:00 2001 From: Amisha Choudhary Date: Sat, 22 Jun 2024 22:45:56 +0530 Subject: [PATCH 2/2] made the view more button working --- src/Components/MainRightBottomCard.js | 49 +++++++++++++++++---------- src/Components/MainRightTopCard.js | 27 +++++++++++++-- 2 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/Components/MainRightBottomCard.js b/src/Components/MainRightBottomCard.js index 5bcb033a..d9063dfc 100644 --- a/src/Components/MainRightBottomCard.js +++ b/src/Components/MainRightBottomCard.js @@ -1,31 +1,46 @@ -import React from "react"; +import React, { useState } from "react"; import TopSeller from "./TopSeller"; function MainRightBottomCard() { + const [visibleSellers, setVisibleSellers] = useState(3); + const [showMore, setShowMore] = useState(false); + + const handleViewMore = () => { + if (showMore) { + setVisibleSellers(3); + } else { + setVisibleSellers(TopSeller.length); + } + setShowMore(!showMore); + }; + return (

Top Contributor

- View More + + {showMore ? "View Less" : "View More"} +
- {TopSeller && - TopSeller.map((seller) => ( -
-
- -
-
-

- {seller?.seller_name} {seller?.username} -

-
- - Follow - + + {TopSeller.slice(0, visibleSellers).map((seller) => ( +
+
+
- ))} +
+

+ {seller?.seller_name} {seller?.username} +

+
+ + Follow + +
+ ))}
); } export default MainRightBottomCard; + diff --git a/src/Components/MainRightTopCard.js b/src/Components/MainRightTopCard.js index 530d2116..583e7a97 100644 --- a/src/Components/MainRightTopCard.js +++ b/src/Components/MainRightTopCard.js @@ -1,11 +1,19 @@ -import React from "react"; +import React, { useState } from "react"; function MainRightTopCard() { + const [showMore, setShowMore] = useState(false); + + const handleViewMore = () => { + setShowMore(!showMore); + }; + return (

Statistics

- View More + + {showMore ? "View Less" : "View More"} +
@@ -23,9 +31,24 @@ function MainRightTopCard() {

Total Exp earned 300 exp

+ + {showMore && ( +
+

+ Projects Completed 160 +

+

+ Projects In Progress 20 +

+

+ Average Project Rating 4.5 +

+
+ )}
); } export default MainRightTopCard; +