diff --git a/index.html b/index.html index 79c47019..8ed6f3da 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - Vite + React - - -
- - + + + + + Hkirat Assignment II + + +
+ + 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..54f94a7b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,59 +1,52 @@ -/* - * 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%" - }]; - +import React from "react"; +import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom"; +import Navbar from "./components/navbar/Navbar"; +import Register from "./components/register/Register"; +import Allproblems from "./components/allproblems/Allproblems"; +import Login from "./components/login/Login"; +import Problem from "./components/problem/Problem"; function App() { - - /* Add routing here, routes look like - - /login - Login page - /signup - Signup page - /problemset/all/ - All problems (see problems array above) - /problems/:problem_slug - A single problem page - */ - - return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
- ) + /* Add routing here, routes look like - + /login - Login page + /signup - Signup page + /problemset/all/ - All problems (see problems array above) + /problems/:problem_slug - A single problem page + */ + const Layout = () => { + return ( +
+ + {/* this part is an array of routes and navbar and footer are static in all pages */} + +
+ ); + }; + const router = createBrowserRouter([ + { + path: "/", + element: , + children: [ + { + path: "/problemset/all/", + element: , + }, + { + path: "/register", + element: , + }, + { + path: "/login", + element: , + }, + { + path: "/problem/:id", + element: , + }, + ], + }, + ]); + return ; } -// 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 +export default App; diff --git a/src/assets/problems.js b/src/assets/problems.js new file mode 100644 index 00000000..ffdc437a --- /dev/null +++ b/src/assets/problems.js @@ -0,0 +1,50 @@ +export const problems = [ + { + id: 1, + title: "Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + example: { + Input: "values = [1,2,3,7]", + Output: "Bob", + Explanation: + "Alice will always lose. Her best move will be to take three piles and the score become 6. Now the score of Bob is 7 and Bob wins.", + }, + }, + { + id: 2, + title: "Wow problem", + difficulty: "Medium", + acceptance: "41%", + example: { + Input: "values = [1,2,3,7,8,9]", + Output: "Rob", + Explanation: + "Alice will always lose. Her best move will be to take three piles and the score become 6. Now the score of Bob is 7 and Bob wins.", + }, + }, + { + id: 3, + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%", + example: { + Input: "values = [1,2,3,7,8,9,10,11]", + Output: "Kob", + Explanation: + "Alice will always lose. Her best move will be to take three piles and the score become 6. Now the score of Bob is 7 and Bob wins.", + }, + }, + { + id: 4, + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + example: { + Input: "values = [1,2,3,7,8,9,10,11,12]", + Output: "Tob", + Explanation: + "Alice will always lose. Her best move will be to take three piles and the score become 6. Now the score of Bob is 7 and Bob wins.", + }, + }, +]; diff --git a/src/components/allproblems/Allproblems.css b/src/components/allproblems/Allproblems.css new file mode 100644 index 00000000..690cc413 --- /dev/null +++ b/src/components/allproblems/Allproblems.css @@ -0,0 +1,88 @@ +/* @import "//www.envisionus.com/EnvisionUS/Styles/EnvisionUS.less"; */ + +.link { + text-decoration: none; + color: inherit; +} + +table { + width: 100%; +} +table thead tr { + background: #dcd5c5 url("/Global/Images/parchment-bkg.jpg") repeat; +} +table thead tr h1, +table thead tr h2, +table thead tr .h1, +table thead tr .h2, +table thead tr h3, +table thead tr .h3, +table thead tr h4, +table thead tr .h4 { + color: #151515; +} +table thead tr a { + color: #0075b0; +} +table thead tr a:hover, +table thead tr a:focus { + color: white; +} +table tbody tr:nth-of-type(even) { + background: #e40000 !important; +} +table td, +table th { + padding: 8px 14px; + text-align: left; + font-size: 0.9rem; +} + +table th { + font-weight: 700; + font-size: 0.8rem; + line-height: 1.4; + font-family: "Gotham SSm A", "Gotham SSm B", Helvetica, sans-serif; + text-transform: uppercase; + margin: 0; + max-width: 800px; + line-height: inherit; + color: #151515; +} +table th.PrimaryFont { + text-transform: none; +} + +@media only screen and (max-width: 599px) { + table th { + display: none; + } + table td { + position: relative; + display: block; + padding-left: 110px; + } + table td:before { + position: absolute; + top: 8px; + left: 10px; + display: block; + content: attr(data-label) ": "; + font-weight: 700; + } + table tbody tr { + padding: 20px 0; + display: block; + } + table:nth-of-type(odd) { + background: #f3f3f3; + } +} + +/* For display in CodePen */ +.problems { + padding: 20px; +} +table { + border-collapse: collapse; +} diff --git a/src/components/allproblems/Allproblems.jsx b/src/components/allproblems/Allproblems.jsx new file mode 100644 index 00000000..dd331fe7 --- /dev/null +++ b/src/components/allproblems/Allproblems.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import "./Allproblems.css"; +import { Link } from "react-router-dom"; +import { problems } from "../../assets/problems"; + +function Allproblems() { + return ( +
+ + + + + + + + + + {problems.map((problem) => ( + + + + + + + + + ))} +
S No.TitleAcceptanceTitleDifficulty
{problem.id}{problem.acceptance} + + {problem.title} + + {problem.difficulty}
+
+ ); +} +export default Allproblems; diff --git a/src/components/login/Login.css b/src/components/login/Login.css new file mode 100644 index 00000000..d976bef8 --- /dev/null +++ b/src/components/login/Login.css @@ -0,0 +1,62 @@ +/* this needs to go in the app.jsx css but who cares */ +body { + background-color: #65658f; + color: whitesmoke; +} +.container { + display: block; + margin: 10% auto; + width: 30%; + max-width: 80vh; + height: 50%; + max-height: 50%; + border: solid 2px #120a19; + background-color: rgba(84, 41, 124, 0.9); + box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); + border-radius: 10px; +} + +h1 { + font-size: 10vh; + display: flex; + margin: 4% auto; + justify-content: center; + font-family: sans-serif; + font-size: 30px; +} +hr { + width: 60%; + border: 1px solid #120a19; +} + +label { + display: block; + margin: auto; + padding: 2vh; +} +input[type="email"], +input[type="password"] { + display: block; + margin: 2% auto; + width: 85%; + height: 4vh; + max-height: 30px; + border-radius: 5px; + border: solid 2px #120a19; + background-color: #dbd6df; +} + +input[type="submit"] { + display: block; + margin: 4% auto; + width: 30%; + height: 4vh; + background-color: #120a19; + color: whitesmoke; + border-radius: 10px; + cursor: pointer; +} + +input:hover { + transform: scale(1.05); +} diff --git a/src/components/login/Login.jsx b/src/components/login/Login.jsx new file mode 100644 index 00000000..8252a76f --- /dev/null +++ b/src/components/login/Login.jsx @@ -0,0 +1,49 @@ +import React, { useState } from "react"; + +import "./Login.css"; + +function Login() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + + const handleSubmit = (e) => { + e.preventDefault(); + console.log(email); + console.log(password); + }; + + return ( +
+
+

Login

+
+
+ + + +
+
+
+ ); +} +export default Login; diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx new file mode 100644 index 00000000..a5eb8872 --- /dev/null +++ b/src/components/navbar/Navbar.jsx @@ -0,0 +1,6 @@ +import React from "react"; + +function Navbar() { + return
NavBar
; +} +export default Navbar; diff --git a/src/components/problem/Problem.jsx b/src/components/problem/Problem.jsx new file mode 100644 index 00000000..2e4e77e0 --- /dev/null +++ b/src/components/problem/Problem.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import { problems } from "../../assets/problems"; +import { useParams } from "react-router-dom"; + +function Problem() { + const { id } = useParams(); + const problem = problems.filter((problem) => problem.id === Number(id)); + + return ( +
+ {problem[0].id} +
+ {problem[0].title} +
+ Input: +

{problem[0].example.Input}

+ Output: +

{problem[0].example.Output}

+
+ {problem[0].example.Explanation} +
+ ); +} +export default Problem; diff --git a/src/components/register/Register.css b/src/components/register/Register.css new file mode 100644 index 00000000..9a675135 --- /dev/null +++ b/src/components/register/Register.css @@ -0,0 +1,62 @@ +body { + background-color: #65658f; + color: whitesmoke; +} +.container { + display: block; + margin: 10% auto; + width: 30%; + max-width: 80vh; + height: 50%; + max-height: 50%; + border: solid 2px #120a19; + background-color: rgba(84, 41, 124, 0.9); + box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6); + border-radius: 10px; +} + +h1 { + font-size: 10vh; + display: flex; + margin: 4% auto; + justify-content: center; + font-family: sans-serif; + font-size: 30px; +} +hr { + width: 60%; + border: 1px solid #120a19; +} + +label { + display: block; + margin: auto; + padding: 2vh; +} +input[type="email"], +input[type="password"], +input[type="text"] { + display: block; + margin: 2% auto; + width: 85%; + height: 4vh; + max-height: 30px; + border-radius: 5px; + border: solid 2px #120a19; + background-color: #dbd6df; +} + +input[type="submit"] { + display: block; + margin: 4% auto; + width: 30%; + height: 4vh; + background-color: #120a19; + color: whitesmoke; + border-radius: 10px; + cursor: pointer; +} + +input:hover { + transform: scale(1.05); +} diff --git a/src/components/register/Register.jsx b/src/components/register/Register.jsx new file mode 100644 index 00000000..0f2ecdeb --- /dev/null +++ b/src/components/register/Register.jsx @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import "./Register.css"; + +function Register() { + const [email, setEmail] = useState(""); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + const handleSubmit = (e) => { + e.preventDefault(); + console.log(email, username, password); + }; + + return ( +
+
+

Register

+
+
+ + + + +
+
+
+ ); +} +export default Register; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..acf9c62a 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +// import './index.css' -ReactDOM.createRoot(document.getElementById('root')).render( - - - , -) +ReactDOM.createRoot(document.getElementById("root")).render( + // + , + // , +);