added website skeleton and gitignore

kushalv238 · Mar 30, 2023 · 962e09e · 962e09e
1 parent ccb58ce
commit 962e09e
Show file tree

Hide file tree

Showing 22 changed files with 17,641 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules
+/build
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "cdac",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^13.4.0",
+ "@testing-library/user-event": "^13.5.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.10.0",
+ "react-scripts": "5.0.1",
+ "web-vitals": "^2.1.4"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <meta
+ name="description"
+ content="Web site created using create-react-app"
+ />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <!--
+ manifest.json provides metadata used when your web app is installed on a
+ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+ -->
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <!--
+ Notice the use of %PUBLIC_URL% in the tags above.
+ It will be replaced with the URL of the `public` folder during the build.
+ Only files inside the `public` folder can be referenced from the HTML.
+
+ Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+ work correctly both with client-side routing and a non-root public URL.
+ Learn how to configure a non-root public URL by running `npm run build`.
+ -->
+ <title>React App</title>
+ </head>
+ <body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
+ <div id="root"></div>
+ <style>
+ #root {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+ </style>
+ </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/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/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,22 @@
+import { Routes as Switch, Route } from 'react-router-dom';
+
+import { Header, Home, Quiz, Footer } from './components'
+import './stylesheets/app.css';
+
+const App = () => {
+ return (
+ <>
+ <Header />
+ <div id="header-holder"></div>
+ <main>
+ <Switch>
+ <Route exact path='/' Component={ Home } />
+ <Route exact path='/quiz' Component={ Quiz } />
+ </Switch>
+ </main>
+ {/* <Footer /> */}
+ </>
+ )
+}
+
+export default App
diff --git a/src/components/Header_Footer/Footer.jsx b/src/components/Header_Footer/Footer.jsx
@@ -0,0 +1,9 @@
+import './../../stylesheets/footer.css';
+
+const Footer = () => {
+ return (
+ <footer>Footer</footer>
+ )
+}
+
+export default Footer
diff --git a/src/components/Header_Footer/Header.jsx b/src/components/Header_Footer/Header.jsx
@@ -0,0 +1,9 @@
+import './../../stylesheets/header.css';
+
+const Header = () => {
+ return (
+ <header>Header</header>
+ )
+}
+
+export default Header
diff --git a/src/components/home/GraphArea.jsx b/src/components/home/GraphArea.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const GraphArea = () => {
+ return (
+ <div id='graph-area'>GraphArea</div>
+ )
+}
+
+export default GraphArea
diff --git a/src/components/home/Home.jsx b/src/components/home/Home.jsx
@@ -0,0 +1,15 @@
+import SidePanel from './SidePanel';
+import GraphArea from './GraphArea';
+
+import './../../stylesheets/home.css';
+
+const Home = () => {
+ return (
+ <div id='home'>
+ <SidePanel />
+ <GraphArea />
+ </div>
+ )
+}
+
+export default Home
diff --git a/src/components/home/SidePanel.jsx b/src/components/home/SidePanel.jsx
@@ -0,0 +1,7 @@
+const SidePanel = () => {
+ return (
+ <div id="side-panel">SidePanel</div>
+ )
+}
+
+export default SidePanel
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,4 @@
+export { default as Header } from './Header_Footer/Header';
+export { default as Home } from './home/Home';
+export { default as Quiz } from './quiz/Quiz';
+export { default as Footer } from './Header_Footer/Footer';
diff --git a/src/components/quiz/Quiz.jsx b/src/components/quiz/Quiz.jsx
@@ -0,0 +1,7 @@
+const Quiz = () => {
+ return (
+ <div>Quiz</div>
+ )
+}
+
+export default Quiz
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client'
+
+import { BrowserRouter } from 'react-router-dom'
+
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(
+ <React.StrictMode>
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ </React.StrictMode>
+);
diff --git a/src/stylesheets/app.css b/src/stylesheets/app.css
@@ -0,0 +1,41 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ outline: 0;
+
+ box-sizing: inherit;
+}
+
+:root {
+ --clr-primary: white;
+ --clr-secondary: black;
+}
+
+html {
+ box-sizing: border-box;
+}
+
+a {
+ color: dodgerblue;
+ text-decoration: none;
+
+ font-style: italic;
+}
+
+main {
+ display: flex;
+ flex-grow: 1;
+}
+
+#header-holder {
+ height: 4rem;
+}
+
+/* utility classes */
+
+.hidden, .hidden > * {
+ display: none !important;
+}
+
diff --git a/src/stylesheets/footer.css b/src/stylesheets/footer.css
@@ -0,0 +1,3 @@
+footer {
+ background-color: green;
+}
diff --git a/src/stylesheets/header.css b/src/stylesheets/header.css
@@ -0,0 +1,22 @@
+header {
+ background-color: red;
+
+ width: 100% !important;
+ height: 4rem;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ transition: 0.6s;
+
+ padding: 0.6rem 1.5rem;
+
+ font-weight: 600;
+
+ /* z-index: 10; */
+}
diff --git a/src/stylesheets/home.css b/src/stylesheets/home.css
@@ -0,0 +1,44 @@
+#home {
+ background-color: blue;
+
+ display: flex;
+ width: 100%;
+}
+
+#side-panel {
+ width: 25%;
+ background-color: pink;
+}
+
+#graph-area {
+ width: 100%;
+ background-color: cyan;
+}
+
+@media only screen and (max-width: 1200px) {
+ #side-panel {
+ width: 40%;
+ }
+}
+
+@media only screen and (max-width: 900px) {
+ #side-panel {
+ width: 50%;
+ }
+}
+
+@media only screen and (max-width: 700px) {
+ #home {
+ flex-wrap: wrap;
+ }
+
+ #side-panel {
+ position: fixed;
+ bottom: 0;
+
+ width: 100%;
+ height: 20rem;
+
+ order: 2;
+ }
+}