From d361bdca68dbaaded8266d389b957e6a67cfd7e4 Mon Sep 17 00:00:00 2001 From: oblionC Date: Fri, 19 May 2023 18:18:11 +0530 Subject: [PATCH 1/9] Create pages folder Created and routed pages --- src/pages/Home.jsx | 8 +++++++ src/pages/Layout.css | 48 +++++++++++++++++++++++++++++++++++++++ src/pages/Layout.jsx | 27 ++++++++++++++++++++++ src/pages/Login.jsx | 5 ++++ src/pages/Problemsets.jsx | 5 ++++ src/pages/Signup.jsx | 5 ++++ 6 files changed, 98 insertions(+) create mode 100644 src/pages/Home.jsx create mode 100644 src/pages/Layout.css create mode 100644 src/pages/Layout.jsx create mode 100644 src/pages/Login.jsx create mode 100644 src/pages/Problemsets.jsx create mode 100644 src/pages/Signup.jsx diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx new file mode 100644 index 00000000..f52ef428 --- /dev/null +++ b/src/pages/Home.jsx @@ -0,0 +1,8 @@ +export default function Home() { + + return ( + <> +

Hello

+ + ) +} diff --git a/src/pages/Layout.css b/src/pages/Layout.css new file mode 100644 index 00000000..a3790f76 --- /dev/null +++ b/src/pages/Layout.css @@ -0,0 +1,48 @@ +:root { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; +} + +li { + list-style: none; +} + +.container { + background-color: pink; + display: flex; + justify-content: center; + width: 100%; + height: 5rem; +} + +.navbar { + display: flex; + flex-direction: row; + width: 90%; +} + +.brand { + align-items: center; + display: flex; + font-size: 3rem; +} + +.nav-item { + align-items: center; + display: flex; + font-size: 1.5rem; + justify-content: center; +} + +.nav-list { + display: flex; + justify-content: space-between; + width: 20%; + height: 100%; + margin: 0 0 0 auto; +} + diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx new file mode 100644 index 00000000..a15f766e --- /dev/null +++ b/src/pages/Layout.jsx @@ -0,0 +1,27 @@ +import { useState } from 'react'; +import { Outlet } from 'react-router-dom'; +import './Layout.css'; + +function Navbar() { + return ( +
+
+
Peetcode
+
    +
  1. Home
    2. +
  2. Login
    3. +
  3. Register
    4. +
+
+
+ ) +} + +export default function Layout() { + return ( + <> + + + + ) +} diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx new file mode 100644 index 00000000..c45f3418 --- /dev/null +++ b/src/pages/Login.jsx @@ -0,0 +1,5 @@ +export default function Login() { + return ( +

Login page

+ ) +} diff --git a/src/pages/Problemsets.jsx b/src/pages/Problemsets.jsx new file mode 100644 index 00000000..60903bfc --- /dev/null +++ b/src/pages/Problemsets.jsx @@ -0,0 +1,5 @@ +export default function Problemsets() { + return ( +

Problemsets page

+ ) +} diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx new file mode 100644 index 00000000..8ae7aab7 --- /dev/null +++ b/src/pages/Signup.jsx @@ -0,0 +1,5 @@ +export default function Signup() { + return ( +

Signup page

+ ) +} From 4e487875f37ebe2fcaedf371b42e12eefdf644dc Mon Sep 17 00:00:00 2001 From: oblionC Date: Sat, 20 May 2023 02:57:51 +0530 Subject: [PATCH 2/9] Changed organization of components in src Implement login page with css (no functionality yet) --- package-lock.json | 63 +++++++++++++++++++++++++++- package.json | 3 +- src/App.jsx | 37 +++++++--------- src/components/UserForm.jsx | 20 +++++++++ src/components/userform/UserForm.jsx | 18 ++++++++ src/components/userform/UserFrom.css | 47 +++++++++++++++++++++ src/pages/Home.jsx | 8 ---- src/pages/Layout.jsx | 27 ------------ src/pages/Login.jsx | 5 --- src/pages/home/Home.jsx | 10 +++++ src/pages/{ => layout}/Layout.css | 32 ++++++++++---- src/pages/layout/Layout.jsx | 31 ++++++++++++++ src/pages/login/Login.css | 53 +++++++++++++++++++++++ src/pages/login/Login.jsx | 12 ++++++ 14 files changed, 296 insertions(+), 70 deletions(-) create mode 100644 src/components/UserForm.jsx create mode 100644 src/components/userform/UserForm.jsx create mode 100644 src/components/userform/UserFrom.css delete mode 100644 src/pages/Home.jsx delete mode 100644 src/pages/Layout.jsx delete mode 100644 src/pages/Login.jsx create mode 100644 src/pages/home/Home.jsx rename src/pages/{ => layout}/Layout.css (68%) create mode 100644 src/pages/layout/Layout.jsx create mode 100644 src/pages/login/Login.css create mode 100644 src/pages/login/Login.jsx diff --git a/package-lock.json b/package-lock.json index cd606935..4a36cfa9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.11.2" }, "devDependencies": { "@types/react": "^18.0.28", @@ -766,6 +767,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1226,6 +1235,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "dependencies": { + "@remix-run/router": "1.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "dependencies": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -1853,6 +1892,11 @@ } } }, + "@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2176,6 +2220,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "requires": { + "@remix-run/router": "1.6.2" + } + }, + "react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "requires": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + } + }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", diff --git a/package.json b/package.json index 154dd4dd..208323e3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.11.2" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/App.jsx b/src/App.jsx index 7743965b..8d16db32 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,9 @@ +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Layout from './pages/layout/Layout.jsx'; +import Home from './pages/home/Home.jsx'; +import Login from './pages/login/Login.jsx'; +import Signup from './pages/Signup.jsx'; +import Problemsets from './pages/Problemsets.jsx'; /* * Temporary problems array schema */ @@ -32,28 +38,17 @@ function App() { */ return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
+ + + }> + } /> + } /> + } /> + } /> + + + ) } -// A demo component -function ProblemStatement(props) { - const title = props.title; - const acceptance = props.acceptance; - const difficulty = props.difficulty; - - return - - {title} - - - {acceptance} - - - {difficulty} - - -} export default App diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx new file mode 100644 index 00000000..90e040da --- /dev/null +++ b/src/components/UserForm.jsx @@ -0,0 +1,20 @@ +import "./UserForm.css" + +export default function UserForm( {type} ) { + return ( +
+

{type}

+
+ + +
+
+ + +
+
+ +
+
+ ) +} diff --git a/src/components/userform/UserForm.jsx b/src/components/userform/UserForm.jsx new file mode 100644 index 00000000..4332d30d --- /dev/null +++ b/src/components/userform/UserForm.jsx @@ -0,0 +1,18 @@ +export default function UserForm( {type} ) { + return ( +
+

{type}

+
+ + +
+
+ + +
+
+ +
+
+ ) +} diff --git a/src/components/userform/UserFrom.css b/src/components/userform/UserFrom.css new file mode 100644 index 00000000..22a9403e --- /dev/null +++ b/src/components/userform/UserFrom.css @@ -0,0 +1,47 @@ +button { + width: 10rem; + font-size: 1.2rem; +} + +form { + align-items: center; + display: flex; + flex-direction: column; + justfiy-content: center; + width: 100%; +} + +label { + align-items: center; + display: flex; + font-size: 1.2rem; +} + +input { + width: 14rem; + font-size: 1.2rem; +} + +.body { + height: 720px; + align-items: center; +} + +.field { + display: flex; + justify-content: space-around; + width: 100%; +} + +.form-box { + align-items: center; + border-color: black; + border-radius: 2rem; + border-style: solid; + border-width: 0.4rem; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 30rem; + height: 20rem; +} diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx deleted file mode 100644 index f52ef428..00000000 --- a/src/pages/Home.jsx +++ /dev/null @@ -1,8 +0,0 @@ -export default function Home() { - - return ( - <> -

Hello

- - ) -} diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx deleted file mode 100644 index a15f766e..00000000 --- a/src/pages/Layout.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useState } from 'react'; -import { Outlet } from 'react-router-dom'; -import './Layout.css'; - -function Navbar() { - return ( -
-
-
Peetcode
-
    -
  1. Home
    2. -
  2. Login
    3. -
  3. Register
    4. -
-
-
- ) -} - -export default function Layout() { - return ( - <> - - - - ) -} diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx deleted file mode 100644 index c45f3418..00000000 --- a/src/pages/Login.jsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function Login() { - return ( -

Login page

- ) -} diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx new file mode 100644 index 00000000..02f3e6b6 --- /dev/null +++ b/src/pages/home/Home.jsx @@ -0,0 +1,10 @@ +export default function Home() { + + return ( +
+
+

Hello

+
+
+ ) +} diff --git a/src/pages/Layout.css b/src/pages/layout/Layout.css similarity index 68% rename from src/pages/Layout.css rename to src/pages/layout/Layout.css index a3790f76..d5c30c17 100644 --- a/src/pages/Layout.css +++ b/src/pages/layout/Layout.css @@ -1,5 +1,7 @@ :root { font-size: 16px; + --primary: #C4DFDF; + --secondary: #D2E9E9; } * { @@ -7,22 +9,33 @@ padding: 0; } +a { + text-decoration: none; +} + li { list-style: none; } .container { - background-color: pink; + width: 90%; +} + +.fill-page { + height: 100%; +} + +.nav { display: flex; - justify-content: center; - width: 100%; - height: 5rem; + flex-direction: row; } .navbar { + background-color: var(--secondary); display: flex; - flex-direction: row; - width: 90%; + justify-content: center; + width: 100%; + height: 5rem; } .brand { @@ -41,8 +54,13 @@ li { .nav-list { display: flex; justify-content: space-between; - width: 20%; + width: 15rem; height: 100%; margin: 0 0 0 auto; } +.body { + display: flex; + justify-content: center; + width: 100%; +} diff --git a/src/pages/layout/Layout.jsx b/src/pages/layout/Layout.jsx new file mode 100644 index 00000000..1ebab3e9 --- /dev/null +++ b/src/pages/layout/Layout.jsx @@ -0,0 +1,31 @@ +import { useState } from 'react'; +import { Outlet, Link } from 'react-router-dom'; +import './Layout.css'; + +function Navbar() { + return ( +
+
+
Peetcode
+
    +
  1. Home
    2. +
  2. Login
    3. +
  3. Signup
    4. +
+
+
+ ) +} + +export default function Layout() { + return ( + <> + +
+
+ +
+
+ + ) +} diff --git a/src/pages/login/Login.css b/src/pages/login/Login.css new file mode 100644 index 00000000..89057386 --- /dev/null +++ b/src/pages/login/Login.css @@ -0,0 +1,53 @@ +button { + width: 10rem; + font-size: 1.2rem; +} + +form { + align-items: center; + display: flex; + flex-direction: column; + justfiy-content: center; + width: 100%; +} + +label { + align-items: center; + display: flex; + font-size: 1.2rem; +} + +input { + width: 14rem; + font-size: 1.2rem; +} + +.body { + height: 720px; + align-items: center; +} + +.center { + display: flex; + justify-content: center; + align-items: center; +} + +.field { + display: flex; + justify-content: space-around; + width: 100%; +} + +.form-box { + align-items: center; + border-color: black; + border-radius: 2rem; + border-style: solid; + border-width: 0.4rem; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 30rem; + height: 20rem; +} diff --git a/src/pages/login/Login.jsx b/src/pages/login/Login.jsx new file mode 100644 index 00000000..16e6e513 --- /dev/null +++ b/src/pages/login/Login.jsx @@ -0,0 +1,12 @@ +import "./Login.css"; +import UserForm from "../../components/userform/UserForm.jsx" + +export default function Login() { + return ( + <> +
+ +
+ + ) +} From 4d1faaa4e2284d38232fb328914d56fef058dc79 Mon Sep 17 00:00:00 2001 From: oblionC Date: Sat, 20 May 2023 16:25:59 +0530 Subject: [PATCH 3/9] Add dynamic blogs in home page --- src/App.jsx | 2 +- src/pages/Signup.jsx | 5 --- src/pages/home/BlogData.jsx | 74 +++++++++++++++++++++++++++++++++++++ src/pages/home/Home.css | 4 ++ src/pages/home/Home.jsx | 28 ++++++++++++-- src/pages/layout/Layout.css | 14 ++++--- src/pages/layout/Layout.jsx | 6 +-- src/pages/login/Login.css | 48 ------------------------ src/pages/signup/Signup.css | 49 ++++++++++++++++++++++++ src/pages/signup/Signup.jsx | 12 ++++++ 10 files changed, 174 insertions(+), 68 deletions(-) delete mode 100644 src/pages/Signup.jsx create mode 100644 src/pages/home/BlogData.jsx create mode 100644 src/pages/home/Home.css create mode 100644 src/pages/signup/Signup.css create mode 100644 src/pages/signup/Signup.jsx diff --git a/src/App.jsx b/src/App.jsx index 8d16db32..6b45f660 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,7 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Layout from './pages/layout/Layout.jsx'; import Home from './pages/home/Home.jsx'; import Login from './pages/login/Login.jsx'; -import Signup from './pages/Signup.jsx'; +import Signup from './pages/signup/Signup.jsx'; import Problemsets from './pages/Problemsets.jsx'; /* * Temporary problems array schema diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx deleted file mode 100644 index 8ae7aab7..00000000 --- a/src/pages/Signup.jsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function Signup() { - return ( -

Signup page

- ) -} diff --git a/src/pages/home/BlogData.jsx b/src/pages/home/BlogData.jsx new file mode 100644 index 00000000..19c36caa --- /dev/null +++ b/src/pages/home/BlogData.jsx @@ -0,0 +1,74 @@ +const blogData = [ + { + title : "Why use C++", + date : "10 July 2023", + content : "C++ is very fast" + }, + { + title : "Why use C++", + date : "10 July 2023", + content : "C++ is very fast" + }, + { + title : "Why use C++ users hate Java", + date : "2 July 2023", + content : "Java is very verbose" + }, + { + title : "Why Java is better than C++", + date : "5 March 2023", + content : "No Pointers and cross platforms" + }, + { + title : "Why Ai will take your job", + date : "1 March 2023", + content : "Because Ai can do alot of automation, that required humans" + }, + { + title : "What jobs will Ai Create", + date : "28 Feb 2023", + content : "Ai and Ml engineering jobs" + }, + { + title : "Is Python the real chad or Javascript", + date : "15 Feb 2023", + content : "Its like asking is IronMan better than Thor or Captain America" + }, + { + title : "Why use C++", + date : "10 July 2023", + content : "C++ is very fast" + }, + { + title : "Why use C++", + date : "10 July 2023", + content : "C++ is very fast" + }, + { + title : "Why use C++ users hate Java", + date : "2 July 2023", + content : "Java is very verbose" + }, + { + title : "Why Java is better than C++", + date : "5 March 2023", + content : "No Pointers and cross platforms" + }, + { + title : "Why Ai will take your job", + date : "1 March 2023", + content : "Because Ai can do alot of automation, that required humans" + }, + { + title : "What jobs will Ai Create", + date : "28 Feb 2023", + content : "Ai and Ml engineering jobs" + }, + { + title : "Is Python the real chad or Javascript", + date : "15 Feb 2023", + content : "Its like asking is IronMan better than Thor or Captain America" + }, +] + +export default blogData; diff --git a/src/pages/home/Home.css b/src/pages/home/Home.css new file mode 100644 index 00000000..77c36b60 --- /dev/null +++ b/src/pages/home/Home.css @@ -0,0 +1,4 @@ +.main { + width: 100%; +} + diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx index 02f3e6b6..fb816c80 100644 --- a/src/pages/home/Home.jsx +++ b/src/pages/home/Home.jsx @@ -1,10 +1,30 @@ +import blogData from "./BlogData.jsx"; +import "./Home.css"; + +function Blogs( {blogData} ) { + const blogs = blogData.map((blog, key) => { + return ( +
  • +

    {blog.date}

    +

    {blog.title}

    +

    {blog.content}

    +
    • + ) + }) + + return ( +
      + {blogs} +
    + ) +} + export default function Home() { - return ( -
    +
    -

    Hello

    -
    + +
    ) } diff --git a/src/pages/layout/Layout.css b/src/pages/layout/Layout.css index d5c30c17..8e314798 100644 --- a/src/pages/layout/Layout.css +++ b/src/pages/layout/Layout.css @@ -17,8 +17,17 @@ li { list-style: none; } +.body { + display: flex; + justify-content: center; + width: 100%; + height: max-content; +} + .container { width: 90%; + margin-left: auto; + margin-right: auto; } .fill-page { @@ -59,8 +68,3 @@ li { margin: 0 0 0 auto; } -.body { - display: flex; - justify-content: center; - width: 100%; -} diff --git a/src/pages/layout/Layout.jsx b/src/pages/layout/Layout.jsx index 1ebab3e9..07444427 100644 --- a/src/pages/layout/Layout.jsx +++ b/src/pages/layout/Layout.jsx @@ -21,11 +21,7 @@ export default function Layout() { return ( <> -
    -
    - -
    -
    + ) } diff --git a/src/pages/login/Login.css b/src/pages/login/Login.css index 89057386..5d0ee5ed 100644 --- a/src/pages/login/Login.css +++ b/src/pages/login/Login.css @@ -1,53 +1,5 @@ -button { - width: 10rem; - font-size: 1.2rem; -} - -form { - align-items: center; - display: flex; - flex-direction: column; - justfiy-content: center; - width: 100%; -} - -label { - align-items: center; - display: flex; - font-size: 1.2rem; -} - -input { - width: 14rem; - font-size: 1.2rem; -} - -.body { - height: 720px; - align-items: center; -} - .center { display: flex; justify-content: center; align-items: center; } - -.field { - display: flex; - justify-content: space-around; - width: 100%; -} - -.form-box { - align-items: center; - border-color: black; - border-radius: 2rem; - border-style: solid; - border-width: 0.4rem; - display: flex; - flex-direction: column; - justify-content: space-around; - width: 30rem; - height: 20rem; -} diff --git a/src/pages/signup/Signup.css b/src/pages/signup/Signup.css new file mode 100644 index 00000000..5eee9012 --- /dev/null +++ b/src/pages/signup/Signup.css @@ -0,0 +1,49 @@ +button { + width: 10rem; + font-size: 1.2rem; +} + +form { + align-items: center; + display: flex; + flex-direction: column; + justfiy-content: center; + width: 100%; +} + +label { + align-items: center; + display: flex; + font-size: 1.2rem; +} + +input { + width: 14rem; + font-size: 1.2rem; +} + + +.center { + display: flex; + justify-content: center; + align-items: center; +} + +.field { + display: flex; + justify-content: space-around; + width: 100%; +} + +.form-box { + align-items: center; + border-color: black; + border-radius: 2rem; + border-style: solid; + border-width: 0.4rem; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 30rem; + height: 20rem; +} diff --git a/src/pages/signup/Signup.jsx b/src/pages/signup/Signup.jsx new file mode 100644 index 00000000..56ac5aed --- /dev/null +++ b/src/pages/signup/Signup.jsx @@ -0,0 +1,12 @@ +import UserForm from "../../components/userform/UserForm.jsx" +import "./Signup.css"; + +export default function Signup() { + return ( + <> +
    + +
    + + ) +} From 2f2b3e1cb97095c908d915cdb5699d9339303c26 Mon Sep 17 00:00:00 2001 From: oblionC Date: Mon, 22 May 2023 18:49:33 +0530 Subject: [PATCH 4/9] Add problemset page --- src/App.jsx | 21 +----- src/pages/Problemsets.jsx | 5 -- src/pages/home/Home.css | 25 +++++++ src/pages/home/Home.jsx | 8 +- src/pages/layout/Layout.css | 8 +- src/pages/layout/Layout.jsx | 1 + src/pages/login/Login.css | 1 + src/pages/problemsets/Problemsets.css | 16 ++++ src/pages/problemsets/Problemsets.jsx | 101 ++++++++++++++++++++++++++ src/pages/signup/Signup.css | 1 - 10 files changed, 152 insertions(+), 35 deletions(-) delete mode 100644 src/pages/Problemsets.jsx create mode 100644 src/pages/problemsets/Problemsets.css create mode 100644 src/pages/problemsets/Problemsets.jsx diff --git a/src/App.jsx b/src/App.jsx index 6b45f660..e7ab58c4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,29 +3,10 @@ import Layout from './pages/layout/Layout.jsx'; import Home from './pages/home/Home.jsx'; import Login from './pages/login/Login.jsx'; import Signup from './pages/signup/Signup.jsx'; -import Problemsets from './pages/Problemsets.jsx'; +import Problemsets from './pages/problemsets/Problemsets.jsx'; /* * Temporary problems array schema */ -const problems = [{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "42%" -},{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "412%" -}, - { - title: "202. Happy Number", - difficulty: "Easy", - acceptance: "54.9%" - }, - { - title: "203. Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%" - }]; function App() { diff --git a/src/pages/Problemsets.jsx b/src/pages/Problemsets.jsx deleted file mode 100644 index 60903bfc..00000000 --- a/src/pages/Problemsets.jsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function Problemsets() { - return ( -

    Problemsets page

    - ) -} diff --git a/src/pages/home/Home.css b/src/pages/home/Home.css index 77c36b60..829060d3 100644 --- a/src/pages/home/Home.css +++ b/src/pages/home/Home.css @@ -1,3 +1,28 @@ +.blog { + background-color: var(--secondary); + border-style: solid solid none solid; + border-width: 5px; + display: flex; + height: 7rem; + flex-direction: column; + justify-content: space-around; + padding: 1rem; + box-shadow: 10px 10px 8px #888888; +} +.blog:first-child { + border-radius: 1rem 1rem 0 0; +} +.blog:last-child { + border-style: solid; + border-radius: 0 0 1rem 1rem; +} + +.blogs { + margin-top: 4rem; + margin-bottom: 7rem; + +} + .main { width: 100%; } diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx index fb816c80..82074a00 100644 --- a/src/pages/home/Home.jsx +++ b/src/pages/home/Home.jsx @@ -4,7 +4,7 @@ import "./Home.css"; function Blogs( {blogData} ) { const blogs = blogData.map((blog, key) => { return ( -
  • +

  • {blog.date}

    {blog.title}

    {blog.content}

    @@ -21,10 +21,8 @@ function Blogs( {blogData} ) { export default function Home() { return ( -
    -
    - -
    +
    +
    ) } diff --git a/src/pages/layout/Layout.css b/src/pages/layout/Layout.css index 8e314798..60ab1f2c 100644 --- a/src/pages/layout/Layout.css +++ b/src/pages/layout/Layout.css @@ -25,9 +25,9 @@ li { } .container { - width: 90%; - margin-left: auto; + margin-left: auto; margin-right: auto; + width: 90%; } .fill-page { @@ -40,7 +40,7 @@ li { } .navbar { - background-color: var(--secondary); + background-color: var(--primary); display: flex; justify-content: center; width: 100%; @@ -63,7 +63,7 @@ li { .nav-list { display: flex; justify-content: space-between; - width: 15rem; + width: 24rem; height: 100%; margin: 0 0 0 auto; } diff --git a/src/pages/layout/Layout.jsx b/src/pages/layout/Layout.jsx index 07444427..abf8517e 100644 --- a/src/pages/layout/Layout.jsx +++ b/src/pages/layout/Layout.jsx @@ -11,6 +11,7 @@ function Navbar() {
  • Home
  • Login
  • Signup
    • +
  • Problemsets
    • diff --git a/src/pages/login/Login.css b/src/pages/login/Login.css index 5d0ee5ed..755ca2ad 100644 --- a/src/pages/login/Login.css +++ b/src/pages/login/Login.css @@ -2,4 +2,5 @@ display: flex; justify-content: center; align-items: center; + margin-top: 13rem; } diff --git a/src/pages/problemsets/Problemsets.css b/src/pages/problemsets/Problemsets.css new file mode 100644 index 00000000..c718aadc --- /dev/null +++ b/src/pages/problemsets/Problemsets.css @@ -0,0 +1,16 @@ +th { + text-align: left; + text-transform: capitalize; + font-size: 2rem; +} + +table { + width: 90%; + margin-top: 4rem; + margin-left: auto; + margin-right: auto; +} + +td { + font-size: 1.4rem; +} diff --git a/src/pages/problemsets/Problemsets.jsx b/src/pages/problemsets/Problemsets.jsx new file mode 100644 index 00000000..9b4f0dff --- /dev/null +++ b/src/pages/problemsets/Problemsets.jsx @@ -0,0 +1,101 @@ +import "./Problemsets.css"; + +function ProblemsTable( {problems} ) { + let content = []; + + let addTableHeaders = true; + problems.forEach((problem) => { + if(addTableHeaders) { + content.push( + + + Id + + + Title + + + Difficulty + + + Acceptance + + + ) + addTableHeaders = false; + } + let difficultyColor; + if(problem.difficulty === "Hard") { + difficultyColor = {color: "red"}; + } + else if(problem.difficulty === "Medium") { + difficultyColor = {color: "yellow"}; + } + else { + difficultyColor = {color: "green"}; + } + content.push( + + {problem.id} + {problem.title} + {problem.difficulty} + {problem.acceptance} + + ) + }) + + return ( +
    + + {content} +
    +
    + ) +} + +export default function Problemsets() { + const problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 2, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "41%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + } + ]; + + return ( + <> + + + ) +} diff --git a/src/pages/signup/Signup.css b/src/pages/signup/Signup.css index 5eee9012..8c597de9 100644 --- a/src/pages/signup/Signup.css +++ b/src/pages/signup/Signup.css @@ -22,7 +22,6 @@ input { font-size: 1.2rem; } - .center { display: flex; justify-content: center; From 865a7241ac23602347f080b6329c03db8330baa6 Mon Sep 17 00:00:00 2001 From: oblionC Date: Wed, 24 May 2023 12:19:47 +0530 Subject: [PATCH 5/9] Start work on problems page --- src/App.jsx | 2 + src/pages/problems/Problems.css | 0 src/pages/problems/Problems.jsx | 49 +++++++++++++ src/pages/problems/problemsList.jsx | 38 ++++++++++ src/pages/problemsList.jsx | 38 ++++++++++ src/pages/problemsets/Problemsets.jsx | 99 +++++++++++++++------------ 6 files changed, 182 insertions(+), 44 deletions(-) create mode 100644 src/pages/problems/Problems.css create mode 100644 src/pages/problems/Problems.jsx create mode 100644 src/pages/problems/problemsList.jsx create mode 100644 src/pages/problemsList.jsx diff --git a/src/App.jsx b/src/App.jsx index e7ab58c4..4ba2c9b9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,6 +4,7 @@ import Home from './pages/home/Home.jsx'; import Login from './pages/login/Login.jsx'; import Signup from './pages/signup/Signup.jsx'; import Problemsets from './pages/problemsets/Problemsets.jsx'; +import Problems from './pages/problems/Problems.jsx'; /* * Temporary problems array schema */ @@ -26,6 +27,7 @@ function App() { } /> } /> } /> + }/> diff --git a/src/pages/problems/Problems.css b/src/pages/problems/Problems.css new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/problems/Problems.jsx b/src/pages/problems/Problems.jsx new file mode 100644 index 00000000..5e0cac3a --- /dev/null +++ b/src/pages/problems/Problems.jsx @@ -0,0 +1,49 @@ +import { useParams } from 'react-router-dom'; +const problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 2, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "41%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + } +]; + +export default function Problems() { + let { id } = useParams(); + + return ( +
    +

    {id}

    +
    + ) +} diff --git a/src/pages/problems/problemsList.jsx b/src/pages/problems/problemsList.jsx new file mode 100644 index 00000000..ab8c1871 --- /dev/null +++ b/src/pages/problems/problemsList.jsx @@ -0,0 +1,38 @@ +export default let problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 2, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "41%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + } +]; diff --git a/src/pages/problemsList.jsx b/src/pages/problemsList.jsx new file mode 100644 index 00000000..cc2712c4 --- /dev/null +++ b/src/pages/problemsList.jsx @@ -0,0 +1,38 @@ +export const problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 2, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "41%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + } +]; diff --git a/src/pages/problemsets/Problemsets.jsx b/src/pages/problemsets/Problemsets.jsx index 9b4f0dff..824b7fd8 100644 --- a/src/pages/problemsets/Problemsets.jsx +++ b/src/pages/problemsets/Problemsets.jsx @@ -1,4 +1,49 @@ import "./Problemsets.css"; +import Problems from "../problems/Problems.jsx" +const problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 2, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "41%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + } +]; +import { + BrowserRouter, + Routes, + Route, + Link, +} from "react-router-dom"; function ProblemsTable( {problems} ) { let content = []; @@ -37,7 +82,7 @@ function ProblemsTable( {problems} ) { content.push( {problem.id} - {problem.title} + {problem.title} {problem.difficulty} {problem.acceptance} @@ -45,53 +90,19 @@ function ProblemsTable( {problems} ) { }) return ( -
    - - {content} -
    -
    + <> +
    + + + {content} + +
    +
    + ) } export default function Problemsets() { - const problems = [ - { - id: 1, - title: "Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "42%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - }, - { - id: 2, - title: "Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "41%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - }, - { - id: 3, - title: "Happy Number", - difficulty: "Easy", - acceptance: "54.9%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - }, - { - id: 4, - title: "Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - } - ]; return ( <> From 365045dcf07000cbfa056560e1af8d1afb7651c1 Mon Sep 17 00:00:00 2001 From: oblionC Date: Wed, 24 May 2023 13:24:59 +0530 Subject: [PATCH 6/9] Completed assignment --- src/pages/problems/Problems.css | 18 ++++++ src/pages/problems/Problems.jsx | 104 ++++++++++++++++++++------------ src/pages/problemsList.jsx | 2 +- 3 files changed, 85 insertions(+), 39 deletions(-) diff --git a/src/pages/problems/Problems.css b/src/pages/problems/Problems.css index e69de29b..6e0a6d14 100644 --- a/src/pages/problems/Problems.css +++ b/src/pages/problems/Problems.css @@ -0,0 +1,18 @@ +.wrapper { + display: flex; + width: 100%; + height: 90vh; +} + +.half { + width: 50% +} + +.code-area { + display: ; + width: 90%; + height: 90%; + overflow: scroll; +} + + diff --git a/src/pages/problems/Problems.jsx b/src/pages/problems/Problems.jsx index 5e0cac3a..e6c580ba 100644 --- a/src/pages/problems/Problems.jsx +++ b/src/pages/problems/Problems.jsx @@ -1,49 +1,77 @@ +import "./Problems.css"; import { useParams } from 'react-router-dom'; -const problems = [ - { - id: 1, - title: "Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "42%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - }, - { - id: 2, - title: "Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "41%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - }, - { - id: 3, - title: "Happy Number", - difficulty: "Easy", - acceptance: "54.9%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" - }, - { - id: 4, - title: "Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%", - content: "Given a number, find another number", - testCase: "[1, 2, 3, 4]", - output: "3" + +function searchQuestion(id) { + const problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 2, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "41%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + content: "Given a number, find another number", + testCase: "[1, 2, 3, 4]", + output: "3" + } + ]; + + for(let i = 0; i < problems.length; i++) { + let problem = problems[i] + if(problem.id == id) { + return problem; + } } -]; +} export default function Problems() { let { id } = useParams(); + let question = searchQuestion(id); + return (
    -

    {id}

    +
    +
    +

    {id}. {question.title}

    +
    +

    Description

    +

    +

    {question.content}

    +

    Test case: {question.testCase}

    +

    Output: {question.output}

    +
    +
    +