From a055ebe109b47168ed20877eef0716cf27d08678 Mon Sep 17 00:00:00 2001 From: asbar Date: Thu, 1 Jun 2023 20:43:44 +0530 Subject: [PATCH 1/3] compleated all the given assingment tasks except the backend functionality --- package-lock.json | 63 +++++++++- package.json | 3 +- public/vite.svg | 1 - src/App.css | 42 ------- src/App.jsx | 72 +++++------ src/assets/react.svg | 1 - src/elements/exploler.jsx | 25 ++++ src/elements/explorer.css | 31 +++++ src/elements/login.css | 45 +++++++ src/elements/login.jsx | 36 ++++++ src/elements/logo.png | Bin 0 -> 896 bytes src/elements/navbar.css | 34 ++++++ src/elements/navbar.jsx | 34 ++++++ src/elements/problems.css | 46 +++++++ src/elements/problems.jsx | 217 +++++++++++++++++++++++++++++++++ src/elements/signup.css | 67 ++++++++++ src/elements/signup.jsx | 53 ++++++++ src/elements/singleproblem.css | 63 ++++++++++ src/elements/singleproblem.jsx | 197 ++++++++++++++++++++++++++++++ src/index.css | 3 + src/main.jsx | 19 +-- 21 files changed, 955 insertions(+), 97 deletions(-) delete mode 100644 public/vite.svg delete mode 100644 src/App.css delete mode 100644 src/assets/react.svg create mode 100644 src/elements/exploler.jsx create mode 100644 src/elements/explorer.css create mode 100644 src/elements/login.css create mode 100644 src/elements/login.jsx create mode 100644 src/elements/logo.png create mode 100644 src/elements/navbar.css create mode 100644 src/elements/navbar.jsx create mode 100644 src/elements/problems.css create mode 100644 src/elements/problems.jsx create mode 100644 src/elements/signup.css create mode 100644 src/elements/signup.jsx create mode 100644 src/elements/singleproblem.css create mode 100644 src/elements/singleproblem.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/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.jsx b/src/App.jsx index 7743965b..23072202 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,59 +1,45 @@ /* * 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 { Routes, Route } from "react-router-dom"; +import Login from "./elements/login"; +import SignUp from "./elements/signup"; +import SingleProblem from "./elements/singleproblem"; +import Problems from "./elements/problems"; +import NavBar from "./elements/navbar"; +import Exploler from "./elements/exploler"; function App() { - - /* Add routing here, routes look like - + /* 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 -
- ) + 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 +export default App; diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/elements/exploler.jsx b/src/elements/exploler.jsx new file mode 100644 index 00000000..fa31eb9e --- /dev/null +++ b/src/elements/exploler.jsx @@ -0,0 +1,25 @@ +import "./explorer.css"; + +function Exploler() { + return ( + <> + {/* Finish the assignment! Look at the comments in App.jsx as a starting point */} + +

Welcome to PeetCode

+
+

Some Questions-:

+

What do we do here?

+

Here we Prectice interview questions

+
+ +
+

What do i get if i practice Questions

+

+ You will get some practice when solving questions in the interview +

+
+ + ); +} + +export default Exploler; diff --git a/src/elements/explorer.css b/src/elements/explorer.css new file mode 100644 index 00000000..6e8ca947 --- /dev/null +++ b/src/elements/explorer.css @@ -0,0 +1,31 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + + } + + +h1{ + font-size: 50px; + color: rgba(139, 131, 17, 0.805); + text-align: center; + } + .questions-intro{ + text-align: left; + margin-left: 1em; + padding:10px; + font-size: 20px; + } + .questions-intro p{ + text-align: left; + margin-left: 1em; + padding:10px; + font-size: 20px; + } + .questions-intro{ + text-align: left; + margin-left: 1em; + padding:10px; + font-size: 20px; + } \ No newline at end of file diff --git a/src/elements/login.css b/src/elements/login.css new file mode 100644 index 00000000..8bf8e781 --- /dev/null +++ b/src/elements/login.css @@ -0,0 +1,45 @@ +#login { + width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + + #login h2 { + text-align: center; + margin-bottom: 20px; + } + + #login form { + display: flex; + flex-direction: column; + } + + #login input { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + } + + #login button[type="submit"] { + padding: 10px 20px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + } + + #login button[type="submit"]:hover { + background-color: #45a049; + } + + \ No newline at end of file diff --git a/src/elements/login.jsx b/src/elements/login.jsx new file mode 100644 index 00000000..09d6350c --- /dev/null +++ b/src/elements/login.jsx @@ -0,0 +1,36 @@ +import React, { useState } from "react"; +import "./login.css"; + +function Login() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + + const handleLogin = (e) => { + e.preventDefault(); + // Add your login logic here, e.g., sending a request to an API + console.log("Login:", email, password); + }; + + return ( +
+

Login

+
+ setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+
+ ); +} + +export default Login; diff --git a/src/elements/logo.png b/src/elements/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..c673d855a8967edc4cbf31c34714645620cb5cd1 GIT binary patch literal 896 zcmV-`1AqL9P)^qy12JcPfmq{ga4%*jEs!?p&N;biTa!X|EC=K`ueJ>s`d5tLPA2;iy9gl z8eCjl?(XjEtz(Q@61{sDpl1|GyS^}81gT?>=0)a_HK~!jg?U>tg+AtJFZP_3M zj)8Cw!4TTemIUHJX_H?5|F>!gktL1M%}0I6ct6U+n#IwvEXnh%a(!+0JB=(C?e<;G z4ZGo=(sRi6`wrPI)N{7KbjbFhr<7$cfZ0uk?RVU(yN=|%g>`Vkx^E%9Pjq%xpG?_JiMQZx zTz1a8aPu>v9Z!-H-WN7jv@(X~bq#jz9vRiVr>qG>CuZWawvP8P=>`$QkJ7WO2TP`= z>ur-et$N$##-X}T;wr>2N{_Af0cyEs%PP!y7uTsURU!ayUTTz>iv z5BTw>7CeZhaJn4s`SDnb9fUKN@LR322!C*|SC*iddJdh?1wY==o6xBgp10zTAMdF< zF%0W+cK#BD!h_poU6JLkkjNyU>JBbzm=#w#^LC+i@%!-fX|CRer|0T^U;4t?q~q(l zza;DR=wL=?w=J@|r`bUui{Y_uujQVi)24{v?`HIvrC+G~0TIiMXsoOZWgBlq)$TbP z;khZCSq6$al3}CBuwPW}2j)0xAue_2yvH_d!Tm=*K4HC$XS0a@^Zwk +
+ + +
+ + ); +} + +export default NavBar; diff --git a/src/elements/problems.css b/src/elements/problems.css new file mode 100644 index 00000000..58b7ec31 --- /dev/null +++ b/src/elements/problems.css @@ -0,0 +1,46 @@ +#problems-table table{ + margin: 2em auto 2em; + border-collapse: collapse; + width: 100%; + +} + +#problems-table thead th{ + padding: 0.5em 1em; + border: 3px solid black; + +} +#problems-table tr{ + border: 0.0009px solid black; + +} +#problems-table td{ + padding: 1em; + margin: 0.2 auto; + +} +.Easy{ + color: rgb(0 184 163); +} +.Medium{ + color: rgb(255 192 30);; +} +.Hard{ + color: rgb(255, 0, 0); +} + +.page{ + margin: 3px; + padding: 1em 2em; + border: 0.8px solid rgb(0, 0, 0); + border-radius: 5px; +} +.page:hover{ + margin: 4px; + padding: 1.3em 2.6em; + border: 1px solid rgb(50, 50, 50); +} +#page-buttons{ + margin: 0 auto; + text-align: center; +} \ No newline at end of file diff --git a/src/elements/problems.jsx b/src/elements/problems.jsx new file mode 100644 index 00000000..6ed1e041 --- /dev/null +++ b/src/elements/problems.jsx @@ -0,0 +1,217 @@ +import { useState } from "react"; +import { Link } from "react-router-dom"; +import "./problems.css"; + +const problems1 = [ + { + title: "9. Palindrome Number", + difficulty: "Easy", + acceptance: "53.8%", + discription: + "Given an integer x, return true if x is a palindrome, and false otherwise.", + exampleInput: { + input: "x = 121", + output: "true", + }, + }, + { + title: "1396. Design Underground System", + difficulty: "Medium", + acceptance: "74.5%", + discription: + "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", + exampleInput: { + input: + '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', + output: + "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", + }, + }, + { + title: "2. Add Two Numbers", + difficulty: "Medium", + acceptance: "40.6%", + discription: + "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", + exampleInput: { + input: "l1 = [2,4,3], l2 = [5,6,4]", + output: "[7,0,8]", + }, + }, + { + title: "4. Median of Two Sorted Arrays", + difficulty: "Hard", + acceptance: "36.5%", + discription: + "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", + exampleInput: { + input: "nums1 = [1,3], nums2 = [2]", + output: "2.00000", + }, + }, +]; +const problems2 = [ + { + title: "10. Palindrome Number", + difficulty: "Medium", + acceptance: "53.8%", + discription: + "Given an integer x, return true if x is a palindrome, and false otherwise.", + exampleInput: { + input: "x = 121", + output: "true", + }, + }, + { + title: "96. Design Underground System", + difficulty: "Hard", + acceptance: "7.5%", + discription: + "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", + exampleInput: { + input: + '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', + output: + "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", + }, + }, + { + title: "1. Add Two Numbers", + difficulty: "Easy", + acceptance: "90.6%", + discription: + "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", + exampleInput: { + input: "l1 = [2,4,3], l2 = [5,6,4]", + output: "[7,0,8]", + }, + }, + { + title: "4. Median of Two Sorted Arrays", + difficulty: "Hard", + acceptance: "36.5%", + discription: + "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", + exampleInput: { + input: "nums1 = [1,3], nums2 = [2]", + output: "2.00000", + }, + }, +]; + +function Problems() { + const [problems, setProblems] = useState([ + { + title: "9. Palindrome Number", + difficulty: "Easy", + acceptance: "53.8%", + discription: + "Given an integer x, return true if x is a palindrome, and false otherwise.", + exampleInput: { + input: "x = 121", + output: "true", + }, + }, + { + title: "1396. Design Underground System", + difficulty: "Medium", + acceptance: "74.5%", + discription: + "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", + exampleInput: { + input: + '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', + output: + "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", + }, + }, + { + title: "2. Add Two Numbers", + difficulty: "Medium", + acceptance: "40.6%", + discription: + "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", + exampleInput: { + input: "l1 = [2,4,3], l2 = [5,6,4]", + output: "[7,0,8]", + }, + }, + { + title: "4. Median of Two Sorted Arrays", + difficulty: "Hard", + acceptance: "36.5%", + discription: + "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", + exampleInput: { + input: "nums1 = [1,3], nums2 = [2]", + output: "2.00000", + }, + }, + ]); + return ( + <> +
+ + + + + + + + + + + {problems.map((problem, index) => ( + + ))} + +
SI/NoTitleAcceptanceDifficulty
+
+
+ + +
+ + ); +} + +function ProblemStatement(props) { + const index = props.ind; + const title = props.title; + const acceptance = props.acceptance; + const difficulty = props.difficulty; + + return ( + + {index} + + {" "} + {title} + + + {acceptance} + {difficulty} + + ); +} +export default Problems; diff --git a/src/elements/signup.css b/src/elements/signup.css new file mode 100644 index 00000000..86259c1f --- /dev/null +++ b/src/elements/signup.css @@ -0,0 +1,67 @@ +#signup { + width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + + #signup h2 { + text-align: center; + margin-bottom: 20px; + } + + #signup form { + display: flex; + flex-direction: column; + } + + #signup input { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + } + + #signup button[type="submit"] { + padding: 10px 20px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + } + + #signup button[type="submit"]:hover { + background-color: #45a049; + } + + #signup div { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + } + + #signup h5 { + margin-right: 10px; + } + + #signup button { + padding: 5px 10px; + background-color: #f2f2f2; + border: none; + color: #007bff; + cursor: pointer; + } + + #signup button:hover { + text-decoration: underline; + } + \ No newline at end of file diff --git a/src/elements/signup.jsx b/src/elements/signup.jsx new file mode 100644 index 00000000..602dc268 --- /dev/null +++ b/src/elements/signup.jsx @@ -0,0 +1,53 @@ +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import "./signup.css"; +function SignUp() { + const [email, setEmail] = useState(""); + const [name, setName] = useState(""); + const [password, setPassword] = useState(""); + + const handleSignup = (e) => { + e.preventDefault(); + // Add your signup logic here, e.g., sending a request to an API + console.log("Signup:", email, password); + }; + const navigate = useNavigate(); + return ( +
+

Signup

+
+ setName(e.target.value)} + /> + setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+
Already a member?
+ +
+
+
+ ); +} + +export default SignUp; diff --git a/src/elements/singleproblem.css b/src/elements/singleproblem.css new file mode 100644 index 00000000..8d74febf --- /dev/null +++ b/src/elements/singleproblem.css @@ -0,0 +1,63 @@ + +#problem-solving-area{ + display: flex; + /* width: 100vh; + height: 100vh; */ + box-sizing: border-box; + +} +#left-section{ + margin: 0.3em 2rem; + flex: 1; + border: 0.6px double black; + height: 100vh; + width: 50vh; + text-align: left; +} + +#left-section *{ + margin: 0.5em; + padding: 0.5em; + font-size: 25px; +} +#right-section{ + margin: 0.3em 1.2rem; + flex: 1; + border: 0.6px double black; + height: 100vh; + width: 50vh; + padding-left: 50px; +} +#right-section *{ + padding: .5em; + +} +#button-submit{ + display: block; + margin-left: auto; + margin-right: 1.8em; + padding: 1em 2em; + border: 2px solid black; + background-color: lightgreen; + border-radius: 10px; + font-size: medium; +} +#button-submit:hover{ + margin-right: 1.4em; + border: 3px solid black; + font-size: 17px; + font-weight: bold; +} + +.examples{ + display: flex; + text-align: left; + padding: 0.7em; + overflow: scroll; +} + +#solution-area{ + height: 75%; + width: 90%; + font-size: large; +} \ No newline at end of file diff --git a/src/elements/singleproblem.jsx b/src/elements/singleproblem.jsx new file mode 100644 index 00000000..8c0d49dd --- /dev/null +++ b/src/elements/singleproblem.jsx @@ -0,0 +1,197 @@ +import { useParams, useNavigate } from "react-router-dom"; +import "./singleproblem.css"; +const problems1 = [ + { + title: "9. Palindrome Number", + difficulty: "Easy", + acceptance: "53.8%", + discription: + "Given an integer x, return true if x is a palindrome, and false otherwise.", + exampleInput: { + input: "x = 121", + output: "true", + }, + }, + { + title: "1396. Design Underground System", + difficulty: "Medium", + acceptance: "74.5%", + discription: + "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", + exampleInput: { + input: + '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', + output: + "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", + }, + }, + { + title: "2. Add Two Numbers", + difficulty: "Medium", + acceptance: "40.6%", + discription: + "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", + exampleInput: { + input: "l1 = [2,4,3], l2 = [5,6,4]", + output: "[7,0,8]", + }, + }, + { + title: "4. Median of Two Sorted Arrays", + difficulty: "Hard", + acceptance: "36.5%", + discription: + "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", + exampleInput: { + input: "nums1 = [1,3], nums2 = [2]", + output: "2.00000", + }, + }, +]; +const problems2 = [ + { + title: "10. Palindrome Number", + difficulty: "Medium", + acceptance: "53.8%", + discription: + "Given an integer x, return true if x is a palindrome, and false otherwise.", + exampleInput: { + input: "x = 121", + output: "true", + }, + }, + { + title: "96. Design Underground System", + difficulty: "Hard", + acceptance: "7.5%", + discription: + "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", + exampleInput: { + input: + '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', + output: + "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", + }, + }, + { + title: "1. Add Two Numbers", + difficulty: "Easy", + acceptance: "90.6%", + discription: + "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", + exampleInput: { + input: "l1 = [2,4,3], l2 = [5,6,4]", + output: "[7,0,8]", + }, + }, + { + title: "4. Median of Two Sorted Arrays", + difficulty: "Hard", + acceptance: "36.5%", + discription: + "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", + exampleInput: { + input: "nums1 = [1,3], nums2 = [2]", + output: "2.00000", + }, + }, +]; + +// function SingleProblem() { +// const { id } = useParams(); + +// const problem = function searchTitle() { +// let problemPresent1 = problems1.find((problem) => problem.title === id); +// let problemPresent2 = problems2.find((problem) => problem.title === id); +// if (problemPresent2 != null) { +// return problemPresent2; +// } +// if (problemPresent1 != null) { +// return problemPresent1; +// } +// }; +// const title = problem.title; +// const discription = problem.discription; +// const input = problem.exampleInput.input; +// const output = problem.exampleInput.output; +// return ( +// <> +//
+//
+//

{title}

+//

{discription}

+//
+//

Example

+//

{input}

+//

{output}

+//
+//
+//
+//

hello

+//
+//
+// +// ); +// } +function SingleProblem() { + const { id } = useParams(); + const navigate = useNavigate(); + const handleClick = () => { + navigate("/problems"); + }; + + const searchTitle = () => { + let problemPresent1 = problems1.find((problem) => problem.title === id); + let problemPresent2 = problems2.find((problem) => problem.title === id); + if (problemPresent2 != null) { + return problemPresent2; + } + if (problemPresent1 != null) { + return problemPresent1; + } + return null; // Return null if no matching problem is found + }; + + const problem = searchTitle(); + + // Check if problem exists before accessing its properties + const title = problem ? problem.title : ""; + const discription = problem ? problem.discription : ""; + const input = problem ? problem.exampleInput.input : ""; + const output = problem ? problem.exampleInput.output : ""; + + return ( + <> +
+
+

{title}

+ +
Description
+

{discription}

+ + +
+

Example

+ +
Input:
+

{input}

+ + +
Output:
+

{output}

+ +
+
+
+

Write Your Code Here

+ + +
+
+ + ); +} + +export default SingleProblem; diff --git a/src/index.css b/src/index.css index e69de29b..d0ada1fa 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,3 @@ +*{ + margin: 0; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..9a01ed48 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,13 @@ -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"; +import { BrowserRouter } from "react-router-dom"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +); From e804e343e92dcb8836c0504be51f2acc6c16f368 Mon Sep 17 00:00:00 2001 From: asbar Date: Sun, 4 Jun 2023 18:37:34 +0530 Subject: [PATCH 2/3] changed the fronted based on backend with previous changes --- src/App.jsx | 4 +- src/elements/login.css | 2 +- src/elements/login.jsx | 32 +++- src/elements/navbar.jsx | 2 +- src/elements/problems.jsx | 333 ++++++++++++++++++--------------- src/elements/signup.css | 2 +- src/elements/signup.jsx | 43 +++-- src/elements/singleproblem.jsx | 128 ++----------- 8 files changed, 262 insertions(+), 284 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 23072202..2cc1d7cc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -27,11 +27,11 @@ function App() { }> }> - }> + }> }> {/* }> */} - }> + }> }> }> diff --git a/src/elements/login.css b/src/elements/login.css index 8bf8e781..6a2bf4e9 100644 --- a/src/elements/login.css +++ b/src/elements/login.css @@ -17,7 +17,7 @@ margin-bottom: 20px; } - #login form { + #login #form { display: flex; flex-direction: column; } diff --git a/src/elements/login.jsx b/src/elements/login.jsx index 09d6350c..9cf005f6 100644 --- a/src/elements/login.jsx +++ b/src/elements/login.jsx @@ -5,19 +5,14 @@ function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const handleLogin = (e) => { - e.preventDefault(); - // Add your login logic here, e.g., sending a request to an API - console.log("Login:", email, password); - }; - return (

Login

-
+
setEmail(e.target.value)} /> @@ -25,10 +20,29 @@ function Login() { type="password" placeholder="Password" value={password} + name="password" onChange={(e) => setPassword(e.target.value)} /> - - + +
); } diff --git a/src/elements/navbar.jsx b/src/elements/navbar.jsx index 4bf9274e..06690251 100644 --- a/src/elements/navbar.jsx +++ b/src/elements/navbar.jsx @@ -15,7 +15,7 @@ function NavBar() {
  • - Problems + Problems
  • SignUp diff --git a/src/elements/problems.jsx b/src/elements/problems.jsx index 6ed1e041..ebc0be8a 100644 --- a/src/elements/problems.jsx +++ b/src/elements/problems.jsx @@ -1,153 +1,184 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import "./problems.css"; -const problems1 = [ - { - title: "9. Palindrome Number", - difficulty: "Easy", - acceptance: "53.8%", - discription: - "Given an integer x, return true if x is a palindrome, and false otherwise.", - exampleInput: { - input: "x = 121", - output: "true", - }, - }, - { - title: "1396. Design Underground System", - difficulty: "Medium", - acceptance: "74.5%", - discription: - "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", - exampleInput: { - input: - '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', - output: - "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", - }, - }, - { - title: "2. Add Two Numbers", - difficulty: "Medium", - acceptance: "40.6%", - discription: - "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", - exampleInput: { - input: "l1 = [2,4,3], l2 = [5,6,4]", - output: "[7,0,8]", - }, - }, - { - title: "4. Median of Two Sorted Arrays", - difficulty: "Hard", - acceptance: "36.5%", - discription: - "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", - exampleInput: { - input: "nums1 = [1,3], nums2 = [2]", - output: "2.00000", - }, - }, -]; -const problems2 = [ - { - title: "10. Palindrome Number", - difficulty: "Medium", - acceptance: "53.8%", - discription: - "Given an integer x, return true if x is a palindrome, and false otherwise.", - exampleInput: { - input: "x = 121", - output: "true", - }, - }, - { - title: "96. Design Underground System", - difficulty: "Hard", - acceptance: "7.5%", - discription: - "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", - exampleInput: { - input: - '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', - output: - "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", - }, - }, - { - title: "1. Add Two Numbers", - difficulty: "Easy", - acceptance: "90.6%", - discription: - "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", - exampleInput: { - input: "l1 = [2,4,3], l2 = [5,6,4]", - output: "[7,0,8]", - }, - }, - { - title: "4. Median of Two Sorted Arrays", - difficulty: "Hard", - acceptance: "36.5%", - discription: - "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", - exampleInput: { - input: "nums1 = [1,3], nums2 = [2]", - output: "2.00000", - }, - }, -]; +// const problems1 = [ +// { +// title: "9. Palindrome Number", +// difficulty: "Easy", +// acceptance: "53.8%", +// discription: +// "Given an integer x, return true if x is a palindrome, and false otherwise.", +// exampleInput: { +// input: "x = 121", +// output: "true", +// }, +// }, +// { +// title: "1396. Design Underground System", +// difficulty: "Medium", +// acceptance: "74.5%", +// discription: +// "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", +// exampleInput: { +// input: +// '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', +// output: +// "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", +// }, +// }, +// { +// title: "2. Add Two Numbers", +// difficulty: "Medium", +// acceptance: "40.6%", +// discription: +// "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", +// exampleInput: { +// input: "l1 = [2,4,3], l2 = [5,6,4]", +// output: "[7,0,8]", +// }, +// }, +// { +// title: "4. Median of Two Sorted Arrays", +// difficulty: "Hard", +// acceptance: "36.5%", +// discription: +// "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", +// exampleInput: { +// input: "nums1 = [1,3], nums2 = [2]", +// output: "2.00000", +// }, +// }, +// ]; +// const problems2 = [ +// { +// title: "10. Palindrome Number", +// difficulty: "Medium", +// acceptance: "53.8%", +// discription: +// "Given an integer x, return true if x is a palindrome, and false otherwise.", +// exampleInput: { +// input: "x = 121", +// output: "true", +// }, +// }, +// { +// title: "96. Design Underground System", +// difficulty: "Hard", +// acceptance: "7.5%", +// discription: +// "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", +// exampleInput: { +// input: +// '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', +// output: +// "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", +// }, +// }, +// { +// title: "1. Add Two Numbers", +// difficulty: "Easy", +// acceptance: "90.6%", +// discription: +// "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", +// exampleInput: { +// input: "l1 = [2,4,3], l2 = [5,6,4]", +// output: "[7,0,8]", +// }, +// }, +// { +// title: "4. Median of Two Sorted Arrays", +// difficulty: "Hard", +// acceptance: "36.5%", +// discription: +// "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", +// exampleInput: { +// input: "nums1 = [1,3], nums2 = [2]", +// output: "2.00000", +// }, +// }, +// ]; +// async function Fetching() { +// const responce = await fetch("http://localhost:3000/problems", { +// method: "GET", +// headers: { +// "Content-Type": "application/json", +// }, +// }); +// const json = responce.json(); +// } function Problems() { - const [problems, setProblems] = useState([ - { - title: "9. Palindrome Number", - difficulty: "Easy", - acceptance: "53.8%", - discription: - "Given an integer x, return true if x is a palindrome, and false otherwise.", - exampleInput: { - input: "x = 121", - output: "true", - }, - }, - { - title: "1396. Design Underground System", - difficulty: "Medium", - acceptance: "74.5%", - discription: - "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", - exampleInput: { - input: - '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', - output: - "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", - }, - }, - { - title: "2. Add Two Numbers", - difficulty: "Medium", - acceptance: "40.6%", - discription: - "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", - exampleInput: { - input: "l1 = [2,4,3], l2 = [5,6,4]", - output: "[7,0,8]", - }, - }, - { - title: "4. Median of Two Sorted Arrays", - difficulty: "Hard", - acceptance: "36.5%", - discription: - "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", - exampleInput: { - input: "nums1 = [1,3], nums2 = [2]", - output: "2.00000", + const [problems, setProblems] = useState([]); + + const Fetching = async () => { + const responce = await fetch("http://localhost:3000/problems", { + method: "GET", + headers: { + "Content-Type": "application/json", }, - }, - ]); + }); + const json = responce.json(); + setProblems(json.problems); + }; + + useEffect(() => { + Fetching(); + }, []); + // { + // title: "9. Palindrome Number", + // difficulty: "Easy", + // acceptance: "53.8%", + // discription: + // "Given an integer x, return true if x is a palindrome, and false otherwise.", + // exampleInput: { + // input: "x = 121", + // output: "true", + // }, + // }, + // { + // title: "1396. Design Underground System", + // difficulty: "Medium", + // acceptance: "74.5%", + // discription: + // "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", + // exampleInput: { + // input: + // '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', + // output: + // "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", + // }, + // }, + // { + // title: "2. Add Two Numbers", + // difficulty: "Medium", + // acceptance: "40.6%", + // discription: + // "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", + // exampleInput: { + // input: "l1 = [2,4,3], l2 = [5,6,4]", + // output: "[7,0,8]", + // }, + // }, + // { + // title: "4. Median of Two Sorted Arrays", + // difficulty: "Hard", + // acceptance: "36.5%", + // discription: + // "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", + // exampleInput: { + // input: "nums1 = [1,3], nums2 = [2]", + // output: "2.00000", + // }, + // }, + // ]); + // const responce = fetch("http://localhost:3000/problems", { + // method: "GET", + // headers: { + // "Content-Type": "application/json", + // }, + // }); + return ( <>
    @@ -161,10 +192,10 @@ function Problems() { - {problems.map((problem, index) => ( + {problems.map((problem) => (
    -
    + {/*
    -
    +
    */} ); } function ProblemStatement(props) { - const index = props.ind; + const id = props.id; const title = props.title; const acceptance = props.acceptance; const difficulty = props.difficulty; @@ -206,7 +237,7 @@ function ProblemStatement(props) { {index} {" "} - {title} + {title} {acceptance} diff --git a/src/elements/signup.css b/src/elements/signup.css index 86259c1f..92925c4c 100644 --- a/src/elements/signup.css +++ b/src/elements/signup.css @@ -17,7 +17,7 @@ margin-bottom: 20px; } - #signup form { + #signup #form { display: flex; flex-direction: column; } diff --git a/src/elements/signup.jsx b/src/elements/signup.jsx index 602dc268..9de7bd7d 100644 --- a/src/elements/signup.jsx +++ b/src/elements/signup.jsx @@ -6,35 +6,56 @@ function SignUp() { const [name, setName] = useState(""); const [password, setPassword] = useState(""); - const handleSignup = (e) => { - e.preventDefault(); - // Add your signup logic here, e.g., sending a request to an API - console.log("Signup:", email, password); - }; const navigate = useNavigate(); return (

    Signup

    -
    +
    setName(e.target.value)} /> setEmail(e.target.value)} /> setPassword(e.target.value)} /> - +
    Already a member?
    - +
    ); } diff --git a/src/elements/singleproblem.jsx b/src/elements/singleproblem.jsx index 8c0d49dd..c9fed94d 100644 --- a/src/elements/singleproblem.jsx +++ b/src/elements/singleproblem.jsx @@ -1,101 +1,5 @@ import { useParams, useNavigate } from "react-router-dom"; import "./singleproblem.css"; -const problems1 = [ - { - title: "9. Palindrome Number", - difficulty: "Easy", - acceptance: "53.8%", - discription: - "Given an integer x, return true if x is a palindrome, and false otherwise.", - exampleInput: { - input: "x = 121", - output: "true", - }, - }, - { - title: "1396. Design Underground System", - difficulty: "Medium", - acceptance: "74.5%", - discription: - "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", - exampleInput: { - input: - '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', - output: - "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", - }, - }, - { - title: "2. Add Two Numbers", - difficulty: "Medium", - acceptance: "40.6%", - discription: - "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", - exampleInput: { - input: "l1 = [2,4,3], l2 = [5,6,4]", - output: "[7,0,8]", - }, - }, - { - title: "4. Median of Two Sorted Arrays", - difficulty: "Hard", - acceptance: "36.5%", - discription: - "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", - exampleInput: { - input: "nums1 = [1,3], nums2 = [2]", - output: "2.00000", - }, - }, -]; -const problems2 = [ - { - title: "10. Palindrome Number", - difficulty: "Medium", - acceptance: "53.8%", - discription: - "Given an integer x, return true if x is a palindrome, and false otherwise.", - exampleInput: { - input: "x = 121", - output: "true", - }, - }, - { - title: "96. Design Underground System", - difficulty: "Hard", - acceptance: "7.5%", - discription: - "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", - exampleInput: { - input: - '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', - output: - "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", - }, - }, - { - title: "1. Add Two Numbers", - difficulty: "Easy", - acceptance: "90.6%", - discription: - "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", - exampleInput: { - input: "l1 = [2,4,3], l2 = [5,6,4]", - output: "[7,0,8]", - }, - }, - { - title: "4. Median of Two Sorted Arrays", - difficulty: "Hard", - acceptance: "36.5%", - discription: - "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", - exampleInput: { - input: "nums1 = [1,3], nums2 = [2]", - output: "2.00000", - }, - }, -]; // function SingleProblem() { // const { id } = useParams(); @@ -140,21 +44,29 @@ function SingleProblem() { navigate("/problems"); }; - const searchTitle = () => { - let problemPresent1 = problems1.find((problem) => problem.title === id); - let problemPresent2 = problems2.find((problem) => problem.title === id); - if (problemPresent2 != null) { - return problemPresent2; - } - if (problemPresent1 != null) { - return problemPresent1; - } - return null; // Return null if no matching problem is found - }; + // const searchTitle = () => { + // let problemPresent1 = problems1.find((problem) => problem.title === id); + // let problemPresent2 = problems2.find((problem) => problem.title === id); + // if (problemPresent2 != null) { + // return problemPresent2; + // } + // if (problemPresent1 != null) { + // return problemPresent1; + // } + // return null; // Return null if no matching problem is found + // }; - const problem = searchTitle(); + // const problem = searchTitle(); // Check if problem exists before accessing its properties + const responce = fetch("http://localhost:3000/problem/:id", { + method: "GET", + headers: { + "Content-Type": "application/json", + authorization: localStorage.getItem("token"), + }, + }); + const problem = responce.json(); const title = problem ? problem.title : ""; const discription = problem ? problem.discription : ""; const input = problem ? problem.exampleInput.input : ""; From 804db764215680cca3d1045af31162da408f5724 Mon Sep 17 00:00:00 2001 From: asbar Date: Sun, 4 Jun 2023 21:40:44 +0530 Subject: [PATCH 3/3] compleated the backend frontend connection --- src/App.jsx | 17 +- src/elements/{exploler.jsx => explorer.jsx} | 4 +- src/elements/login.jsx | 4 +- src/elements/navbar.jsx | 2 +- src/elements/problems.jsx | 190 +------------------- src/elements/signup.jsx | 9 +- src/elements/singleproblem.css | 44 ++++- src/elements/singleproblem.jsx | 177 +++++++++++------- 8 files changed, 168 insertions(+), 279 deletions(-) rename src/elements/{exploler.jsx => explorer.jsx} (92%) diff --git a/src/App.jsx b/src/App.jsx index 2cc1d7cc..8982e1c8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,3 @@ -/* - * Temporary problems array schema - */ import { Routes, Route } from "react-router-dom"; import Login from "./elements/login"; @@ -8,29 +5,19 @@ import SignUp from "./elements/signup"; import SingleProblem from "./elements/singleproblem"; import Problems from "./elements/problems"; import NavBar from "./elements/navbar"; -import Exploler from "./elements/exploler"; +import Explorer from "./elements/explorer"; 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 */} -
    }> - }> + }> }> }> - {/* }> */} }> }> }> diff --git a/src/elements/exploler.jsx b/src/elements/explorer.jsx similarity index 92% rename from src/elements/exploler.jsx rename to src/elements/explorer.jsx index fa31eb9e..c124da68 100644 --- a/src/elements/exploler.jsx +++ b/src/elements/explorer.jsx @@ -1,6 +1,6 @@ import "./explorer.css"; -function Exploler() { +function Explorer() { return ( <> {/* Finish the assignment! Look at the comments in App.jsx as a starting point */} @@ -22,4 +22,4 @@ function Exploler() { ); } -export default Exploler; +export default Explorer; diff --git a/src/elements/login.jsx b/src/elements/login.jsx index 9cf005f6..7e665a7c 100644 --- a/src/elements/login.jsx +++ b/src/elements/login.jsx @@ -1,10 +1,11 @@ import React, { useState } from "react"; import "./login.css"; +import { useNavigate } from "react-router-dom"; function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - + const navigate = useNavigate(); return (

    Login

    @@ -38,6 +39,7 @@ function Login() { }); const json = await responce.json(); localStorage.setItem("token", json.token); + navigate("/problems"); }} > Login diff --git a/src/elements/navbar.jsx b/src/elements/navbar.jsx index 06690251..6a7417b8 100644 --- a/src/elements/navbar.jsx +++ b/src/elements/navbar.jsx @@ -11,7 +11,7 @@ function NavBar() { logo
  • - Exploler + Your Submissions
  • diff --git a/src/elements/problems.jsx b/src/elements/problems.jsx index ebc0be8a..79dc4d4b 100644 --- a/src/elements/problems.jsx +++ b/src/elements/problems.jsx @@ -2,182 +2,23 @@ import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import "./problems.css"; -// const problems1 = [ -// { -// title: "9. Palindrome Number", -// difficulty: "Easy", -// acceptance: "53.8%", -// discription: -// "Given an integer x, return true if x is a palindrome, and false otherwise.", -// exampleInput: { -// input: "x = 121", -// output: "true", -// }, -// }, -// { -// title: "1396. Design Underground System", -// difficulty: "Medium", -// acceptance: "74.5%", -// discription: -// "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", -// exampleInput: { -// input: -// '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', -// output: -// "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", -// }, -// }, -// { -// title: "2. Add Two Numbers", -// difficulty: "Medium", -// acceptance: "40.6%", -// discription: -// "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", -// exampleInput: { -// input: "l1 = [2,4,3], l2 = [5,6,4]", -// output: "[7,0,8]", -// }, -// }, -// { -// title: "4. Median of Two Sorted Arrays", -// difficulty: "Hard", -// acceptance: "36.5%", -// discription: -// "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", -// exampleInput: { -// input: "nums1 = [1,3], nums2 = [2]", -// output: "2.00000", -// }, -// }, -// ]; -// const problems2 = [ -// { -// title: "10. Palindrome Number", -// difficulty: "Medium", -// acceptance: "53.8%", -// discription: -// "Given an integer x, return true if x is a palindrome, and false otherwise.", -// exampleInput: { -// input: "x = 121", -// output: "true", -// }, -// }, -// { -// title: "96. Design Underground System", -// difficulty: "Hard", -// acceptance: "7.5%", -// discription: -// "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", -// exampleInput: { -// input: -// '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', -// output: -// "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", -// }, -// }, -// { -// title: "1. Add Two Numbers", -// difficulty: "Easy", -// acceptance: "90.6%", -// discription: -// "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", -// exampleInput: { -// input: "l1 = [2,4,3], l2 = [5,6,4]", -// output: "[7,0,8]", -// }, -// }, -// { -// title: "4. Median of Two Sorted Arrays", -// difficulty: "Hard", -// acceptance: "36.5%", -// discription: -// "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", -// exampleInput: { -// input: "nums1 = [1,3], nums2 = [2]", -// output: "2.00000", -// }, -// }, -// ]; -// async function Fetching() { -// const responce = await fetch("http://localhost:3000/problems", { -// method: "GET", -// headers: { -// "Content-Type": "application/json", -// }, -// }); -// const json = responce.json(); -// } - function Problems() { const [problems, setProblems] = useState([]); const Fetching = async () => { - const responce = await fetch("http://localhost:3000/problems", { + const response = await fetch("http://localhost:3000/problems", { method: "GET", headers: { "Content-Type": "application/json", }, }); - const json = responce.json(); + const json = await response.json(); setProblems(json.problems); }; useEffect(() => { Fetching(); }, []); - // { - // title: "9. Palindrome Number", - // difficulty: "Easy", - // acceptance: "53.8%", - // discription: - // "Given an integer x, return true if x is a palindrome, and false otherwise.", - // exampleInput: { - // input: "x = 121", - // output: "true", - // }, - // }, - // { - // title: "1396. Design Underground System", - // difficulty: "Medium", - // acceptance: "74.5%", - // discription: - // "An underground railway system is keeping track of customer travel times between different stations. They are using this data to calculate the average time it takes to travel from one station to another. ", - // exampleInput: { - // input: - // '["UndergroundSystem","checkIn","checkIn","checkIn","checkOut","checkOut","checkOut","getAverageTime","getAverageTime","checkIn","getAverageTime","checkOut","getAverageTime"][[],[45,"Leyton",3],[32,"Paradise",8],[27,"Leyton",10],[45,"Waterloo",15],[27,"Waterloo",20],[32,"Cambridge",22],["Paradise","Cambridge"],["Leyton","Waterloo"],[10,"Leyton",24],["Leyton","Waterloo"],[10,"Waterloo",38],["Leyton","Waterloo"]]', - // output: - // "[null,null,null,null,null,null,null,14.00000,11.00000,null,11.00000,null,12.00000]", - // }, - // }, - // { - // title: "2. Add Two Numbers", - // difficulty: "Medium", - // acceptance: "40.6%", - // discription: - // "You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order, and each of their nodes contains a single digit. Add the two numbers and return the sum as a linked list.You may assume the two numbers do not contain any leading zero, except the number 0 itself.", - // exampleInput: { - // input: "l1 = [2,4,3], l2 = [5,6,4]", - // output: "[7,0,8]", - // }, - // }, - // { - // title: "4. Median of Two Sorted Arrays", - // difficulty: "Hard", - // acceptance: "36.5%", - // discription: - // "Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.The overall run time complexity should be O(log (m+n)).", - // exampleInput: { - // input: "nums1 = [1,3], nums2 = [2]", - // output: "2.00000", - // }, - // }, - // ]); - // const responce = fetch("http://localhost:3000/problems", { - // method: "GET", - // headers: { - // "Content-Type": "application/json", - // }, - // }); return ( <> @@ -194,8 +35,8 @@ function Problems() { {problems.map((problem) => ( - {/*
    - - -
    */} ); } @@ -234,10 +57,9 @@ function ProblemStatement(props) { return ( - {index} + {id} - {" "} - {title} + {title} {acceptance} diff --git a/src/elements/signup.jsx b/src/elements/signup.jsx index 9de7bd7d..f5b82991 100644 --- a/src/elements/signup.jsx +++ b/src/elements/signup.jsx @@ -44,14 +44,7 @@ function SignUp() { }), }); const json = await response.json(); - console.log(json); - console.log( - JSON.stringify({ - name: name, - email: email, - password: password, - }) - ); + navigate("/login"); }} > Signup diff --git a/src/elements/singleproblem.css b/src/elements/singleproblem.css index 8d74febf..129db97e 100644 --- a/src/elements/singleproblem.css +++ b/src/elements/singleproblem.css @@ -34,7 +34,6 @@ } #button-submit{ display: block; - margin-left: auto; margin-right: 1.8em; padding: 1em 2em; border: 2px solid black; @@ -48,6 +47,22 @@ font-size: 17px; font-weight: bold; } +#button-submission{ + display: block; + margin-left: 1.8em; + margin-right: 0.3em; + padding: 1em 2em; + border: 2px solid black; + background-color: lightgreen; + border-radius: 10px; + font-size: medium; +} +#button-submission:hover{ + margin-left: 1.4em; + border: 3px solid black; + font-size: 17px; + font-weight: bold; +} .examples{ display: flex; @@ -60,4 +75,31 @@ height: 75%; width: 90%; font-size: large; +} + +#singleproblem-buttons{ + display: flex; + justify-content: end; +} +#submission-display{ + margin-top: 6em; +} +#submission-display table{ + margin: 2em auto 2em; + border-collapse: collapse; + width: 100%; +} + +#submission-display thead th{ + padding: 0.5em 1em; + border: 3px solid black; +} +#submission-display tr{ + border: 0.0009px solid black; +} + +#submission-display td{ + padding: 1em; + margin: 0.2 auto; + } \ No newline at end of file diff --git a/src/elements/singleproblem.jsx b/src/elements/singleproblem.jsx index c9fed94d..12fdf273 100644 --- a/src/elements/singleproblem.jsx +++ b/src/elements/singleproblem.jsx @@ -1,76 +1,89 @@ import { useParams, useNavigate } from "react-router-dom"; import "./singleproblem.css"; +import { useEffect, useState, useRef } from "react"; -// function SingleProblem() { -// const { id } = useParams(); - -// const problem = function searchTitle() { -// let problemPresent1 = problems1.find((problem) => problem.title === id); -// let problemPresent2 = problems2.find((problem) => problem.title === id); -// if (problemPresent2 != null) { -// return problemPresent2; -// } -// if (problemPresent1 != null) { -// return problemPresent1; -// } -// }; -// const title = problem.title; -// const discription = problem.discription; -// const input = problem.exampleInput.input; -// const output = problem.exampleInput.output; -// return ( -// <> -//
    -//
    -//

    {title}

    -//

    {discription}

    -//
    -//

    Example

    -//

    {input}

    -//

    {output}

    -//
    -//
    -//
    -//

    hello

    -//
    -//
    -// -// ); -// } function SingleProblem() { + const [problem, setProblem] = useState({ + id: "", + title: "", + difficulty: "", + acceptance: "", + discription: "", + exampleInput: { + input: "", + output: "", + }, + }); + const [problemSubmissions, setProblemSubmissions] = useState([]); + const [userSubmission, setSubmission] = useState(""); + const [showSubmissions, setShowSubmissions] = useState(false); const { id } = useParams(); const navigate = useNavigate(); - const handleClick = () => { - navigate("/problems"); + const submissionsRef = useRef(null); + + const submission = async () => { + const response = await fetch("http://localhost:3000/submissions", { + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: localStorage.getItem("token"), + }, + body: JSON.stringify({ + id: id, + submission: userSubmission, + }), + }); + const json = await response.json(); + if (json.status === "Ac") { + navigate("/problems"); + } else { + alert(json.status); + } }; - // const searchTitle = () => { - // let problemPresent1 = problems1.find((problem) => problem.title === id); - // let problemPresent2 = problems2.find((problem) => problem.title === id); - // if (problemPresent2 != null) { - // return problemPresent2; - // } - // if (problemPresent1 != null) { - // return problemPresent1; - // } - // return null; // Return null if no matching problem is found - // }; + const Fetching = async () => { + const response = await fetch("http://localhost:3000/problem/" + id, { + method: "GET", + }); + const json = await response.json(); + setProblem(json.problem); + }; - // const problem = searchTitle(); + const submissionview = async () => { + const response = await fetch("http://localhost:3000/submission/" + id, { + method: "GET", + headers: { + "Content-Type": "application/json", + authorization: localStorage.getItem("token"), + }, + }); + const json = await response.json(); + if (json.submissions[0]) { + setProblemSubmissions(json.submissions); + setShowSubmissions(true); + scrollToSubmission(); + } else { + setShowSubmissions(false); + } + }; + const scrollToSubmission = () => { + if (submissionsRef.current) { + submissionsRef.current.scrollIntoView({ behavior: "smooth" }); + } + }; - // Check if problem exists before accessing its properties - const responce = fetch("http://localhost:3000/problem/:id", { - method: "GET", - headers: { - "Content-Type": "application/json", - authorization: localStorage.getItem("token"), - }, - }); - const problem = responce.json(); - const title = problem ? problem.title : ""; - const discription = problem ? problem.discription : ""; - const input = problem ? problem.exampleInput.input : ""; - const output = problem ? problem.exampleInput.output : ""; + useEffect(() => { + Fetching(); + // submissionview(); + }, []); + + // const { title, discription, exampleInput } = problem; + // const { input, output } = exampleInput; + const title = problem.title; + const discription = problem.discription; + const exampleInput = problem.exampleInput; + const input = exampleInput.input; + const output = exampleInput.output; return ( <> @@ -93,13 +106,43 @@ function SingleProblem() {

    {output}

    + {showSubmissions && ( +
    +

    Submissions

    +
    + + + + + + + {problemSubmissions.map((submission, index) => ( + + + + + ))} + +
    SInoSubmissions
    {index + 1}{submission.submission}
    +
    +
    + )}

    Write Your Code Here

    - - + +
    + + +