diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..4d29575de --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md index 027584c5e..9806c9739 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,9 @@ Assignment 4 - Components === -Due: October 4th, by 11:59 AM. +## Travelia -For this assignment you will re-implement the client side portion of *either* A2 or A3 using either React or Svelte components. If you choose A3 you only need to use components for the data display / updating; you can leave your login UI as is. +your hosting link https://a4-dinmukhamed-umbetzhan.glitch.me/ -[Svelte Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svelte.md) -[React Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_react.md) +I used my second assignment code as a base for this project. It was much easier to develop since I used react before. I used same styling components and put them into js files. It was challenging for me to use the build files, since glitch didn't like the name of the folder. That is why I put all files from build folder to main directory of the application. All JS files are still in the src folder. -This project can be implemented on any hosting service (Glitch, DigitalOcean, Heroku etc.), however, you must include all files in your GitHub repo so that the course staff can view them. - -Deliverables ---- - -Do the following to complete this assignment: - -1. Implement your project with the above requirements. -3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly. -4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it. -5. Fork this repository and modify the README to the specifications below. Be sure to add *all* project files. -6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`. - -Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions) ---- - -## Your Web Application Title - -your hosting link e.g. http://a4-charlieroberts.glitch.me - -Include a very brief summary of your project here and what you changed / added to assignment #3. Briefly (3–4 sentences) answer the following question: did the new technology improve or hinder the development experience? - -Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given. diff --git a/asset-manifest.json b/asset-manifest.json new file mode 100644 index 000000000..37e014468 --- /dev/null +++ b/asset-manifest.json @@ -0,0 +1,13 @@ +{ + "files": { + "main.css": "/static/css/main.d44f8cd0.css", + "main.js": "/static/js/main.6bd76f1a.js", + "index.html": "/index.html", + "main.d44f8cd0.css.map": "/static/css/main.d44f8cd0.css.map", + "main.6bd76f1a.js.map": "/static/js/main.6bd76f1a.js.map" + }, + "entrypoints": [ + "static/css/main.d44f8cd0.css", + "static/js/main.6bd76f1a.js" + ] +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 000000000..a11777cc4 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..3eea3d56e --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +React App
\ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 000000000..080d6c77a --- /dev/null +++ b/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/robots.txt b/robots.txt new file mode 100644 index 000000000..e9e57dc4d --- /dev/null +++ b/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.css b/src/App.css new file mode 100644 index 000000000..0221ad206 --- /dev/null +++ b/src/App.css @@ -0,0 +1,162 @@ +.main { + font-size: 40px; + text-align: center; +} + +.form { + width: 300px; + padding: 64px 15px 24px; + margin: 0 auto; +} + +.form .control { + margin: 0 0 24px; +} + +.form .control input { + width: 100%; + padding: 14px 16px; + border: 0; + background: transparent; + color: #fff; + font-family: monospace, serif; + letter-spacing: 0.05em; + font-size: 16px; +} + +.form .control input:hover, +.form .control input:focus { + outline: none; + border: 0; +} + +.form .btn { + width: 100%; + display: block; + padding: 14px 16px; + background: transparent; + outline: none; + border: 0; + color: #fff; + letter-spacing: 0.1em; + font-weight: bold; + font-family: monospace; + font-size: 16px; +} + +.block-cube { + position: relative; +} + +.block-cube .bg-top { + position: absolute; + height: 10px; + background: #020024; + background: linear-gradient(90deg, #020024 0%, #340979 37%, #00d4ff 94%); + bottom: 100%; + left: 5px; + right: -5px; + transform: skew(-45deg, 0); + margin: 0; +} + +.block-cube .bg-top .bg-inner { + bottom: 0; +} + +.block-cube .bg { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: #020024; + background: linear-gradient(90deg, #020024 0%, #340979 37%, #00d4ff 94%); +} + +.block-cube .bg-right { + position: absolute; + background: #020024; + background: #00d4ff; + top: -5px; + z-index: 0; + bottom: 5px; + width: 10px; + left: 100%; + transform: skew(0, -45deg); +} + +.block-cube .bg-right .bg-inner { + left: 0; +} + +.block-cube .bg .bg-inner { + transition: all 0.2s ease-in-out; +} + +.block-cube .bg-inner { + background: #212121; + position: absolute; + left: 2px; + top: 2px; + right: 2px; + bottom: 2px; +} + +.block-cube .text { + position: relative; + z-index: 2; +} + +.block-cube.block-input input { + position: relative; + z-index: 2; +} + +.block-cube.block-input input:focus~.bg-right .bg-inner, +.block-cube.block-input input:focus~.bg-top .bg-inner, +.block-cube.block-input input:focus~.bg-inner .bg-inner { + top: 100%; + background: rgba(255, 255, 255, 0.5); +} + +.block-cube.block-input .bg-top, +.block-cube.block-input .bg-right, +.block-cube.block-input .bg { + background: rgba(255, 255, 255, 0.5); + transition: background 0.2s ease-in-out; +} + +.block-cube.block-input .bg-right .bg-inner, +.block-cube.block-input .bg-top .bg-inner { + transition: all 0.2s ease-in-out; +} + +.block-cube.block-input:focus .bg-top, +.block-cube.block-input:focus .bg-right, +.block-cube.block-input:focus .bg, +.block-cube.block-input:hover .bg-top, +.block-cube.block-input:hover .bg-right, +.block-cube.block-input:hover .bg { + background: rgba(255, 255, 255, 0.8); +} + +.block-cube.block-cube-hover:focus .bg .bg-inner, +.block-cube.block-cube-hover:hover .bg .bg-inner { + top: 100%; +} + +table { + text-align: center; + border: 3px solid #ffffff; + font-size: 20px; + margin-left: auto; + margin-right: auto; + margin-bottom: 50px; + width: 75%; +} + +#tlist { + text-align: center; + font-size: 30px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 000000000..455e1a60e --- /dev/null +++ b/src/App.js @@ -0,0 +1,173 @@ +import { useState, useRef } from 'react' +import './App.css'; + +function App() { + const [yourname, setYourname] = useState("") + + const [countryName, setCountryName] = useState("") + const [cityName, setCityName] = useState("") + const [date, setDate] = useState("") + const [daysSpent, setDaysSpent] = useState("") + + const [tableItems, setTableItems] = useState([]) + + const tlistRef = useRef(null) + + function updateTitle() { + tlistRef.current.innerHTML = yourname + "'s Travel List"; + } + + function submitForm(e) { + e.preventDefault(); + + let json = { + country_name: countryName, + city_name: cityName, + date: date, + time_spent: daysSpent + ' days', + }; + + let body = JSON.stringify(json); + + fetch("/submit", { + method: "POST", + body, + }).then((res) => { + res.text().then((json) => { + console.log("Body: ", body); + + setTableItems((prev) => { + return [...prev, { countryName, cityName, date, daysSpent }] + }) + + console.log(json); + }); + }) + } + + return ( + <> +

Travelia

+ +
+
+

Label your name

+
+
+ setYourname(e.currentTarget.value)} value={yourname} /> +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+

Add destination

+
+
+ setCountryName(e.currentTarget.value)} /> +
+
+
+
+
+
+
+
+
+
+
+ setCityName(e.currentTarget.value)} /> +
+
+
+
+
+
+
+
+
+
+
+ setDate(e.currentTarget.value)} /> +
+
+
+
+
+
+
+
+
+
+
+ setDaysSpent(e.currentTarget.value)} /> +
+
+
+
+
+
+
+
+
+
+ +
+ +

My travel list

+ + + + + + + + + + {tableItems.map((item, idx) => { + return ( + + + + + + + ) + })} + +
CountryCityDate ArrivedDays spent
{item.countryName}{item.cityName}{item.date}{item.daysSpent}
+ ); +} + +export default App; diff --git a/src/index.css b/src/index.css new file mode 100644 index 000000000..bd19d1012 --- /dev/null +++ b/src/index.css @@ -0,0 +1,16 @@ +*, +::after, +::before { + box-sizing: border-box; +} + +body { + background-color: #212121; + color: #fff; + font-family: monospace, serif; + letter-spacing: 0.05em; +} + +h1 { + font-size: 23px; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..ddb71d904 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + +); diff --git a/static/css/main.d44f8cd0.css b/static/css/main.d44f8cd0.css new file mode 100644 index 000000000..2187a25f2 --- /dev/null +++ b/static/css/main.d44f8cd0.css @@ -0,0 +1,2 @@ +*,:after,:before{box-sizing:border-box}body{background-color:#212121;color:#fff;font-family:monospace,serif;letter-spacing:.05em}h1{font-size:23px}.main{font-size:40px;text-align:center}.form{margin:0 auto;padding:64px 15px 24px;width:300px}.form .control{margin:0 0 24px}.form .control input{background:transparent;border:0;color:#fff;font-family:monospace,serif;font-size:16px;letter-spacing:.05em;padding:14px 16px;width:100%}.form .btn,.form .control input:focus,.form .control input:hover{border:0;outline:none}.form .btn{background:transparent;color:#fff;display:block;font-family:monospace;font-size:16px;font-weight:700;letter-spacing:.1em;padding:14px 16px;width:100%}.block-cube{position:relative}.block-cube .bg-top{background:#020024;background:linear-gradient(90deg,#020024,#340979 37%,#00d4ff 94%);bottom:100%;height:10px;left:5px;margin:0;position:absolute;right:-5px;-webkit-transform:skew(-45deg,0);transform:skew(-45deg,0)}.block-cube .bg-top .bg-inner{bottom:0}.block-cube .bg{background:#020024;background:linear-gradient(90deg,#020024,#340979 37%,#00d4ff 94%);bottom:0;left:0;position:absolute;right:0;top:0}.block-cube .bg-right{background:#020024;background:#00d4ff;bottom:5px;left:100%;position:absolute;top:-5px;-webkit-transform:skew(0,-45deg);transform:skew(0,-45deg);width:10px;z-index:0}.block-cube .bg-right .bg-inner{left:0}.block-cube .bg .bg-inner{transition:all .2s ease-in-out}.block-cube .bg-inner{background:#212121;bottom:2px;left:2px;position:absolute;right:2px;top:2px}.block-cube .text,.block-cube.block-input input{position:relative;z-index:2}.block-cube.block-input input:focus~.bg-inner .bg-inner,.block-cube.block-input input:focus~.bg-right .bg-inner,.block-cube.block-input input:focus~.bg-top .bg-inner{background:hsla(0,0%,100%,.5);top:100%}.block-cube.block-input .bg,.block-cube.block-input .bg-right,.block-cube.block-input .bg-top{background:hsla(0,0%,100%,.5);transition:background .2s ease-in-out}.block-cube.block-input .bg-right .bg-inner,.block-cube.block-input .bg-top .bg-inner{transition:all .2s ease-in-out}.block-cube.block-input:focus .bg,.block-cube.block-input:focus .bg-right,.block-cube.block-input:focus .bg-top,.block-cube.block-input:hover .bg,.block-cube.block-input:hover .bg-right,.block-cube.block-input:hover .bg-top{background:hsla(0,0%,100%,.8)}.block-cube.block-cube-hover:focus .bg .bg-inner,.block-cube.block-cube-hover:hover .bg .bg-inner{top:100%}table{border:3px solid #fff;font-size:20px;margin-bottom:50px;margin-left:auto;margin-right:auto;width:75%}#tlist,table{text-align:center}#tlist{font-size:30px} +/*# sourceMappingURL=main.d44f8cd0.css.map*/ \ No newline at end of file diff --git a/static/css/main.d44f8cd0.css.map b/static/css/main.d44f8cd0.css.map new file mode 100644 index 000000000..76bc31343 --- /dev/null +++ b/static/css/main.d44f8cd0.css.map @@ -0,0 +1 @@ +{"version":3,"file":"static/css/main.d44f8cd0.css","mappings":"AAAA,iBAGE,qBACF,CAEA,KACE,wBAAyB,CACzB,UAAW,CACX,2BAA6B,CAC7B,oBACF,CAEA,GACE,cACF,CCfA,MACE,cAAe,CACf,iBACF,CAEA,MAGE,aAAc,CADd,sBAAuB,CADvB,WAGF,CAEA,eACE,eACF,CAEA,qBAIE,sBAAuB,CADvB,QAAS,CAET,UAAW,CACX,2BAA6B,CAE7B,cAAe,CADf,oBAAsB,CALtB,iBAAkB,CADlB,UAQF,CAQA,iEAHE,QAAS,CADT,YAgBF,CAZA,WAIE,sBAAuB,CAGvB,UAAW,CALX,aAAc,CAQd,qBAAsB,CACtB,cAAe,CAFf,eAAiB,CADjB,mBAAqB,CALrB,iBAAkB,CAFlB,UAWF,CAEA,YACE,iBACF,CAEA,oBAGE,kBAAmB,CACnB,iEAAwE,CACxE,WAAY,CAHZ,WAAY,CAIZ,QAAS,CAGT,QAAS,CART,iBAAkB,CAMlB,UAAW,CACX,gCAA0B,CAA1B,wBAEF,CAEA,8BACE,QACF,CAEA,gBAME,kBAAmB,CACnB,iEAAwE,CAFxE,QAAS,CAHT,MAAO,CADP,iBAAkB,CAGlB,OAAQ,CADR,KAKF,CAEA,sBAEE,kBAAmB,CACnB,kBAAmB,CAGnB,UAAW,CAEX,SAAU,CAPV,iBAAkB,CAGlB,QAAS,CAKT,gCAA0B,CAA1B,wBAA0B,CAF1B,UAAW,CAFX,SAKF,CAEA,gCACE,MACF,CAEA,0BACE,8BACF,CAEA,sBACE,kBAAmB,CAKnB,UAAW,CAHX,QAAS,CADT,iBAAkB,CAGlB,SAAU,CADV,OAGF,CAOA,gDACE,iBAAkB,CAClB,SACF,CAEA,sKAIE,6BAAoC,CADpC,QAEF,CAEA,8FAGE,6BAAoC,CACpC,qCACF,CAEA,sFAEE,8BACF,CAEA,gOAME,6BACF,CAEA,kGAEE,QACF,CAEA,MAEE,qBAAyB,CACzB,cAAe,CAGf,kBAAmB,CAFnB,gBAAiB,CACjB,iBAAkB,CAElB,SACF,CAEA,aATE,iBAYF,CAHA,OAEE,cACF","sources":["index.css","App.css"],"sourcesContent":["*,\n::after,\n::before {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #212121;\n color: #fff;\n font-family: monospace, serif;\n letter-spacing: 0.05em;\n}\n\nh1 {\n font-size: 23px;\n}",".main {\n font-size: 40px;\n text-align: center;\n}\n\n.form {\n width: 300px;\n padding: 64px 15px 24px;\n margin: 0 auto;\n}\n\n.form .control {\n margin: 0 0 24px;\n}\n\n.form .control input {\n width: 100%;\n padding: 14px 16px;\n border: 0;\n background: transparent;\n color: #fff;\n font-family: monospace, serif;\n letter-spacing: 0.05em;\n font-size: 16px;\n}\n\n.form .control input:hover,\n.form .control input:focus {\n outline: none;\n border: 0;\n}\n\n.form .btn {\n width: 100%;\n display: block;\n padding: 14px 16px;\n background: transparent;\n outline: none;\n border: 0;\n color: #fff;\n letter-spacing: 0.1em;\n font-weight: bold;\n font-family: monospace;\n font-size: 16px;\n}\n\n.block-cube {\n position: relative;\n}\n\n.block-cube .bg-top {\n position: absolute;\n height: 10px;\n background: #020024;\n background: linear-gradient(90deg, #020024 0%, #340979 37%, #00d4ff 94%);\n bottom: 100%;\n left: 5px;\n right: -5px;\n transform: skew(-45deg, 0);\n margin: 0;\n}\n\n.block-cube .bg-top .bg-inner {\n bottom: 0;\n}\n\n.block-cube .bg {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: #020024;\n background: linear-gradient(90deg, #020024 0%, #340979 37%, #00d4ff 94%);\n}\n\n.block-cube .bg-right {\n position: absolute;\n background: #020024;\n background: #00d4ff;\n top: -5px;\n z-index: 0;\n bottom: 5px;\n width: 10px;\n left: 100%;\n transform: skew(0, -45deg);\n}\n\n.block-cube .bg-right .bg-inner {\n left: 0;\n}\n\n.block-cube .bg .bg-inner {\n transition: all 0.2s ease-in-out;\n}\n\n.block-cube .bg-inner {\n background: #212121;\n position: absolute;\n left: 2px;\n top: 2px;\n right: 2px;\n bottom: 2px;\n}\n\n.block-cube .text {\n position: relative;\n z-index: 2;\n}\n\n.block-cube.block-input input {\n position: relative;\n z-index: 2;\n}\n\n.block-cube.block-input input:focus~.bg-right .bg-inner,\n.block-cube.block-input input:focus~.bg-top .bg-inner,\n.block-cube.block-input input:focus~.bg-inner .bg-inner {\n top: 100%;\n background: rgba(255, 255, 255, 0.5);\n}\n\n.block-cube.block-input .bg-top,\n.block-cube.block-input .bg-right,\n.block-cube.block-input .bg {\n background: rgba(255, 255, 255, 0.5);\n transition: background 0.2s ease-in-out;\n}\n\n.block-cube.block-input .bg-right .bg-inner,\n.block-cube.block-input .bg-top .bg-inner {\n transition: all 0.2s ease-in-out;\n}\n\n.block-cube.block-input:focus .bg-top,\n.block-cube.block-input:focus .bg-right,\n.block-cube.block-input:focus .bg,\n.block-cube.block-input:hover .bg-top,\n.block-cube.block-input:hover .bg-right,\n.block-cube.block-input:hover .bg {\n background: rgba(255, 255, 255, 0.8);\n}\n\n.block-cube.block-cube-hover:focus .bg .bg-inner,\n.block-cube.block-cube-hover:hover .bg .bg-inner {\n top: 100%;\n}\n\ntable {\n text-align: center;\n border: 3px solid #ffffff;\n font-size: 20px;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 50px;\n width: 75%;\n}\n\n#tlist {\n text-align: center;\n font-size: 30px;\n}"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.6bd76f1a.js b/static/js/main.6bd76f1a.js new file mode 100644 index 000000000..5b8b373d2 --- /dev/null +++ b/static/js/main.6bd76f1a.js @@ -0,0 +1,3 @@ +/*! For license information please see main.6bd76f1a.js.LICENSE.txt */ +!function(){"use strict";var e={463:function(e,n,t){var r=t(791),l=t(296);function a(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t