Weatherapp

app/.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_KEY=b078924db19744c097272a1a1c8b6a57
+NEXT_PUBLIC_API_KEY2=732aaa49395778ed32be16f43655bd4c

app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/PLAN.MD

@@ -0,0 +1,72 @@
+let workDuration = 2;
+// let breakDuration = 2;
+// let seconds = 5;
+// let breakCount = 0;
+
+// let workMinutes = workDuration - 1; //25 = 24:59
+// let breakMinutes = breakDuration - 1; //5 = 4:59
+// let RemainingTime = () => {
+// seconds = seconds - 1;
+// if (seconds === 0) {
+// workMinutes = workMinutes - 1;
+// if (workMinutes < 0) {
+// breakMinutes = workMinutes;
+// if (breakMinutes < 0) {
+// breakCount++;
+// workMinutes = workDuration - 1;
+// if (breakCount % 2 === 0) {
+// breakDuration = 15;
+// }
+// }
+// // if (breakCount % 2 === 0) {
+// // workMinutes = breakMinutes;
+// // breakCount++;
+// // } else {
+// // workMinutes = workDuration - 1;
+// // breakCount++;
+// // }
+// }
+// seconds = 6;
+// }
+// console.log("min", workMinutes);
+// console.log("sec", seconds);
+// console.log("breakCount", breakCount);
+// console.log("breakmin", breakMinutes);
+// };
+// setInterval(RemainingTime, 1000);
+
+---
+
+25 min work timer
+5 min break
+repeat 4 times - long break after 4th one
+15 min long break
+1 2 . 3 . 4
+25, 5, 25, 5, 25, 5, 25, 15
+
+A function to count down from 25min.
+
+- Have min and seconds
+- when sec reach 0 take one off min
+- set interval function to call function every second
+
+let workTime = 25
+let breakTime = 5
+let longBreak = 15
+
+let mins = workTime
+let secs = 60
+
+Every 1 sec: -setInterval()
+
+secs --
+
+if secs < 0:
+
+mins--
+secs = 60
+
+if mins < 0:
+
+mins = breakTime
+sec = 60

app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/Timer Logic/controlButtons.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+type ControlButtonsProps = {
+    handleStart: (event: React.MouseEvent<HTMLElement>) => void;
+    handleReset: (event: React.MouseEvent<HTMLElement>) => void;
+    handlePauseResume: (event: React.MouseEvent<HTMLElement>) => void;
+    active: boolean;
+    isPaused: boolean;
+
+}
+
+export default function ControlButtons({handleStart, handleReset, handlePauseResume, active, isPaused}:ControlButtonsProps) {
+  const StartButton = (
+    <div className="btn btn-one btn-start"
+         onClick={handleStart}>
+      Start
+    </div>
+  );
+  const ActiveButtons = (
+    <div className="btn-grp">
+      <div className="btn btn-two" 
+           onClick={handleReset}>
+        Reset
+      </div>
+      <div className="btn btn-one" 
+           onClick={handlePauseResume}>
+        {isPaused ? "Resume" : "Pause"}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="Control-Buttons">
+      <div>{active ? ActiveButtons : StartButton}</div>
+    </div>
+  );
+}

app/Timer Logic/stopwatch.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+// import "./StopWatch.css";
+import Timer from "./timer";
+import ControlButtons from "./controlButtons";
+
+function StopWatch() {
+  const [isActive, setIsActive] = useState(false);
+  const [isPaused, setIsPaused] = useState(true);
+  const [time, setTime] = useState(0);
+
+  React.useEffect(() => {
+    let interval: ReturnType<typeof setInterval> | undefined;
+
+    if (isActive && isPaused === false) {
+      interval = setInterval(() => {
+        setTime((time) => time + 10);
+      }, 10);
+    } else {
+      clearInterval(interval);
+    }
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isActive, isPaused]);
+
+  const handleStart = () => {
+    setIsActive(true);
+    setIsPaused(false);
+  };
+
+  const handlePauseResume = () => {
+    setIsPaused(!isPaused);
+  };
+
+  const handleReset = () => {
+    setIsActive(false);
+    setTime(0);
+  };
+
+  return (
+    <div className="stop-watch">
+      <Timer time={time} />
+      <ControlButtons
+        active={isActive}
+        isPaused={isPaused}
+        handleStart={handleStart}
+        handlePauseResume={handlePauseResume}
+        handleReset={handleReset}
+      />
+    </div>
+  );
+}
+
+export default StopWatch;

app/Timer Logic/timer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+// import "./Timer.css";
+
+type TimerProps = {
+    time:number;
+}
+
+export default function Timer({time}:TimerProps) {
+  return (
+    <div className="timer">
+      <span className="digits">
+        {/* Minutes */}
+        {("8" + Math.floor((time / 60000) % 60)).slice(-2)}:
+      </span>
+      <span className="digits">
+        {/* Seconds */}
+        {("5" + Math.floor((time / 1000) % 60)).slice(-2)}.
+      </span>
+    </div>
+  );
+}

app/components/Button/index.tsx

@@ -0,0 +1,11 @@
+type ButtonProps = {
+    text: string;
+    handleClick:  (event: React.MouseEvent<HTMLElement>) => void;
+    className?:string;
+}
+
+
+export default function Button({text, handleClick, className}:ButtonProps) {
+    return <button onClick={handleClick} className={className}>{text}</button> 
+}
+

app/components/PomodoroTimer/index.tsx

@@ -0,0 +1,14 @@
+//main div with timer 
+//3 tabs: one for 25 mins, one for 5 and one for 15
+//order: 1,2,1,2,1,2,1,3 then back to start until pause.
+//pause and reset button
+//setTimeout to switch tabs
+//setInterval to change timer look on screen
+//
+
+
+
+export default function PomodoroTimer({}){
+
+
+}

app/components/TimerLogicV2/index.js

@@ -0,0 +1,34 @@
+let workTime = 1;
+let breakTime = 2;
+let longBreak = 3;
+let breakCount = 0;
+
+let mins = workTime - 1;
+let secs = 60;
+
+function timer() {
+  secs--;
+  if (secs < 0) {
+    mins--;
+    secs = 59;
+  }
+  if (mins < 0) {
+    breakCount++;
+
+    if (breakCount === 1 || breakCount === 3) {
+      mins = breakTime - 1;
+      secs = 59;
+    } else if (breakCount === 0 || breakCount === 2 || breakCount === 4) {
+      mins = workTime - 1;
+      secs = 59;
+    } else {
+      mins = longBreak - 1;
+      secs = 59;
+      breakCount = -1;
+    }
+  }
+
+  console.log("mins" + mins, "secs" + secs, "count" + breakCount);
+}
+
+setInterval(timer, 1000);