diff --git a/README.md b/README.md index 83f3a207..ca60280a 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,3 @@ ## Full stack assignment -### Video -Link to video - https://www.youtube.com/watch?v=569YZm0X5-0 - -### Where to start? -Look at App.jsx inside the src/ folder diff --git a/index.html b/index.html index 79c47019..163197ca 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ - - - - - Vite + React - - -
- - - + + + + + + Vite + React + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cd606935..ba6ce06b 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.22.3" }, "devDependencies": { "@types/react": "^18.0.28", @@ -766,6 +767,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "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.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "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.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==" + }, "@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.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "requires": { + "@remix-run/router": "1.15.3" + } + }, + "react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "requires": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + } + }, "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..97373c41 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.22.3" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/App.css b/src/App.css index b9d355df..e69de29b 100644 --- a/src/App.css +++ b/src/App.css @@ -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..3110d7b2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,59 +1,310 @@ +import { useEffect, useState } from "react"; +import { BrowserRouter, Routes, Route, useParams } from "react-router-dom"; +import './assets/custom.css' /* * Temporary problems array schema */ -const problems = [{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", +const problems1 = [{ + index: "201", + title: "Two Sum", + difficulty: "Easy", acceptance: "42%" -},{ - title: "201. Bitwise AND of Numbers Range", +}, { + index: "202", + title: "Palindrome Number", + difficulty: "Easy", + acceptance: "41%" +}, +{ + index: "203", + title: "Happy Number", + difficulty: "Easy", + acceptance: "54.9%" +}, +{ + index: "204", + title: "Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%" +}]; +const problems2 = [{ + index: "205", + title: "Numbers Range", difficulty: "Medium", - acceptance: "412%" + acceptance: "42%" +}, { + index: "206", + title: "Reverse Array", + difficulty: "Easy", + acceptance: "41%" }, - { - title: "202. Happy Number", - difficulty: "Easy", - acceptance: "54.9%" - }, - { - title: "203. Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%" - }]; +{ + index: "207", + title: "Sad Number", + difficulty: "Easy", + acceptance: "54.9%" +}, +{ + index: "208", + title: "Remove Duplicate Elements", + difficulty: "Easy", + acceptance: "42%" +}]; +const problemDetail = [ + { + index: "201", + title: "Two Sum", + description: `Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. + You may assume that each input would have exactly one solution, and you may not use the same element twice. + You can return the answer in any order.`, + input: `nums = [2,7,11,15], target = 9`, + output: `[0,1]` + }, { + index: "202", + title: "Palindrome Number", + description: `Given an integer x, return true if x is a palindrome, and false otherwise.`, + input: "x = 121", + output: "true" + } +] +const defaultCode = { + "java": `class Solution { + public int[] twoSum(int[] nums, int target) { + + } + }`, + "python": `class Solution(object): + def twoSum(self, nums, target): + """ + :type nums: List[int] + :type target: int + :rtype: List[int] + """ + `, + "c++": `class Solution { + public: + vector twoSum(vector& nums, int target) { + + } + };`, + "javascript": `/** + * @param {number[]} nums + * @param {number} target + * @return {number[]} + */ + var twoSum = function(nums, target) { + + };` +} function App() { + return ( + + /* 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 + //
+ // ) + + + + + + + + + + ) +} + +//home component +function Home() { + return ( +
+
+

Home

+
+ + +
+
+
+ ) +} + +//login component +function Login() { + return ( +
+
+

Login

+
+ +
+ +
+ +
+
+
+ ) +} + +//signup component +function Signup() { + return ( +
+
+

Signup

+
+ +
+ +
+ +
+
+
+ ) +} - /* 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 - */ +//all problem set +function AllProblems() { + const [page, setPage] = useState(problems1) return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
- ) +
+ + + + + + + + + + + {page.map(problem => ( + + ))} + +
IndexTitleAcceptanceDifficulty
+
+ + +
+
+ ) } -// A demo component +//slug component +function SingleProblem() { + const [problemSlug, setProblemSlug] = useState("") + let { index } = useParams(); + useEffect(() => setProblemSlug(problemSlug => index), []) + let problem_details = problemDetail.find(problem => (problem.index == problemSlug)); + if (problem_details) { + return ( + + ) + } + else { + return ( +

NOT VALID INDEX

+ ) + } +} + +//seperate page for a problem +function ProblemPage(props) { + + const index = props.index; + const title = props.title; + const description = props.description; + const input = props.input; + const output = props.output; + + // const [language, setLanguage] = useState("java"); + // console.log("curr-val", language); + + const handleLanguageChange = (e) => { + console.log("selected-value", e.target.value); + setCodeChange(defaultCode[e.target.value]); + } + + const [code, setCodeChange] = useState(defaultCode["java"]); + const handleCodeChange = e => { + // console.log(e.target.value); + setCodeChange(e.target.value); + } + + const handleSubmit = (e) => { + e.preventDefault(); + console.log("submmited code", e.target.elements.code.value); + } + + return ( +
+
+

{index} : {title}

+

Description : {description}

+

Input : {input}

+

Output : {output}

+
+
+
+ +
+
+ +
+
Dont Change language after editing, you will lose progress
+
+
+ ) +} + + +// A demo component(summary component) function ProblemStatement(props) { + const page = props.page; + const index = props.index; const title = props.title; const acceptance = props.acceptance; const difficulty = props.difficulty; + console.log(index) - return - - {title} - - - {acceptance} - - - {difficulty} - - + return ( + + {index} + + + {title} + + + {acceptance} + {difficulty} + + ); } export default App diff --git a/src/assets/custom.css b/src/assets/custom.css new file mode 100644 index 00000000..20a58918 --- /dev/null +++ b/src/assets/custom.css @@ -0,0 +1,127 @@ +body { + /* text-align: center; */ +} + + +/*----------------Home page styles----------------*/ + +.home-container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* border: solid; */ +} + +.home-container-items { + padding: 150px; + border: solid; + border-radius: 50px; + text-align: center; +} + +.home-container-items .link-container * { + margin: 20px; + text-decoration: none; + border-radius: 20px; + padding: 10px; +} + +.home-container-items h1 { + margin-bottom: 30px; +} + +/*----------------login page styles----------------*/ + +.login-container, +.signup-container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* border: solid; */ +} + +.login-container .login-form, +.signup-container .signup-form { + padding: 150px; + /* align-items: center; */ + border: solid; + border-radius: 50px; + text-align: center; +} + +.login-form *, +.signup-form * { + margin: 10px; + margin-bottom: 30px; +} + +.login-form h1, +.signup-form h1 { + margin-bottom: 40px; +} + +/*----------------signup page styles----------------*/ + + + + +/*----------------All problems page styles----------------*/ + +.summary-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 100px; + padding: 40px; + border: dashed; + border-radius: 25px; + text-align: center; +} + +.summary-container table * { + padding: 5px; +} + +.pagination { + margin-top: 30px; +} + + + +/*----------------single problem page styles----------------*/ +.page-container { + background-color: rgb(234, 234, 234); + display: flex; + border: solid; + border-radius: 25px; +} + +.desc-container { + height: 500px; + width: 600px; + flex-direction: column; + margin: 20px; + padding: 50px +} + +.code-editor { + flex-direction: column; + border: dotted; + /* border-radius: 50px; */ + margin: 20px; + padding: 50px +} + +.code-editor form * { + margin: 20px; +} + +.code-editor select { + padding: 10px; + margin-left: 0px; +} \ No newline at end of file