Chrome extension

package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "aos": "^3.0.0-beta.6",
+    "font-awesome": "^4.7.0",
     "react": "^18.2.0",
+    "react-axios": "^2.0.6",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,8 +1,15 @@
+import { useSelector } from "react-redux";
+import { BgWrapper, GlobalStyle } from "./components";
+import MainPage from "./page/MainPage";
+import WelcomePage from "./page/WelcomePage";
+
 function App() {
+  const name = useSelector((state) => state.extData.name);
   return (
-    <div className="App">
-      <h1>hello</h1>
-    </div>
+    <>
+      <GlobalStyle />
+      <BgWrapper>{name ? <MainPage /> : <WelcomePage />}</BgWrapper>
+    </>
   );
 }
 

src/components/CountDown.js

@@ -0,0 +1,79 @@
+import React, { useRef, useState, useEffect } from "react";
+import { ColumnWrap, CountDownWrapper } from "./style/Elements";
+
+const SpecialCountdown = (props) => {
+  const [timerDays, setTimerDays] = useState("00");
+  const [timerHours, setTimerHours] = useState("00");
+  const [timerMinutes, setTimerMinutes] = useState("00");
+  const [timerSeconds, setTimerSrconds] = useState("00");
+  const { date, year, month } = JSON.parse(localStorage.getItem("date"));
+  let interval = useRef();
+
+  const startTimer = () => {
+    const countdownDate = new Date(
+      `${month} ${date} ${year} 00:00:00`
+    ).getTime();
+
+    interval = setInterval(() => {
+      const now = new Date().getTime();
+      const distance = countdownDate - now;
+
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      if (distance < 0) {
+        clearInterval(interval.current);
+      } else {
+        setTimerDays(days);
+        setTimerHours(hours);
+        setTimerMinutes(minutes);
+        setTimerSrconds(seconds);
+      }
+    }, 1000);
+  };
+
+  useEffect(() => {
+    startTimer();
+    return () => {
+      clearInterval(interval.current);
+    };
+  });
+
+  return (
+    <CountDownWrapper>
+      <ColumnWrap>
+        <span>{timerDays}</span>
+        <span>
+          <p>Days</p>
+        </span>
+      </ColumnWrap>
+      <small>:</small>
+      <ColumnWrap>
+        <span>{timerHours}</span>
+        <span>
+          <p>Hours</p>
+        </span>
+      </ColumnWrap>
+      <small>:</small>
+      <ColumnWrap>
+        <span>{timerMinutes}</span>
+        <span>
+          <p>Min</p>
+        </span>
+      </ColumnWrap>
+      <small>:</small>
+      <ColumnWrap>
+        <span>{timerSeconds}</span>
+        <span>
+          <p>Sec</p>
+        </span>
+      </ColumnWrap>
+    </CountDownWrapper>
+  );
+};
+
+export default SpecialCountdown;

src/components/Greetings.js

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getDataActions } from "../store/extData";
+
+const Greetings = () => {
+  const dispatch = useDispatch();
+  const greeting = useSelector((state) => state.extData.greetings);
+  const name = localStorage.getItem("name");
+
+  useEffect(() => {
+    const hour = new Date().getHours();
+    if (hour < 4) dispatch(getDataActions.setGreetings("Good Night"));
+    else if (hour < 11) dispatch(getDataActions.setGreetings("Good Morning"));
+    else if (hour < 16) dispatch(getDataActions.setGreetings("Good Afternoon"));
+    else if (hour < 19) dispatch(getDataActions.setGreetings("Good Evening"));
+    else dispatch(getDataActions.setGreetings("Good Night"));
+  }, []);
+
+  return (
+    <h1>
+      {greeting},{name}
+    </h1>
+  );
+};
+export default Greetings;

src/components/Time.js

@@ -0,0 +1,18 @@
+import { TimeWrapper } from "./style/Elements";
+
+const Time = () => {
+  const getime = () => {
+    return (
+      new Date()
+        .getHours()
+        .toLocaleString("en-US", { minimumIntegerDigits: 2 }) +
+      ":" +
+      new Date()
+        .getMinutes()
+        .toLocaleString("en-US", { minimumIntegerDigits: 2 })
+    );
+  };
+  return <TimeWrapper>{getime()}</TimeWrapper>;
+};
+
+export default Time;

src/components/documentTitle/Title.js

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+const Title = (title) => {
+  useEffect(() => {
+    document.title = `Vaspacx Chrome | ${title}`;
+  }, [title]);
+};
+
+export default Title;

src/components/edit/Edit.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { getDataActions } from "../../store/extData";
+import { SecBtn } from "../style/Button";
+import { BottomWrapper } from "../style/Elements";
+
+const Edit = () => {
+  const dispatch = useDispatch();
+  const name = localStorage.getItem("name");
+  const editDeadlineHandler = () => {
+    dispatch(getDataActions.setFlag());
+  };
+
+  const editNameHandler = () => {
+    dispatch(getDataActions.updateName(""));
+    localStorage.setItem("name", "");
+  };
+  return (
+    <BottomWrapper>
+      <SecBtn onClick={editDeadlineHandler}>Edit Deadline</SecBtn>
+      {name !== "" && <SecBtn onClick={editNameHandler}>Edit Name</SecBtn>}
+    </BottomWrapper>
+  );
+};
+
+export default Edit;

src/components/index.js

@@ -0,0 +1,24 @@
+export {
+  BgWrapper,
+  GlobalStyle,
+  CenterWrapper,
+  InputName,
+  DateContainer,
+  TimeWrapper,
+  CountDownWrapper,
+  DetailContainer,
+  ColumnWrap,
+  BottomWrapper,
+  TempWrapper,
+  TodoWrapper,
+  WeatherWrapper,
+  UpperBox,
+  InputCitySearch,
+} from "./style/Elements";
+
+export {
+  EffectButton,
+  TransparentBtn,
+  WeatherBtn,
+  SecBtn,
+} from "./style/Button";

src/components/quotes/Quotes.js

@@ -0,0 +1,17 @@
+import { quotesDB } from "../../database/quotes";
+import { QuotesWrapper } from "../style/Elements";
+
+const randomQuotes = () => {
+  const randomNum = Math.floor(Math.random() * quotesDB.length);
+  return quotesDB[randomNum];
+};
+const Quotes = () => {
+  const quote = randomQuotes();
+  return (
+    <QuotesWrapper>
+      <h1>{quote.quoteText}</h1>
+      <p>-{quote.quoteAuthor}</p>
+    </QuotesWrapper>
+  );
+};
+export default Quotes;

src/components/style/Button.js

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+export const EffectButton = styled.button`
+  width: 70px;
+  background: linear-gradient(138deg, var(--sec-color) 65%, white 36%);
+  cursor: pointer;
+  transition: all 0.5s ease-in-out;
+  height: 40px;
+  display: flex;
+  font-weight: bold;
+  padding: 9px 10px;
+  margin: 1px;
+  border: none;
+  letter-spacing: 1px;
+  border-radius: 6px;
+  color: var(--primary-color);
+  justify-content: space-between;
+
+  &:hover {
+    justify-content: center;
+    background: linear-gradient(189deg, var(--sec-color) 75%, white 36%);
+    color: #ffffff;
+  }
+  i {
+    color: #ffffff;
+  }
+`;
+
+export const SecBtn = styled.div`
+  border: none;
+  color: var(--grey-color);
+  font-size: 15px;
+  background: transparent;
+  cursor: pointer;
+`;
+
+export const WeatherBtn = styled.div`
+  background-color: transparent;
+  border: none;
+  color: var(--grey-color);
+  text-align: end;
+  margin-top: 5px;
+
+  &:hover {
+    cursor: pointer;
+    color: var(--primary-color);
+  }
+`;
+
+export const TransparentBtn = styled.button`
+  background: transparent;
+  border: 2px solid var(--primary-color);
+  color: white;
+  cursor: pointer;
+  width: auto;
+  padding: 0.5rem;
+`;