a4-ananya-gopalan

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+web_modules
+.firebase
+.firebaserc
+.glitchdotcom.json
+build

.glitch-assets

@@ -0,0 +1,2 @@
+{"name":"illustration.svg","date":"2021-04-12T03:02:59.405Z","url":"https://cdn.glitch.com/2f80c958-3bc4-4f47-8e97-6a5c8684ac2c%2Fillustration.svg","type":"image/svg+xml","size":23220,"imageWidth":541,"imageHeight":457,"thumbnail":"https://cdn.glitch.com/2f80c958-3bc4-4f47-8e97-6a5c8684ac2c%2Fthumbnails%2Fillustration.svg","thumbnailWidth":330,"thumbnailHeight":279,"uuid":"Lw1QEsxPiPIxc4fR"}
+{"name":"books.png","date":"2022-10-04T02:19:05.241Z","url":"https://cdn.glitch.global/853df0d5-2f4b-473e-8b63-34f080880c96/books.png","type":"image/png","size":55795,"imageWidth":1965,"imageHeight":912,"thumbnail":"https://cdn.glitch.global/853df0d5-2f4b-473e-8b63-34f080880c96/thumbnails%2Fbooks.png","thumbnailWidth":330,"thumbnailHeight":154,"uuid":"dRHCUsBKmq9W3BU1"}

LICENSE

@@ -0,0 +1,197 @@
+The LICENSE file for any project gives credit to the creator/author of the 
+project, copyright information for the project, and the legal terms under 
+which it's being shared. In other words, this is us using an MIT license to
+say "we wrote this and you can do whatever you want with it."
+
+******************************************************************************
+~glitch-hello-react
+******************************************************************************
+MIT License
+
+Copyright (c) 2021, Glitch, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+
+******************************************************************************
+
+THIRD-PARTY SOFTWARE
+This is all the software we used to build this starter project. All of these
+licenses are compatible with the license above. We've included links so you
+can learn more if you want. 
+
+1. react: React is a JavaScript library for building user interfaces.
+2. react-spring: A spring-physics based animation library.
+3. vite: Vite is a new breed of frontend build tool.
+4. @vitejs/plugin-react: An all in one Vite plugin for React.
+5. wouter: wouter is a tiny router for modern React and Preact apps.
+6. HK Grotesk: The font we're using. 
+
+
+******************************************************************************
+1. react
+URL: https://reactjs.org/
+     https://github.com/facebook/react
+******************************************************************************
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, react
+******************************************************************************
+
+
+******************************************************************************
+2. react-spring
+URL: https://www.react-spring.io/
+     https://github.com/pmndrs/react-spring
+******************************************************************************
+MIT License
+
+Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, react-spring
+******************************************************************************
+
+
+******************************************************************************
+3. vite
+URL: https://vitejs.dev/
+     https://github.com/vitejs/vite
+******************************************************************************
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, vite
+******************************************************************************
+
+
+******************************************************************************
+4. @vitejs/plugin-react
+URL: https://github.com/vitejs/vite
+******************************************************************************
+MIT License
+
+Copyright (c) 2020-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+******************************************************************************
+END, @vitejs/plugin-react
+******************************************************************************
+
+
+******************************************************************************
+5. wouter
+URL: https://github.com/molefrog/wouter
+     https://www.npmjs.com/package/wouter
+******************************************************************************
+ISC License
+
+wouter is published to npm (https://www.npmjs.com/package/wouter) under an
+ISC license. No additional copyright information is present on the project's
+github or npm pages as of April 11, 2021.
+******************************************************************************
+END, wouter
+******************************************************************************
+
+
+******************************************************************************
+6. HK Grotesk
+URL: https://hanken.co/products/hk-grotesk
+******************************************************************************
+HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL
+license. Full license text can be found at:
+
+https://hanken.co/pages/web-fonts-eula
+******************************************************************************
+END, HK Grotesk
+******************************************************************************

README.md

@@ -1,33 +1,4 @@
-Assignment 4 - Components
-===
+Implemented React to a2 to complete a4 components. 
 
-Due: October 4th, by 11:59 AM.
+https://a4components-ananya112.glitch.me
 
-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.
-
-[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)  
-
-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.

TODO.md

@@ -0,0 +1,38 @@
+# TODO 🚧
+
+Your new site is all yours so it doesn't matter if you break it! Try editing the code.
+
+Let's add the wiggle function to other elements in the site–you'll see comments in the code with `TODO` in them for each step.
+
+In `pages/about.jsx`, add the imports at the top:
+
+```js
+import { useWiggle } from "../hooks/wiggle";
+import { animated } from "react-spring";
+```
+
+Bring the wiggle style and trigger function in before the `return` statement, this time with slightly different parameters:
+
+```js
+const [style, trigger] = useWiggle({ x: 50, rotation: 1, scale: 1.2 });
+```
+
+Replace the header element to use `animated` and apply the wiggle style:
+
+```js
+<animated.h1 className="title" style={style}>
+ About this site
+</animated.h1>
+```
+
+Let's make the effect happen when the user hovers over the first paragraph element by replacing its opening tag:
+
+```js
+<p onMouseEnter={trigger}>
+```
+
+Hover over the paragraph to see the effect on the About page header!
+
+## Keep going! 🚀
+
+Try experimenting with the `useWiggle` properties for different effects!

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+    <!-- This is the main template for the site, with index.jsx building the content and behavior -->
+
+    <title>Hello React!</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="https://glitch.com/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "glitch-hello-react",
+  "version": "0.0.5",
+  "description": "A simple React single page app, built with Vite and React.",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-spring": "^9.4.5",
+    "wouter": "^2.7.4",
+    "react-helmet-async": "^1.3.0",
+    "@vitejs/plugin-react": "^1.3.2"
+  },
+  "devDependencies": {
+    "vite": "^2.4.4"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead"
+  ],
+  "engines": {
+    "node": "12.x"
+  },
+  "repository": {
+    "url": "https://glitch.com/edit/#!/glitch-hello-react"
+  },
+  "glitch": {
+    "projectType": "generated_static"
+  }
+}