├── .gitignore ├── CODEOWNERS ├── README.md ├── challenge ├── .gitignore ├── package.json ├── pnpm-lock.yaml ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── movie.html │ ├── robots.txt │ ├── script.js │ └── styles.css ├── src │ ├── App.jsx │ ├── NumberLogger.jsx │ ├── components │ │ ├── Ads │ │ │ ├── SideBar.css │ │ │ └── images │ │ │ │ ├── Ads(1).jpg │ │ │ │ ├── Ads(2).jpg │ │ │ │ ├── Ads(3).jpg │ │ │ │ ├── Ads(4).jpg │ │ │ │ └── Ads(5).jpg │ │ ├── Contractions.jsx │ │ ├── Counter.jsx │ │ ├── CovidCount.jsx │ │ ├── ElonMusk.jsx │ │ ├── ElonMuskAnimation.css │ │ ├── FriesWithSauce.jsx │ │ ├── FunFact.jsx │ │ ├── GetName.jsx │ │ ├── Gif.jsx │ │ ├── JojoStand.jsx │ │ ├── Jokes.jsx │ │ ├── Kanye.jsx │ │ ├── KrabbyPatty.jsx │ │ ├── Maguire.jsx │ │ ├── Mando.jsx │ │ ├── MemeImage.jsx │ │ ├── Memes │ │ │ ├── 1.png │ │ │ ├── 10.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ └── 9.png │ │ ├── MonthAndYear.jsx │ │ ├── MoviePage.jsx │ │ ├── Navbar.jsx │ │ ├── News.jsx │ │ ├── Pages │ │ │ ├── About.jsx │ │ │ ├── Contact.jsx │ │ │ ├── FunFacts.jsx │ │ │ ├── Home.jsx │ │ │ ├── Memes.jsx │ │ │ ├── Sponsors.jsx │ │ │ └── profile.jsx │ │ ├── PartyParrot.jsx │ │ ├── Pokesearch.jsx │ │ ├── RandomAds.jsx │ │ ├── RandomColorButton.jsx │ │ ├── RandomEmail.jsx │ │ ├── RandomImage.jsx │ │ ├── RandomPhoneNumber.jsx │ │ ├── RandomText.jsx │ │ ├── RatingBar.jsx │ │ ├── SponsorForm.jsx │ │ ├── SponsorFormButton.jsx │ │ ├── Table.jsx │ │ ├── chat │ │ │ ├── ChatBox.jsx │ │ │ ├── ChatBox.module.css │ │ │ ├── ChatMessage.jsx │ │ │ └── ChatMessage.module.css │ │ ├── images │ │ │ ├── ElonMusk.png │ │ │ ├── HackRUlogo.jpg │ │ │ ├── KrabbyPatty.png │ │ │ ├── Maguire.png │ │ │ ├── Party_Parrot.gif │ │ │ ├── Troll.png │ │ │ ├── dislike.png │ │ │ ├── fries.jpg │ │ │ ├── like.png │ │ │ └── mando.jpg │ │ ├── jokesData.json │ │ ├── memesStyles.css │ │ └── newsStyles.css │ ├── index.js │ ├── mandalorian │ │ ├── BabyYoda.css │ │ ├── BabyYoda.jsx │ │ ├── baby-yoda.jpg │ │ └── thug-life-glasses.png │ ├── serviceWorker.js │ ├── strings.json │ ├── tailwind.css │ └── test │ │ └── sum.test.js └── tailwind.config.js └── package-lock.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Some important stuff 2 | # Most files are covered by `challenge/.gitignore` 3 | *.log 4 | 5 | # Slightly less useful gitignores 6 | 7 | # In case anyone was having any ideas 8 | *.html.exe 9 | *.css.exe 10 | *.js.exe 11 | *.html.sh 12 | *.css.sh 13 | *.js.sh 14 | 15 | # In case anyone had worse plans for this project 16 | *.php 17 | 18 | # We better not need this 19 | *.pyc 20 | /__pycache__ 21 | 22 | # Why not add some Java to this repo? 23 | *.class 24 | .gradle 25 | 26 | # Just in case 27 | *.notjs 28 | *.reallynotjs 29 | badmeme.gif 30 | badmeme.gif.exe 31 | 32 | # Api Key 33 | .env -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @shivanmodha @lucentfong @sahej172002 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome: HackRU Reactment Challenge 2 | Welcome to the HackRU Reactment Challenge, RND's community driven interview sandbox. Regardless of whether or not a recruitment task has been emailed to you, feel free to clone this repository and have fun! Everyone is welcome! 3 | > All our dreams can come true, if we have the courage to pursue them -**Walt Disney** 4 | 5 | **If you have any questions, don't hesitate to reach out to [us](mailto:rnd@hackru.org). We want to help you! We want you to succeed!** 6 | 7 | ## Technologies 8 | Below is a list of the main technologies Reactment uses: 9 | 10 | - Node.js (npm) 11 | - React 12 | 13 | Feel free to research and gain background knowledge in any of these technologies! Once again, don't hesitate to ask us any questions. Understanding different technologies and how they interact is the first step to success. 14 | 15 | ## What if I don't know React? 16 | This is completely fine! We 100% expect this to be the case for many of you! React can be a beast to starters! But here's a little secret: we didn't choose React for this challenge because we expect everyone to know or learn NodeJS and React, but rather because we needed some language and React was simply the hot choice! Know that part of this task tests how well you operate with and *react* to different technologies. 17 | 18 | ## Getting Started 19 | First things first, get rid of those nervous jitters! Take this as any regular programming task that you have to do either for work, school, or simple fun. Remember that you are contributing to the open source community! No mistake is detrimental here! So make mistakes, but most importantly, have fun doing so! See the steps below: 20 | 21 | ### 0. Self-assign a task 22 | Peruse reactment issues [here](https://github.com/HackRU/Reactment/issues). Each issue has an assigned difficulty level (see [below](#task-difficulty-levels) for level definitions). Once you are ready, _self-assign any unassigned and open task_. Once you self assign a task, you __own__ the task (this ensures no one else accidently works on the same thing as you). You can also feel free to come up with your own ideas open a new issue yourself. 23 | 24 | ### 1. Fork and clone! 25 | Once your have an issue self-assigned, you can now officially get started. Next step is forking. Via Github, [fork](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) the repository to your personal account. Once you have it forked, clone it: 26 | ```bash 27 | git clone https://github.com//Reactment.git 28 | cd Reactment 29 | ``` 30 | 31 | ### 2. Install node dependencies 32 | At this point, you should have a copy of the code available on your local machine. Time to get into the weeds with react! Next step is to install node dependencies: 33 | ```bash 34 | cd challenge 35 | npm install 36 | ``` 37 | 38 | ### 3. Start the development server 39 | You have everything available to start programming! Start the development server: 40 | ```bash 41 | npm start 42 | ``` 43 | At this point, your web browser should automatically open up, and you should be able to see this website. 44 | 45 | ### 4. Poke around the code 46 | Open the code in your favorite IDE. Feel free to poke around the code and make changes. Break the website a couple of times to learn what is actually happening! Once you are comfortable with what is going on, implement the feature or perform the task specified in the issue you self-assigned in step 0. 47 | 48 | ### 5. Submit 49 | Once you are done, push your code to github 50 | 51 | ```bash 52 | git commit -m 53 | git push origin 54 | ``` 55 | 56 | Put in a pull request from your [forked](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) instance to our main repository under the hackru organization. Be sure to follow the standard guidelines for pull requests. 57 | -------------------------------------------------------------------------------- /challenge/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .eslintcache 26 | 27 | package-lock.json 28 | 29 | # Api Key 30 | .env -------------------------------------------------------------------------------- /challenge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactment", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.5", 7 | "@emotion/styled": "^11.10.5", 8 | "@material-ui/core": "^4.11.2", 9 | "@material-ui/icons": "^4.11.3", 10 | "@mui/material": "^5.11.4", 11 | "@testing-library/jest-dom": "^5.16.5", 12 | "@testing-library/react": "^13.4.0", 13 | "@testing-library/user-event": "^14.4.3", 14 | "@types/react": "^18.0.26", 15 | "ajv": "^8.17.1", 16 | "ajv-keywords": "^5.1.0", 17 | "axios": "^1.2.3", 18 | "chokidar": "^3.5.3", 19 | "express": "^4.18.2", 20 | "local-storage": "^2.0.0", 21 | "prop-types": "^15.8.1", 22 | "react": "^18.0.0", 23 | "react-dom": "^18.0.0", 24 | "react-navigation": "^4.4.4", 25 | "react-reveal": "^1.2.2", 26 | "react-router-dom": "^6.6.2", 27 | "react-scripts": "^5.0.1", 28 | "react-sortable-hoc": "^2.0.0" 29 | }, 30 | "scripts": { 31 | "start": "react-scripts start", 32 | "build": "react-scripts build", 33 | "test": "react-scripts test --watchAll=false", 34 | "eject": "react-scripts eject" 35 | }, 36 | "eslintConfig": { 37 | "extends": "react-app" 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "autoprefixer": "^10.4.20", 53 | "postcss": "^8.4.45", 54 | "tailwindcss": "^3.4.10", 55 | "dotenv": "^16.4.5" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /challenge/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/public/favicon.ico -------------------------------------------------------------------------------- /challenge/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | HackRU Reactment Sandbox 14 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /challenge/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Reactment", 3 | "name": "HackRU Reactment Challenge", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } -------------------------------------------------------------------------------- /challenge/public/movie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Movie Page

9 | Titanic 10 |
11 | Titanic 3D Re-release Trailer 12 | 13 | 14 | -------------------------------------------------------------------------------- /challenge/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /challenge/public/script.js: -------------------------------------------------------------------------------- 1 | function changeColor(){ 2 | document.getElementById("myButton").style.backgroundColor= 'rgb(' + Math.round(Math.random()*255)+ ',' 3 | + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ')' 4 | 5 | } 6 | -------------------------------------------------------------------------------- /challenge/public/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #FA9884; 3 | margin: 0; 4 | padding: 0; 5 | width: "100%"; 6 | height: "100%"; 7 | } 8 | 9 | 10 | button{ 11 | background-color: #04AA6D; 12 | border: none; 13 | color: white; 14 | padding: 20px; 15 | text-align: center; 16 | text-decoration: none; 17 | display: inline-block; 18 | font-size: 16px; 19 | margin: 4px 2px; 20 | } 21 | 22 | .video-container{ 23 | margin-left: 550px; 24 | margin-top: 50px; 25 | margin-bottom: 50px; 26 | } 27 | 28 | .text-container{ 29 | margin-left: 200px; 30 | } 31 | 32 | div.fixed { 33 | position: fixed; 34 | top: 0; 35 | width : 100% 36 | } 37 | 38 | ul { 39 | list-style: none; 40 | margin-top: 0px; 41 | width: 100%; 42 | background-color: #C85151; 43 | } 44 | 45 | ul li { 46 | display: inline-block; 47 | padding: 1.25rem 3rem; 48 | cursor: pointer; 49 | } 50 | 51 | ul li:hover, 52 | ul li.active { 53 | background-color:#D8784C ; 54 | } 55 | 56 | .Signs, td, th { 57 | border: 1px solid black; 58 | } 59 | 60 | .Signs { 61 | margin-left: auto; 62 | margin-right: auto; 63 | } 64 | 65 | .scale-down-center { 66 | -webkit-animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 67 | animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; 68 | } 69 | 70 | @-webkit-keyframes scale-down-center { 71 | 0% { 72 | -webkit-transform: scale(1); 73 | transform: scale(1); 74 | } 75 | 100% { 76 | -webkit-transform: scale(0); 77 | transform: scale(0); 78 | } 79 | } 80 | @keyframes scale-down-center { 81 | 0% { 82 | -webkit-transform: scale(1); 83 | transform: scale(1); 84 | } 85 | 100% { 86 | -webkit-transform: scale(0); 87 | transform: scale(0); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /challenge/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Navbar from "./components/Navbar"; 3 | import Home from "./components/Pages/Home"; 4 | import Sponsors from "./components/Pages/Sponsors"; 5 | import About from "./components/Pages/About"; 6 | import Contact from "./components/Pages/Contact"; 7 | import FunFacts from "./components/Pages/FunFacts"; 8 | import Memes from "./components/Pages/Memes"; 9 | import Profile from "./components/Pages/profile"; 10 | import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; 11 | import green from "@material-ui/core/colors/green"; 12 | import yellow from "@material-ui/core/colors/yellow"; 13 | 14 | const theme = createMuiTheme({ 15 | palette: { 16 | primary: green, 17 | secondary: yellow, 18 | }, 19 | }); 20 | 21 | const page_index_mapper = (page_name) => { 22 | const mapping = { 23 | home: 0, 24 | sponsors: 1, 25 | about: 2, 26 | "contact us": 3, 27 | "fun facts": 4, 28 | memes: 5, 29 | }; 30 | return mapping[page_name] === undefined ? undefined : mapping[page_name]; 31 | }; 32 | 33 | class App extends Component { 34 | state = {}; 35 | constructor(props) { 36 | super(props); 37 | this.state = { currentPage: 0, currentPageName: "Home" }; 38 | this.handlePageChange = this.handlePageChange.bind(this); 39 | } 40 | 41 | componentDidMount() { 42 | const url_regex = RegExp("/([^/]+)?"); 43 | const location = window.location.pathname; 44 | const location_match = location.match(url_regex); 45 | const curPageName = location_match[1] 46 | ? location_match[1].replace(/_/, " ") 47 | : "home"; 48 | const curPageNo = page_index_mapper(curPageName); 49 | this.setState({ 50 | currentPage: curPageNo ? curPageNo : 5, 51 | currentPageName: curPageName, 52 | }); 53 | } 54 | 55 | handlePageChange(index, indexName) { 56 | this.setState({ currentPage: index, currentPageName: indexName }); 57 | window.history.pushState( 58 | null, 59 | null, 60 | `/${indexName.replace(/\s+/, "_").toLowerCase()}` 61 | ); 62 | } 63 | 64 | Router(param) { 65 | const page_name = param.PageName?.toLowerCase().replace(/_/, " "); 66 | switch (page_name) { 67 | case "home": 68 | return ; 69 | case "sponsors": 70 | return ; 71 | case "about": 72 | return ; 73 | case "contact us": 74 | return ; 75 | case "fun facts": 76 | return ; 77 | case "memes": 78 | return ; 79 | case "person": 80 | return ; 81 | default: 82 | return
An error occurred.
; 83 | } 84 | } 85 | 86 | render() { 87 | console.log("User has selected page ", this.state.currentPageName); 88 | 89 | 90 | const backgroundStyle = { 91 | background: 'linear-gradient(90deg, #FFD700, #FF69B4, #8A2BE2)', // Horizontal Yellowish-Pinkish-Darkish Gradient 92 | backgroundSize: '200% 200%', 93 | animation: 'gradientAnimation 10s ease infinite', 94 | minHeight: '100vh', 95 | padding: '20px', 96 | color: '#000', 97 | }; 98 | 99 | 100 | 101 | 102 | return ( 103 | 104 |
105 | 111 | 115 |
116 | 117 | ); 118 | } 119 | } 120 | 121 | const sum = (list) => { 122 | let result = 0; 123 | for (let i = 0; i < list.length; i++) { 124 | result += list[i]; 125 | } 126 | return result; 127 | }; 128 | 129 | export default App; 130 | export { sum }; 131 | -------------------------------------------------------------------------------- /challenge/src/NumberLogger.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component, createRef } from "react"; 2 | import TextField from '@material-ui/core/TextField'; 3 | import Button from '@material-ui/core/Button'; 4 | 5 | class NumberLogger extends Component { 6 | // state handles both the current input in the number box as well as 7 | // all previous inputs 8 | state = {inputs: [], currentInput: createRef()} 9 | 10 | handleClick = () => { 11 | if (this.state.inputs.length < 10){ 12 | // updates input state to include both old + new inputs 13 | this.setState({ 14 | inputs: [ 15 | ...this.state.inputs, 16 | parseInt(this.state.currentInput.current.value) 17 | ] 18 | }) 19 | } else { 20 | this.setState({ 21 | inputs: [ 22 | "Cleared log", 23 | parseInt(this.state.currentInput.current.value) 24 | ] 25 | }) 26 | } 27 | 28 | } 29 | 30 | render() { 31 | return ( 32 | <> 33 | 34 | 35 | {this.state.inputs.map(i => ( 36 |
  • {i}
    • 37 | ))} 38 | 39 | ); 40 | } 41 | } 42 | 43 | export default NumberLogger; 44 | -------------------------------------------------------------------------------- /challenge/src/components/Ads/SideBar.css: -------------------------------------------------------------------------------- 1 | .side-bar { 2 | height: 100% !important; 3 | display: flex; 4 | flex-direction: column; 5 | border-right: 1px solid; 6 | border-radius: 0; 7 | border-color: rgba(64, 194, 133, 0.693); 8 | background-color: rgb(255, 255, 255); 9 | transition: 0.8s ease; 10 | } 11 | -------------------------------------------------------------------------------- /challenge/src/components/Ads/images/Ads(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Ads/images/Ads(1).jpg -------------------------------------------------------------------------------- /challenge/src/components/Ads/images/Ads(2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Ads/images/Ads(2).jpg -------------------------------------------------------------------------------- /challenge/src/components/Ads/images/Ads(3).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Ads/images/Ads(3).jpg -------------------------------------------------------------------------------- /challenge/src/components/Ads/images/Ads(4).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Ads/images/Ads(4).jpg -------------------------------------------------------------------------------- /challenge/src/components/Ads/images/Ads(5).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Ads/images/Ads(5).jpg -------------------------------------------------------------------------------- /challenge/src/components/Contractions.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from 'react'; 2 | 3 | const fillSet = (words, set) => { 4 | words.forEach((word) => { 5 | set.add(word); 6 | //add capitalized counterpart 7 | set.add(word.charAt(0).toUpperCase() + word.slice(1)); 8 | }); 9 | } 10 | 11 | const notWordSet = new Set(); 12 | const notWords = ['should', 'could', 'would', 'do', 'is', 'are', 'does', 'have', 'will', 'can', 'had', 'has', 'must', 'were', 'did']; 13 | 14 | const haveWordSet = new Set(); 15 | const haveWords = ['should', 'could', 'would', 'they', 'we', 'i', 'I', 'you']; 16 | 17 | const otherWordSet = new Set(); 18 | const otherWords = ['he','she','it','there','what','where','who','when','that']; 19 | 20 | fillSet(notWords, notWordSet); 21 | fillSet(haveWords, haveWordSet); 22 | fillSet(otherWords,otherWordSet); 23 | 24 | const createContractions = (sentence) => { 25 | const words = sentence.split(' '); 26 | 27 | const newSentence = []; 28 | 29 | for(let i = 1; i < words.length; i++) { 30 | 31 | if((words[i] === 'have') && haveWordSet.has(words[i-1])) { 32 | newSentence.push(words[i-1] + '\'ve'); 33 | i += 1; 34 | } else if(words[i] === 'not' && notWordSet.has(words[i-1])) { 35 | if(words[i-1] === 'will'){ 36 | newSentence.push("won't"); 37 | } 38 | else{ 39 | newSentence.push(words[i-1] + 'n\'t'); 40 | } 41 | i += 1; 42 | } else if(words[i] === 'is' && otherWordSet.has(words[i-1])){ 43 | newSentence.push(words[i-1] + '\'s'); 44 | i += 1; 45 | } 46 | 47 | else { 48 | newSentence.push(words[i-1]); 49 | } 50 | } 51 | 52 | const lastWord = words[words.length - 1]; 53 | if(lastWord !== 'have' && lastWord !== 'not' && lastWord !== 'is') 54 | newSentence.push(words[words.length - 1]); 55 | return newSentence.join(' '); 56 | } 57 | 58 | function Contractions() { 59 | const [input, setInput] = useState(""); 60 | const [sentence, setSentence] = useState(""); 61 | const inputRef = useRef(null); 62 | 63 | const handleChange = (event) => { 64 | setInput(event.target.value); 65 | } 66 | 67 | const handleSubmit = (event) => { 68 | event.preventDefault(); 69 | setSentence(createContractions(input)); 70 | } 71 | 72 | return ( 73 |
    81 |

    82 | Contraction-Creator 9000 83 |

    84 |
    85 | Type a sentence and I'll add some contractions!!!! (e.g. do not ={'>'} don't) 86 |
    87 | 89 | 90 | 91 | 92 | 93 |
    94 | {sentence} 95 |
    96 |
    97 | ) 98 | } 99 | 100 | export default Contractions; -------------------------------------------------------------------------------- /challenge/src/components/Counter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | export default function Counter() { 4 | 5 | const [count] = useState(491901); 6 | 7 | function randomize(max) { 8 | max = Math.trunc(Math.random() * max); 9 | return max; 10 | } 11 | 12 | return ( 13 |
    14 |

    This page has

    15 |

    {randomize(count)}

    16 |

    views

    17 |
    18 | ) 19 | 20 | } 21 | -------------------------------------------------------------------------------- /challenge/src/components/CovidCount.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | export default function CovidCount() { 4 | 5 | const date1 = new Date('01/20/2020'); 6 | const date2 = new Date(); 7 | const diffTime = Math.abs(date2 - date1); 8 | const [diffDays] = useState(Math.ceil(diffTime / (1000 * 60 * 60 * 24))); 9 | 10 | return ( 11 |
    12 |

    Number of days since Covid started: {diffDays} days

    13 |
    14 | ); 15 | 16 | } -------------------------------------------------------------------------------- /challenge/src/components/ElonMusk.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ElonMuskURI from './images/ElonMusk.png'; 3 | import './ElonMuskAnimation.css'; 4 | 5 | export default function ElonMusk() { 6 | return ( 7 |
    8 | tesla rocket guy 12 |
    13 | ); 14 | } -------------------------------------------------------------------------------- /challenge/src/components/ElonMuskAnimation.css: -------------------------------------------------------------------------------- 1 | .zoom { 2 | padding: 50px; 3 | transition: transform .2s; 4 | width: 420px; 5 | height: 300px; 6 | margin: 0 auto; 7 | } 8 | 9 | .zoom:hover { 10 | transform: scale(1.5); 11 | } -------------------------------------------------------------------------------- /challenge/src/components/FriesWithSauce.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import friesURI from './images/fries.jpg'; 3 | 4 | export default function FriesWithSauce() { 5 | return ( 6 | 11 | ) 12 | } -------------------------------------------------------------------------------- /challenge/src/components/FunFact.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ls from "local-storage"; 3 | import { useEffect } from "react"; 4 | 5 | export default function FunFact() { 6 | const [facts, setFacts] = useState([]); 7 | const [disabled, setDisabled] = useState(false); 8 | useEffect(() => { 9 | if(ls.get("facts") != null) { 10 | setFacts(ls.get("facts")); 11 | } 12 | }, []); 13 | 14 | async function getFact() { 15 | setDisabled(true); 16 | const headers = { "X-Api-Key": process.env.REACT_APP_API_NINJAS_API_KEY}; 17 | const response = await fetch( `https://api.api-ninjas.com/v1/facts`, { headers } ); 18 | if(!response.ok) { 19 | alert("Was not able to retrieve fact"); 20 | throw new Error("Was not able to retrieve fact."); 21 | } 22 | const data = await response.json(); 23 | const fact = data[0].fact; 24 | const newFacts = [...facts, fact]; 25 | ls.set("facts", newFacts); 26 | setFacts(newFacts); 27 | setDisabled(false); 28 | } 29 | 30 | function clearFacts() { 31 | setFacts([]); 32 | ls.clear(); 33 | } 34 | 35 | return ( 36 |
    37 |
    38 | 39 | 40 |
    41 |
    42 |
      43 | {facts.slice().reverse().map((factMessage, index) => ( 44 |
      45 |
    • {factMessage}
      • 46 |
      47 |
      48 | ))} 49 |
    50 |
    51 |
    52 | ) 53 | } 54 | 55 | -------------------------------------------------------------------------------- /challenge/src/components/GetName.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | export default function GetName() { 4 | 5 | const [value, setValue] = useState(""); 6 | const [hasName, setHasName] = useState( 7 | !(localStorage.getItem("username") === null || localStorage.getItem("username") === "") 8 | ); 9 | 10 | function handleChange(event) { 11 | // capitalize first letter of every word in name 12 | const autoCaseVal = event.target.value.split(" ").map(w => w.charAt(0).toUpperCase() + w.substring(1, w.length).toLowerCase()).join(" "); 13 | setValue(autoCaseVal); 14 | } 15 | 16 | function handleSubmit(event) { 17 | event.preventDefault(); 18 | localStorage.setItem("username", value); 19 | setValue(""); 20 | 21 | console.log(hasName); 22 | setHasName( 23 | !( 24 | localStorage.getItem("username") === null || 25 | localStorage.getItem("username") === "" 26 | ) 27 | ); 28 | } 29 | 30 | function changeNameSetup() { 31 | localStorage.removeItem("username"); 32 | setHasName( 33 | !( 34 | localStorage.getItem("username") === null || 35 | localStorage.getItem("username") === "" 36 | ) 37 | ); 38 | } 39 | 40 | if (hasName) { 41 | return ( 42 |
    49 | Your name is {localStorage.getItem("username")} 50 | 62 |
    63 | ); 64 | } else { 65 | return ( 66 |
    74 |
    75 | 84 | 95 |
    96 |
    97 | ); 98 | } 99 | 100 | } -------------------------------------------------------------------------------- /challenge/src/components/Gif.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function GIF() { 4 | return ( 5 | Skeleton face playing trumpet 10 | ); 11 | } -------------------------------------------------------------------------------- /challenge/src/components/JojoStand.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function JojoStand(props) { 4 | const visibility = () => { 5 | if (!props.isVisible) { 6 | return "scale-down-center"; 7 | } else { 8 | return ""; 9 | } 10 | } 11 | 12 | const standStyling = { 13 | margin: "5%", 14 | marginTop: "1%", 15 | marginBottom: "0", 16 | width: "25%" 17 | } 18 | return ( 19 |
    20 |
    21 | It's an alien 27 |

    {props.stand}

    28 |
    29 |
    30 | ) 31 | } -------------------------------------------------------------------------------- /challenge/src/components/Jokes.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import dislikeImg from "./images/dislike.png"; 3 | import likeImg from "./images/like.png"; 4 | import jokeList from "./jokesData.json"; 5 | 6 | export default function Jokes() { 7 | const jokes = jokeList.list; 8 | const randomJoke = jokes[parseInt(Math.random() * jokes.length)]; 9 | const [textArea, setTextArea] = useState(randomJoke); 10 | const [count, setCount] = useState(0); 11 | 12 | function increaseClick() { 13 | setCount(count + 1); 14 | } 15 | 16 | function decreaseClick() { 17 | setCount(count - 1); 18 | } 19 | 20 | function dislikeClick() { 21 | const randomJoke = jokes[parseInt(Math.random() * jokes.length)]; 22 | decreaseClick(); 23 | 24 | setTextArea(randomJoke); 25 | } 26 | 27 | return ( 28 | <> 29 |
    37 |

    41 |
    {textArea}
    42 |

    43 |
    44 | 45 |

    46 |
    Haha, did you get it, ha, ha...
    47 |

    48 | 49 |
    50 |
    51 | Like button 57 | Dislike button 63 |
    64 | {/* I did inline css cuz too much work to make a css page ;) */} 65 |
    66 |

    The count is: {count}

    67 |
    68 |
    69 | 70 | ); 71 | } -------------------------------------------------------------------------------- /challenge/src/components/Kanye.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from "react"; 2 | 3 | export default function Kanye() { 4 | const [items, setItems] = useState([]); 5 | const DataLoaded = useRef(false); 6 | 7 | useEffect(() => { 8 | if (DataLoaded.current) return; 9 | fetch( 10 | "https://api.kanye.rest/" 11 | ) 12 | .then((res) => res.json()) 13 | .then((json) => { 14 | setItems(json); 15 | DataLoaded.current = true; 16 | }) 17 | }); 18 | 19 | return ( 20 |
    21 |

    Kanye Quote of the Day:

    22 |

    {items.quote}

    23 |
    24 | ) 25 | } -------------------------------------------------------------------------------- /challenge/src/components/KrabbyPatty.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import KrabbyPattyURI from './images/KrabbyPatty.png'; 3 | 4 | export default function KrabbyPatty() { 5 | function imageClick() { 6 | console.log('Are you feeling it now Mr. Krabs?!?'); 7 | } 8 | 9 | return ( 10 |
    11 | Tasty Krabby Patty 18 |
    19 | ); 20 | } -------------------------------------------------------------------------------- /challenge/src/components/Maguire.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MaguireURI from './images/Maguire.png'; 3 | 4 | export default function Maguire() { 5 | 6 | return ( 7 |
    8 | Maguire dancing 14 |
    15 | ); 16 | 17 | } -------------------------------------------------------------------------------- /challenge/src/components/Mando.jsx: -------------------------------------------------------------------------------- 1 | import MandoURI from './images/mando.jpg'; 2 | import React from 'react'; 3 | 4 | export default function Mando() { 5 | return ( 6 |
    7 | mando 13 |
    14 | ); 15 | } -------------------------------------------------------------------------------- /challenge/src/components/MemeImage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Modal } from '@mui/material'; 3 | import { Typography } from '@mui/material'; 4 | import { Box } from '@mui/material'; 5 | import { useState } from 'react'; 6 | 7 | const RandomImage = (props) => { 8 | 9 | const ModalStyle = { 10 | position: 'absolute', 11 | top: '50%', 12 | left: '50%', 13 | transform: 'translate(-50%, -50%)', 14 | width: 400, 15 | bgcolor: "white", 16 | border: '2px solid black', 17 | boxShadow: 24, 18 | p: 4 19 | }; 20 | 21 | 22 | const [modOpen, setModOpen] = useState(false); 23 | const handleOpen = () => setModOpen(true); 24 | const handleClose = () => setModOpen(false); 25 | 26 | 27 | 28 | 29 | return ( 30 | 31 | 37 | 38 | 39 |

    40 | {props.description} 41 |

    42 |     43 |     44 | handleOpen()} 46 | src={props.page} 47 | alt={props.description} 48 | height="100%" 49 | width="100%" 50 | style={props.style} 51 | color = "white" 52 | > 53 |     54 | ) 55 | } 56 | 57 | export default RandomImage 58 | 59 | -------------------------------------------------------------------------------- /challenge/src/components/Memes/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/1.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/10.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/2.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/3.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/4.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/5.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/6.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/7.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/8.png -------------------------------------------------------------------------------- /challenge/src/components/Memes/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/Memes/9.png -------------------------------------------------------------------------------- /challenge/src/components/MonthAndYear.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function MonthAndYear() { 4 | function getDateDifference() { 5 | // Milliiseconds in a day 6 | var one_day = 86400000; 7 | var currentDate = new Date(); 8 | var fallSemester = new Date("09/1/2020"); 9 | // Gets difference of fallsemester and current date 10 | var result = Math.round((fallSemester.getTime() - currentDate.getTime()) / (one_day)); 11 | if (result > 0) { 12 | return result + " days until Fall 2020 Begins!"; 13 | } else if (result === 0) { 14 | return "Semester has begun"; 15 | } else if (result < 0) { 16 | return "Semester In Progress"; 17 | } 18 | } 19 | 20 | var date = new Date(); 21 | var year = date.getFullYear(); 22 | var month = date.toLocaleString('default', { month: 'long' }); 23 | 24 | return ( 25 |
    26 |

    It is {month} {year}

    27 |

    {getDateDifference()}

    28 |
    29 | 30 | ) 31 | } -------------------------------------------------------------------------------- /challenge/src/components/MoviePage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | 4 | const MoviePage = () => { 5 | return ( 6 |
    7 |

    Movie Page

    8 | 17 |
    18 | ); 19 | }; 20 | 21 | 22 | export default MoviePage; -------------------------------------------------------------------------------- /challenge/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | import HackRUlogoURI from "./images/HackRUlogo.jpg"; 4 | import Fade from "react-reveal/Fade"; 5 | import ButtonGroup from '@material-ui/core/ButtonGroup'; 6 | import Button from '@material-ui/core/Button'; 7 | import { withStyles } from '@material-ui/core/styles'; 8 | import AppBar from '@material-ui/core/AppBar'; 9 | import Toolbar from '@material-ui/core/Toolbar'; 10 | import IconButton from '@material-ui/core/IconButton'; 11 | import Typography from '@material-ui/core/Typography'; 12 | import MenuIcon from '@material-ui/icons/Menu'; 13 | import useMediaQuery from '@material-ui/core/useMediaQuery' 14 | import Drawer from '@material-ui/core/Drawer'; 15 | import List from '@material-ui/core/List'; 16 | import ListItem from '@material-ui/core/ListItem'; 17 | 18 | const useStyles = theme => ({ 19 | navbar: { 20 | margin: '0px 10px 0px 0px', 21 | zIndex: '1000', 22 | }, 23 | paper: { 24 | background: "#c85151", 25 | }, 26 | }); 27 | 28 | 29 | const withMediaQuery = (...args) => Component => props => { 30 | const mediaQuery = useMediaQuery(...args); 31 | return ; 32 | }; 33 | 34 | const Navbar = (props) => { 35 | const [left, setLeft] = useState(false); 36 | 37 | function handleClick(index) { 38 | props.onPageChange(index, props.items[index]); 39 | } 40 | function toggleDrawer(event, open) { 41 | console.log(open); 42 | setLeft(open); 43 | }; 44 | 45 | const focused = props.currentPage; 46 | const { classes } = props; 47 | /* Desktop Navbar */ 48 | if (props.mediaQuery) { 49 | return ( 50 |
    51 | 52 | 53 | 54 | 55 | 56 | 57 | {props.items.map(function (element, index) { 58 | var style = ""; 59 | if (focused === index) { 60 | style = "active"; 61 | } 62 | return ( 63 | 71 | ); 72 | })} 73 | 74 | 75 |
    76 | ); 77 | } 78 | /* Mobile Drawer */ 79 | else { 80 | return ( 81 |
    toggleDrawer(event, false)}> 83 | 84 | 85 | toggleDrawer(event, true)} edge="start" className={classes.menuButton} color="inherit" aria-label="menu"> 86 | 87 | 88 | 89 | Pages 90 | 91 | 92 | 93 | 94 | toggleDrawer(event, false)}> 95 | 96 | {props.items.map(function (element, index) { 97 | var style = ""; 98 | if (focused === index) { 99 | style = "active"; 100 | } 101 | return ( 102 | handleClick(index)} 107 | > 108 | {element} 109 | 110 | ); 111 | })} 112 | 113 | 114 |
    115 | ); 116 | } 117 | } 118 | 119 | Navbar.propTypes = { 120 | fixed: PropTypes.bool, 121 | items: PropTypes.array, 122 | }; 123 | 124 | Navbar.defaultPropTypes = { 125 | fixed: true, 126 | items: [], 127 | }; 128 | 129 | export default withStyles(useStyles)(withMediaQuery('(min-width:768px)')(Navbar)) 130 | -------------------------------------------------------------------------------- /challenge/src/components/News.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import './newsStyles.css'; 3 | 4 | 5 | export default function News() { 6 | const [articles, setArticles] = useState([]); 7 | 8 | useEffect(() => { 9 | var url = 'https://newsapi.org/v2/everything?' + 10 | 'q=Rutgers&' + 11 | 'searchIn=title&' + 12 | 'sortBy=publishedAt&' + 13 | 'pageSize=3&'+ 14 | 'apiKey=b29570ce17404b19aac9bf15b69cc21c'; 15 | 16 | var req = new Request(url); 17 | 18 | fetch(req) 19 | .then(response => response.json()) 20 | .then(data => setArticles(data.articles)) 21 | .catch(err => console.log(err)) 22 | 23 | }, []) 24 | 25 | 26 | return ( 27 |
    28 | 29 |

    Whats up with Rutgers?

    30 |
      31 | 32 | {articles.map((list, index)=> ( 33 | 34 |
    • {list.title} 35 |

      Date & Time Published: {list.publishedAt}

      • 36 | 37 | ))} 38 |
    39 | 40 | 41 | 42 |
    43 | 44 | 45 | ); 46 | 47 | } -------------------------------------------------------------------------------- /challenge/src/components/Pages/About.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react' 2 | import JojoStand from '../JojoStand' 3 | import RandomAds from "../RandomAds"; 4 | import Button from '@material-ui/core/Button'; 5 | 6 | export default function About() { 7 | 8 | const [standsVisibility, setStandsVisibility] = useState([true, true, true, true]); 9 | const [length, setLength] = useState(4); 10 | const smartQuoteHasRun = useRef(false); 11 | const [text, setText] = useState(smartQuote()); 12 | 13 | function snap() { 14 | var stands = [...standsVisibility]; 15 | 16 | if (length > 1) { 17 | for (var i = 0; i < length / 2; i++) { 18 | 19 | //Randomly select which is disintegrated 20 | var RandomNum = Math.floor(Math.random() * 4); 21 | //console.log("disappear: ", RandomNum); 22 | 23 | if (length <= 1) { 24 | break; 25 | } 26 | else if (stands[RandomNum] === true) { 27 | stands[RandomNum] = false; 28 | 29 | // If Star Platinum disintegrated then display Unbalanced! on the console 30 | if (RandomNum === 3) { 31 | console.log("Unbalanced!"); 32 | } 33 | } 34 | else { 35 | i--; 36 | } 37 | } 38 | } else { 39 | 40 | //Displays error message when attempting to thanos snap when only one stand remains 41 | window.alert("Thanos’ fingers are sore!"); 42 | 43 | } 44 | 45 | setStandsVisibility(stands); 46 | setLength(length / 2); 47 | } 48 | 49 | function smartQuote() { 50 | if (smartQuoteHasRun.current) return; 51 | fetch("https://techy-api.vercel.app/api/json") 52 | .then((response) => response.json()) 53 | .then((data) => setText(data.message)); 54 | smartQuoteHasRun.current = true; 55 | } 56 | 57 | var stands = [ 58 | { 59 | stand: "The World", 60 | url: "https://static.jojowiki.com/images/c/cb/TheWorldMangaAv.png" 61 | }, 62 | { 63 | stand: "Hermit Purple", 64 | url: "https://static.jojowiki.com/images/0/08/HermitPurpleMangaAv.png" 65 | }, 66 | { 67 | stand: "Magician's Red", 68 | url: "https://static.jojowiki.com/images/7/7c/MagicianRedMangaAv.png" 69 | }, 70 | { 71 | stand: "Star Platinum", 72 | url: "https://cdn.discordapp.com/attachments/701574644595032104/710625607503052800/StarPlatinumMangaAv.png" 73 | } 74 | ]; 75 | 76 | return ( 77 |
    78 | 79 | 80 |
    81 |

    82 |
    About Page
    83 |

    84 |
    85 |
    86 |

    HackRU is a 24-hour hackathon at Rutgers University, hosted every semester. Come join us for a weekend filled with learning and creating. 87 |

    88 |
    89 |
    90 |
    101 | {stands.map((stand, i) => { 102 | return 108 | })} 109 |
    110 |
    111 |
    112 |
    113 |
    114 | 117 |

    {text}

    118 |
    119 |
    120 |
    121 | ) 122 | 123 | } -------------------------------------------------------------------------------- /challenge/src/components/Pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import RandomImage from '../RandomImage' 3 | import RandomPhoneNumber from '../RandomPhoneNumber' 4 | import RandomEmail from '../RandomEmail' 5 | import ChatBox from '../chat/ChatBox' 6 | import RandomAds from "../RandomAds"; 7 | import RatingBar from '../RatingBar' 8 | import RandomText from '../RandomText' 9 | 10 | const Contact = (props) => { 11 | const page = props.currentpage 12 | const pictureStyling = { 13 | marginTop: "5%", 14 | marginBottom: "5%", 15 | marginRight: "5%", 16 | marginLeft: "5%" 17 | } 18 | return ( 19 |
    20 |
    21 | 22 |
    23 |

    24 |
    Contact Page
    25 |

    26 |
    27 |

    28 |
    29 |

    30 |

    31 |
    32 |

    33 |
    34 |
    35 |
    36 |
    46 |

    47 |
    Who Ya Gonna Call?
    48 |
    49 |
    50 | 51 |

    52 | 53 | 54 |
    55 |
    56 |
    57 |
    58 |
    59 |
    60 | 61 |
    62 | ) 63 | } 64 | 65 | export default Contact 66 | -------------------------------------------------------------------------------- /challenge/src/components/Pages/FunFacts.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import FunFact from '../FunFact'; 3 | 4 | const FunFacts = (props) => { 5 | 6 | return ( 7 | 8 |
    9 |

    10 |
    Fun Facts
    11 |

    12 | 13 |
    14 | 15 | 16 | ) 17 | } 18 | export default FunFacts 19 | -------------------------------------------------------------------------------- /challenge/src/components/Pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BabyYoda from "../../mandalorian/BabyYoda"; 3 | import NumberLogger from "../../NumberLogger"; 4 | import strings from "../../strings.json"; 5 | import Fade from "react-reveal/Fade"; 6 | import MonthAndYear from "../MonthAndYear"; 7 | import Counter from "../Counter"; 8 | import PartyParrot from "../PartyParrot"; 9 | import RandomAds from "../RandomAds"; 10 | import Button from "@material-ui/core/Button"; 11 | import Mando from "../Mando"; 12 | import Contractions from "../Contractions"; 13 | import ElonMusk from "../ElonMusk"; 14 | import Kanye from "../Kanye"; 15 | import GetName from "../GetName"; 16 | import RandomColorButton from "../RandomColorButton"; 17 | import MoviePage from "../MoviePage"; 18 | import Pokesearch from "../Pokesearch"; 19 | import News from "../News"; 20 | 21 | const Home = (props) => { 22 | return ( 23 |
    24 |
    25 |
    34 | 35 | 36 | 37 | 38 | {strings.title} 39 | {strings.greeting} 40 | 41 | 50 | 58 | 59 | 60 | 61 |
    62 | 63 |
    64 |
    65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
    76 |
    77 | ); 78 | }; 79 | 80 | export default Home; 81 | -------------------------------------------------------------------------------- /challenge/src/components/Pages/Memes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MemeImage from "../MemeImage"; 3 | import meme1 from "../Memes/1.png" 4 | import meme2 from "../Memes/2.png" 5 | import meme3 from "../Memes/3.png" 6 | import meme4 from "../Memes/4.png" 7 | import meme5 from "../Memes/5.png" 8 | import meme6 from "../Memes/6.png" 9 | import meme7 from "../Memes/7.png" 10 | import meme8 from "../Memes/8.png" 11 | import meme9 from "../Memes/9.png" 12 | import meme10 from "../Memes/10.png" 13 | import "../memesStyles.css"; 14 | 15 | const Memes = (props) => { 16 | const page = props.currentpage; 17 | 18 | // list of funny video links. reload the page for a new random video 19 | const links = [ 20 | 'https://www.youtube.com/embed/fWNVLO8HRf0?si=hE6LfGidtKP9IVW6', 21 | 'https://www.youtube.com/embed/tYX6mVp0jmw?si=yXRCKboFPaJh8BOV', 22 | 'https://www.youtube.com/embed/2dcyby6vH9s?si=WEOatLtjLIVlvnox', 23 | 'https://www.youtube.com/embed/4MPPeSaGTDc?si=kJ6b6Ulrwwn6c4bm', 24 | 'https://www.youtube.com/embed/w6vVS6v58II?si=oUPr96VQCx0oc4S_', 25 | 'https://www.youtube.com/embed/bVIMEBU_jgI?si=INkGBNgHt3Vbk9Vs' 26 | ]; 27 | const randomLink = links[Math.floor(Math.random() * links.length)]; 28 | 29 | return ( 30 |
    31 |
    32 |

    33 |
    Memes
    34 |

    35 |
    36 | 47 |
    48 |
    49 |
    50 | 57 |
    58 |
    59 | 64 |
    65 |
    66 | 71 |
    72 |
    73 | 78 |
    79 |
    80 | 85 |
    86 |
    87 | 92 |
    93 |
    94 | 99 |
    100 |
    101 | 106 |
    107 |
    108 | 113 |
    114 |
    115 | 120 |
    121 |
    122 |
    123 |
    124 | ) 125 | }; 126 | export default Memes; 127 | -------------------------------------------------------------------------------- /challenge/src/components/Pages/Sponsors.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import RandomImage from "../RandomImage"; 3 | import SponsorForm from "../SponsorForm"; 4 | import RandomAds from "../RandomAds"; 5 | 6 | const Sponsors = (props) => { 7 | const page = props.currentpage; 8 | const pictureStyling = { 9 | marginTop: "5%", 10 | marginBottom: "5%", 11 | marginRight: "5%", 12 | marginLeft: "5%", 13 | border: "3px solid lightgreen", 14 | borderRadius: "10px", 15 | }; 16 | const ModalStyle = { 17 | position: "absolute", 18 | top: "50%", 19 | left: "50%", 20 | transform: "translate(-50%, -50%)", 21 | width: 400, 22 | bgcolor: "background.paper", 23 | border: "2px solid #000", 24 | boxShadow: 24, 25 | p: 4, 26 | }; 27 | 28 | return ( 29 |
    30 | 31 | 32 |
    33 |

    34 |
    Sponsors Page
    35 |

    36 |
    37 |
    38 |

    45 | Hi 46 | {localStorage.getItem("username") !== null 47 | ? " " + localStorage.getItem("username") 48 | : ""} 49 | , consider becoming a sponsor today! 50 |

    51 |
    61 | 62 |
    63 |
    73 | 79 | 80 | 86 | 92 |
    93 |
    94 |
    95 |
    96 |
    97 |
    98 |
    99 | ); 100 | }; 101 | 102 | export default Sponsors; 103 | -------------------------------------------------------------------------------- /challenge/src/components/Pages/profile.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | export default function Profile({ name }) { 4 | const [gender, setGender] = useState("unknown"); 5 | const [phone, setPhone] = useState("unknown"); 6 | 7 | fetch("https://randomuser.me/api/", { method: "GET" }) 8 | .then((response) => response.json()) 9 | .then((data) => { 10 | const fetchedData = data["results"][0]; 11 | if (gender === "unknown") { 12 | setGender(fetchedData["gender"]); 13 | setPhone(fetchedData["phone"]); 14 | } 15 | }) 16 | .catch((error) => { 17 | console.error("Error fetching data:", error); 18 | }); 19 | 20 | return ( 21 |
    24 |
    25 |

    Name: {name}

    26 |

    Gender: {gender}

    27 |

    Phone: {phone}

    28 |
    29 |
    30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /challenge/src/components/PartyParrot.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PartyParrotImg from './images/Party_Parrot.gif'; 3 | 4 | export default function PartyParrot() { 5 | return ( 6 |
    7 | pArTy PaRrOt 12 | oThEr pArTy PaRrOt 17 | pArTy PaRrOt 22 |
    23 | 24 | ); 25 | } -------------------------------------------------------------------------------- /challenge/src/components/Pokesearch.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | 4 | export default function Pokesearch() { 5 | const [search, setSearch] = useState(""); 6 | const [pokemon, setPokemon] = useState(null); 7 | const [error, setError] = useState(null); 8 | const [isLoading, setLoading] = useState(false); 9 | 10 | async function searchPokemon() { 11 | try { 12 | setLoading(true); 13 | //trim() trims all whitespace in the search, while toLowerCase() 14 | // allows us to compare the input against the API value without case-sensitivity 15 | const fixedSearch = search.trim().toLowerCase() 16 | const response = await fetch( 17 | `https://pokeapi.co/api/v2/pokemon/${fixedSearch}` 18 | ); 19 | if (!response.ok) { 20 | throw new Error("Pokemon not found"); 21 | } 22 | const data = await response.json(); 23 | setPokemon({ 24 | abilities: data.abilities.map((ability) => ability.ability.name), 25 | height: data.height, 26 | weight: data.weight, 27 | types: data.types.map((type) => type.type.name), 28 | //sets image to the shiny image of the selected pokemon 29 | //provided by the sprites package of the API 30 | image: data.sprites.front_shiny, 31 | }); 32 | setError(null); 33 | } catch (error) { 34 | setPokemon(null); 35 | setError(error.message); 36 | } finally { 37 | setLoading(false); 38 | } 39 | } 40 | 41 | return ( 42 |
    51 |

    60 | Search for a Pokemon 61 |

    62 | 63 | setSearch(e.target.value)} 71 | /> 72 | 75 | {error &&

    {error}

    } 76 | {pokemon && ( 77 |
    78 | 79 |
    80 | {pokemon.name} 90 |
    91 | 92 |
    93 | 94 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 119 | 120 | 123 | 124 | 127 | 128 | 133 | 134 | 135 | 136 | 137 |
    AbilitiesHeightWeightTypes
    115 | {pokemon.abilities.map((ability, index) => ( 116 |
    {ability}
    117 | ))} 118 |     		121 | {pokemon.height} 122 | 125 | {pokemon.weight} 126 | 129 | {pokemon.types.map((ability, index) => ( 130 |
    {ability}
    131 | ))} 132 |
    138 | 139 |
    140 | 141 |
    142 | 143 | )} 144 | 145 |
    146 | ); 147 | } 148 | -------------------------------------------------------------------------------- /challenge/src/components/RandomAds.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import ad1 from './Ads/images/Ads(1).jpg'; 3 | import ad2 from './Ads/images/Ads(2).jpg'; 4 | import ad3 from './Ads/images/Ads(3).jpg'; 5 | import ad4 from './Ads/images/Ads(4).jpg'; 6 | import ad5 from './Ads/images/Ads(5).jpg'; 7 | 8 | export default function RandomAds() { 9 | 10 | const [images] = useState([ad1, ad2, ad3, ad4, ad5]); 11 | const [selectedImage, setSelectedImage] = useState(ad4); 12 | 13 | useEffect(() => { 14 | setInterval(() => { 15 | var ran = Math.floor(Math.random() * images.length); 16 | setSelectedImage(images[ran]); 17 | }, 2000); 18 | }, []); 19 | 20 | return ( 21 |
    22 | Random Ads 33 |
    34 | ); 35 | 36 | } -------------------------------------------------------------------------------- /challenge/src/components/RandomColorButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | export default function Home() { 4 | const [buttonColor, setButtonColor] = useState(getRandomColor()); 5 | 6 | function getRandomColor() { 7 | const colors = ["red", "green", "blue", "grey", "orange", "purple", "black"]; 8 | const randomIndex = Math.floor(Math.random() * colors.length); 9 | return colors[randomIndex]; 10 | } 11 | 12 | const handleButtonClick = () => { 13 | const newColor = getRandomColor(); 14 | setButtonColor(newColor); 15 | }; 16 | 17 | return ( 18 |
    19 |

    Welcome to the Home Page

    20 | 26 |
    27 | ); 28 | } -------------------------------------------------------------------------------- /challenge/src/components/RandomEmail.jsx: -------------------------------------------------------------------------------- 1 | function getRandomEmail() { 2 | return Math.random().toString(36).substring(2, 11) + '@itshacked.com'; 3 | } 4 | 5 | const RandomEmail = (props) => { 6 | return getRandomEmail(); 7 | }; 8 | 9 | export default RandomEmail; 10 | -------------------------------------------------------------------------------- /challenge/src/components/RandomImage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Modal} from '@mui/material'; 3 | import {Typography} from '@mui/material'; 4 | import {Box} from '@mui/material'; 5 | import {useState} from 'react'; 6 | 7 | const RandomImage = (props) => { 8 | 9 | const ModalStyle = { 10 | position: 'absolute', 11 | top: '50%', 12 | left: '50%', 13 | transform: 'translate(-50%, -50%)', 14 | width: 400, 15 | bgcolor: "lightblue", 16 | border: '2px solid #000', 17 | boxShadow: 24, 18 | p: 4, 19 | }; 20 | 21 | 22 | const [modOpen, setModOpen] = useState(false); 23 | const handleOpen = () => setModOpen(true); 24 | const handleClose = () => setModOpen(false); 25 | 26 | 27 | 28 | 29 | return( 30 | 31 | 37 | 38 | 39 | {props.description} 40 | 41 | 42 |

    43 |

    44 | 45 | 46 | Click here to access! 47 | 48 | 49 |     50 |     51 | handleOpen()} 53 | src={"https://picsum.photos/id/" + props.page + "/500"} 54 | alt="RandomizedPicsum" 55 | height="20%" 56 | width="20%" 57 | style= {props.style} 58 | > 59 |     60 | ) 61 | } 62 | 63 | export default RandomImage 64 | 65 | -------------------------------------------------------------------------------- /challenge/src/components/RandomPhoneNumber.jsx: -------------------------------------------------------------------------------- 1 | function getRandomPhoneNumber() { 2 | var returnVal = '+1 '; 3 | 4 | var i; 5 | for (i = 1; i <= 10; i++) { 6 | if (i === 1) returnVal += '('; 7 | if (i === 4) returnVal += ')'; 8 | if (i === 4) returnVal += ' '; 9 | if (i === 7) returnVal += ' '; 10 | returnVal += Math.floor(Math.random() * 10); 11 | } 12 | return returnVal; 13 | } 14 | 15 | const RandomPhoneNumber = (props) => { 16 | return getRandomPhoneNumber(); 17 | }; 18 | 19 | export default RandomPhoneNumber; 20 | -------------------------------------------------------------------------------- /challenge/src/components/RandomText.jsx: -------------------------------------------------------------------------------- 1 | 2 | const randomText = [ 3 | "LEAVE ME ALONE DON't CALL THIS NUMBER!!", 4 | "THE ONE PIECE IS REAL", 5 | "SWAG", 6 | "THIS ONE PIECE IS NOT REAL!!!", 7 | "NOT GHOST BUSTERS!!", 8 | ]; 9 | 10 | function getRandomText() { 11 | const randomIndex = Math.floor(Math.random() * randomText.length); 12 | return randomText[randomIndex]; 13 | } 14 | 15 | const RandomText = (props) => { 16 | return getRandomText(); 17 | }; 18 | 19 | export default RandomText; 20 | -------------------------------------------------------------------------------- /challenge/src/components/RatingBar.jsx: -------------------------------------------------------------------------------- 1 | import Rating from '@mui/material/Rating' 2 | import React, { useState } from 'react'; 3 | import Box from '@mui/material/Box'; 4 | 5 | export default function RatingBar() { 6 | const [sumValue, setSumValue] = useState(0); 7 | const [value, setValue] = useState(0); 8 | const [count, setCount] = useState(0); 9 | const [hover, setHover] = useState(-1); 10 | 11 | return ( 12 | 17 | { 20 | setCount(count + 1); 21 | setSumValue(sumValue + newValue); 22 | setValue(sumValue / count); 23 | }} 24 | onChangeActive={(event, newHover) => { 25 | setHover(newHover); 26 | }} 27 | value={value} 28 | precision={0.1} /> 29 | {value !== null && ( 30 | 31 | {hover !== -1 ? 32 | hover : value} 33 | )} 34 | 35 |

    {value >= 4.2 ? "WE ARE CERTIFIED" : "GIVE US A 5 STAR!!!"}

    36 |     37 | ); 38 | } -------------------------------------------------------------------------------- /challenge/src/components/SponsorForm.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import TextField from '@material-ui/core/TextField'; 3 | import Button from '@material-ui/core/Button'; 4 | 5 | import SponsorFormButton from ".//SponsorFormButton"; 6 | 7 | export default function SponsorForm() { 8 | 9 | const [name, setName] = useState(localStorage.getItem("username") !== null ? localStorage.getItem("username") : ""); 10 | const [amount, setAmount] = useState(''); 11 | const [submittedName, setSubmittedName] = useState(localStorage.getItem("username") !== null ? localStorage.getItem("username") : ""); 12 | const [rating, setRating] = useState(0); 13 | const [show, setShow] = useState(false); 14 | 15 | function handleChange(event) { 16 | if (event.target.name === "name") { 17 | setName(event.target.value); 18 | } else if (event.target.name === "amount") { 19 | setAmount(event.target.value); 20 | } 21 | } 22 | function handleSubmit(event) { 23 | if (amount > 0) { 24 | setShow(true); 25 | setSubmittedName(name); 26 | console.log('Name:' + name); 27 | console.log('Amount: $' + amount); 28 | if (amount >= 100) { 29 | setRating(5); 30 | setShow(true); 31 | } else if (amount >= 50) { 32 | setRating(4); 33 | setShow(true); 34 | } else if (amount >= 25) { 35 | setRating(3); 36 | setShow(true); 37 | } else if (amount >= 10) { 38 | setRating(2); 39 | setShow(true); 40 | } else if (amount < 10 && amount > 0) { 41 | setRating(1); 42 | setShow(true); 43 | } 44 | 45 | if (amount < 20 && amount > 0) { 46 | setRating(0); 47 | setShow(true); 48 | } 49 | event.preventDefault(); 50 | } else { 51 | setShow(false); 52 | event.preventDefault(); 53 | 54 | } 55 | } 56 | 57 | return ( 58 | 59 |
    60 | 61 |
    70 | DONATE NOW: 71 |
    72 |
    80 | 81 | 82 | 83 |
    84 |
    91 | 96 | 97 | 98 | 99 | 100 |

     

    101 | 102 |
    103 |
    104 | ); 105 | 106 | } -------------------------------------------------------------------------------- /challenge/src/components/SponsorFormButton.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Modal} from '@mui/material'; 3 | import {Typography} from '@mui/material'; 4 | import {Box} from '@mui/material'; 5 | import {useState} from 'react'; 6 | 7 | import Button from '@material-ui/core/Button'; 8 | 9 | const RandomImage = (props) => { 10 | 11 | const ModalStyle = { 12 | textAlign: 'center', 13 | position: 'absolute', 14 | top: '50%', 15 | left: '50%', 16 | transform: 'translate(-50%, -50%)', 17 | width: 500, 18 | bgcolor: "red", 19 | border: '2px solid #000', 20 | boxShadow: 24, 21 | p: 4, 22 | }; 23 | 24 | 25 | const [modOpen, setModOpen] = useState(false); 26 | const handleOpen = () => setModOpen(true); 27 | const handleClose = () => setModOpen(false); 28 | 29 | const stars = " \u2728 ".repeat(props.rating); 30 | const spaces = props.sponserName !== "" ? " " + props.sponserName: ""; 31 | 32 | 33 | if(!props.show){ 34 | return ( 35 | 41 | 42 | 43 | Amount cannot be empty, 0, or negative values. Try again" 44 | 45 | 46 | 47 | 48 | ) 49 | } 50 | 51 | else if (props.rating === 0){ 52 | 53 | return( 54 | 55 | 61 | 62 | 63 | Sponsor alert: With the amount that{spaces!== "" ? spaces: " you"} donated, you are too broke to be a sponsor 64 | 65 | 66 | 67 | 68 | 69 | ) 70 | } 71 | 72 | 73 | return( 74 | 75 | 81 | 82 | 83 | {stars}

    84 | {props.rating} star sponser! 85 |     86 | 87 | Thank you{spaces}! 88 | 89 | 90 | 91 | 92 |     93 |     94 | 95 |     96 | ) 97 | } 98 | 99 | export default RandomImage 100 | 101 | -------------------------------------------------------------------------------- /challenge/src/components/Table.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import TableMUI from '@material-ui/core/Table'; 3 | import TableBody from '@material-ui/core/TableBody'; 4 | import TableCellMUI from '@material-ui/core/TableCell'; 5 | import TableContainer from '@material-ui/core/TableContainer'; 6 | import TableHead from '@material-ui/core/TableHead'; 7 | import TableRow from '@material-ui/core/TableRow'; 8 | import { withStyles, makeStyles } from '@material-ui/core/styles'; 9 | const TableCell = withStyles((theme) => ({ 10 | head: { 11 | backgroundColor: theme.palette.secondary.dark, 12 | color: theme.palette.common.white, 13 | }, 14 | body: { 15 | fontSize: 14, 16 | backgroundColor: theme.palette.primary.main, 17 | color: theme.palette.common.white, 18 | }, 19 | }))(TableCellMUI); 20 | 21 | function createData(sign, date, percentage) 22 | { 23 | return {sign, date, percentage}; 24 | } 25 | const rows = [ 26 | createData('Scorpio', 'October 23rd to November 21st', '9.6%'), 27 | createData('Virgo', 'August 23rd to September 22nd', '9.4%'), 28 | createData('Gemini',' May 21st to June 20th', '9.3%'), 29 | createData('Pisces',' February 19th to March 20th', '9.1%'), 30 | createData('Libra ','September 23rd to October 22nd ','8.8% '), 31 | createData('Cancer ','June 21st to July 22nd ','8.5% '), 32 | createData( 'Taurus ','April 20th to May 20th ', '8.3% '), 33 | createData( 'Capricorn ', 'December 22nd to January 19th ', '8.2% '), 34 | createData( 'Aries ','March 21st to April 19th ','8.1% '), 35 | createData('Sagittarius ','November 22nd to December 21st ','7.3% '), 36 | createData( 'Leo ','July 23rd to August 22nd ', '7.1% '), 37 | createData('Aquarius ','January 20th to February 18th ','6.3% ') 38 | ]; 39 | 40 | class Table extends Component { 41 | state = {} 42 | constructor(props) { 43 | super(props); 44 | } 45 | 46 | render () { 47 | return ( 48 | 49 | 50 | 51 | 52 | Rank 53 | Sign 54 | Dates 55 | % of US Population 56 | 57 | 58 | 59 | {rows.map((row, index) => ( 60 | 61 | {index+1} 62 | {row.sign} 63 | {row.date} 64 | {row.percentage} 65 | 66 | ))} 67 | 68 | 69 | 70 | ); 71 | } 72 | } 73 | export default Table; -------------------------------------------------------------------------------- /challenge/src/components/chat/ChatBox.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import styles from './ChatBox.module.css'; 3 | import Troll from "../images/Troll.png"; 4 | import ChatMessage from './ChatMessage'; 5 | 6 | export default class ChatBox extends Component { 7 | 8 | constructor(){ 9 | super(); 10 | this.state1 = { 11 | diffX: 0, 12 | diffY: 0, 13 | dragging: false 14 | } 15 | 16 | this.dragStart = this.dragStart.bind(this); 17 | this.dragging = this.dragging.bind(this); 18 | this.dragEnd = this.dragEnd.bind(this); 19 | 20 | 21 | } 22 | 23 | dragStart(e) { 24 | this.setState({ 25 | diffX: e.screenX - e.currentTarget.getBoundingClientRect().left, 26 | diffY: e.screenY - e.currentTarget.getBoundingClientRect().top, 27 | dragging: true 28 | }); 29 | } 30 | 31 | dragging(e) { 32 | document.addEventListener('mousemove', e =>{ 33 | if(this.state.dragging) { 34 | var left = e.screenX - this.state.diffX; 35 | var top = e.screenY - this.state.diffY; 36 | this.setState({ 37 | styles: { 38 | left: left, 39 | top: top 40 | } 41 | }); 42 | } 43 | }); 44 | 45 | 46 | } 47 | 48 | dragEnd(e) { 49 | if(this.state.dragging){ 50 | document.addEventListener('mouseup', e =>{ 51 | this.setState({ 52 | dragging: false 53 | }); 54 | }); 55 | } 56 | 57 | this.setState({ 58 | dragging: false 59 | }); 60 | 61 | } 62 | state = {messages: [], question: ''} 63 | 64 | onChange = e => this.setState({question: e.target.value}) 65 | onSend = () => { 66 | if (this.state.question === '') 67 | return; 68 | 69 | this.setState(state => ({ 70 | messages: [{ 71 | from: 'You', 72 | message: state.question, 73 | date: new Date().toLocaleTimeString(), 74 | }, ...state.messages], 75 | question: '', 76 | })); 77 | 78 | function randomArrayIndex() 79 | { 80 | const randArray = ["I'm sorry, I don't have that information. But did you know that the sky is blue?", 81 | "I'm not sure what you're asking. Have you tried turning it off and on again?", 82 | "Hmmm, that's an interesting question. But have you considered taking a break and going for a walk instead?"]; 83 | const rand = Math.floor(Math.random() * randArray.length); 84 | return randArray[rand]; 85 | 86 | } 87 | 88 | setTimeout(() => this.setState(state => ({ 89 | messages: [{ 90 | from: 'ReactMent Bot', 91 | message: randomArrayIndex(), 92 | date: new Date().toLocaleTimeString(), 93 | }, ...state.messages], 94 | })), 500); 95 | setTimeout(() => this.setState(state => ({ 96 | messages: [{ 97 | from: 'ReactMent Bot', 98 | message: , 99 | date: new Date().toLocaleTimeString(), 100 | }, ...state.messages], 101 | })), 500); 102 | } 103 | 104 | 105 | render() { 106 | return ( 107 |
    108 | ReactMent Help 109 |
    110 | {this.state.messages.map((msg, i) => ())} 111 |
    112 |
    113 | e.key === 'Enter' && this.onSend()} /> 119 | > 120 |
    121 |
    122 | ); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /challenge/src/components/chat/ChatBox.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: absolute; 3 | bottom: 0px; 4 | right: 40px; 5 | 6 | width: 350px; 7 | height: 400px; 8 | 9 | display: flex; 10 | flex-direction: column; 11 | 12 | background-color: white; 13 | font-family: sans-serif; 14 | 15 | border: 1px solid black; 16 | border-top-left-radius: 8px; 17 | border-top-right-radius: 8px; 18 | } 19 | 20 | .title { 21 | display: block; 22 | padding: 8px; 23 | 24 | background-color: #cc0033; 25 | color: #eee; 26 | font-size: 18px; 27 | font-weight: bold; 28 | 29 | border-top-left-radius: 8px; 30 | border-top-right-radius: 8px; 31 | } 32 | 33 | .body { 34 | display: flex; 35 | flex-direction: column-reverse; 36 | flex: 1; 37 | 38 | overflow: auto; 39 | } 40 | 41 | .footer { 42 | display: flex; 43 | flex-direction: row; 44 | 45 | border-top: 1px solid black; 46 | } 47 | 48 | .footer input { 49 | flex: 1; 50 | 51 | padding: 10px; 52 | font-size: 14px; 53 | 54 | border: none; 55 | } 56 | 57 | .footer span { 58 | padding: 10px 14px; 59 | 60 | background-color: #cc0033; 61 | color: #eee; 62 | font-size: 18px; 63 | font-weight: bold; 64 | 65 | cursor: pointer; 66 | } 67 | -------------------------------------------------------------------------------- /challenge/src/components/chat/ChatMessage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './ChatMessage.module.css'; 3 | 4 | export default function ChatMessage({from, message, date}) { 5 | return ( 6 |
    7 |
    {from}
    8 |
    9 |
    10 | {from} 11 | {date} 12 |
    13 | {message} 14 |
    15 |
    16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /challenge/src/components/chat/ChatMessage.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | padding: 15px 10px; 4 | 5 | } 6 | 7 | .badge { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | margin-right: 10px; 12 | 13 | width: 40px; 14 | height: 40px; 15 | 16 | border-radius: 100%; 17 | background-color: #cc0033; 18 | } 19 | 20 | .badge span { 21 | font-size: 0; 22 | color: #eee; 23 | } 24 | 25 | .badge span:first-letter { 26 | font-size: 18px; 27 | } 28 | 29 | .body { 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: space-between; 33 | flex: 1; 34 | 35 | } 36 | 37 | .header { 38 | display: flex; 39 | justify-content: space-between; 40 | } 41 | 42 | .from { 43 | font-weight: bold; 44 | } 45 | 46 | .date { 47 | font-size: 13px; 48 | font-weight: lighter; 49 | 50 | opacity: 0.3; 51 | } 52 | -------------------------------------------------------------------------------- /challenge/src/components/images/ElonMusk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/ElonMusk.png -------------------------------------------------------------------------------- /challenge/src/components/images/HackRUlogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/HackRUlogo.jpg -------------------------------------------------------------------------------- /challenge/src/components/images/KrabbyPatty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/KrabbyPatty.png -------------------------------------------------------------------------------- /challenge/src/components/images/Maguire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/Maguire.png -------------------------------------------------------------------------------- /challenge/src/components/images/Party_Parrot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/Party_Parrot.gif -------------------------------------------------------------------------------- /challenge/src/components/images/Troll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/Troll.png -------------------------------------------------------------------------------- /challenge/src/components/images/dislike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/dislike.png -------------------------------------------------------------------------------- /challenge/src/components/images/fries.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/fries.jpg -------------------------------------------------------------------------------- /challenge/src/components/images/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/like.png -------------------------------------------------------------------------------- /challenge/src/components/images/mando.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/components/images/mando.jpg -------------------------------------------------------------------------------- /challenge/src/components/jokesData.json: -------------------------------------------------------------------------------- 1 | { 2 | "list": [ 3 | "If Bill Gates had a dime for every time Windows crashed ... Oh wait, he does.", 4 | "There are only 10 kinds of people in this world: those who know binary and those who don't.", 5 | "Debugging: Removing the needles from the haystack.", 6 | "Debugging is like being the detective in a crime movie where you're also the murderer at the same time.", 7 | "UDP is better in the COVID era since it avoids unnecessary handshakes." 8 | ] 9 | } -------------------------------------------------------------------------------- /challenge/src/components/memesStyles.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | display: grid; 3 | grid-template-columns: 35% 35%; 4 | /* width: 80%; */ 5 | justify-content: center; 6 | padding-bottom: 5%; 7 | } 8 | .meme { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | transition: 0.3s; 13 | cursor: pointer; 14 | border:black; 15 | border:20px; 16 | } 17 | 18 | .meme:hover {opacity: 0.7;} 19 | 20 | /*code below taken from https://www.w3schools.com/howto/howto_css_modal_images.asp*/ 21 | 22 | /* The Modal (background) */ 23 | .modal { 24 | display: none; /* Hidden by default */ 25 | position: fixed; /* Stay in place */ 26 | z-index: 1; /* Sit on top */ 27 | padding-top: 100px; /* Location of the box */ 28 | left: 0; 29 | top: 0; 30 | width: 100%; /* Full width */ 31 | height: 100%; /* Full height */ 32 | overflow: auto; /* Enable scroll if needed */ 33 | background-color: rgb(0,0,0); /* Fallback color */ 34 | background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ 35 | } 36 | 37 | /* Modal Content (image) */ 38 | .modal-content { 39 | margin: auto; 40 | display: block; 41 | width: 80%; 42 | opacity: 1 !important; 43 | max-width: 1200px; 44 | } 45 | 46 | .modal-close:hover, 47 | .modal-close:focus { 48 | color: #bbb; 49 | text-decoration: none; 50 | cursor: pointer; 51 | } 52 | 53 | .video { 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | margin: 0; 58 | padding: 0 0 100px 0; 59 | } -------------------------------------------------------------------------------- /challenge/src/components/newsStyles.css: -------------------------------------------------------------------------------- 1 | .newsContainer { 2 | padding: 0; 3 | margin: 0; 4 | text-align: center; 5 | 6 | } 7 | .articleList { 8 | 9 | background-color: transparent; 10 | padding: 0; 11 | margin: 0; 12 | } 13 | .article { 14 | display: block; 15 | 16 | } 17 | .article:hover { 18 | background-color: orange; 19 | text-decoration: none; 20 | } -------------------------------------------------------------------------------- /challenge/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | import * as serviceWorker from "./serviceWorker"; 5 | 6 | 7 | let main = (useServiceWorker) => { 8 | ReactDOM.render(, document.getElementById("root")); 9 | if (useServiceWorker) { 10 | serviceWorker.register(); 11 | } else { 12 | serviceWorker.unregister(); 13 | } 14 | } 15 | 16 | main(false); 17 | -------------------------------------------------------------------------------- /challenge/src/mandalorian/BabyYoda.css: -------------------------------------------------------------------------------- 1 | .baby-yoda { 2 | position: relative; 3 | } 4 | 5 | .baby-yoda > div { 6 | left: 50%; 7 | position: absolute; 8 | text-align: center; 9 | transform: translateX(-50%); 10 | } 11 | 12 | .baby-yoda h1, .baby-yoda img:last-child { 13 | opacity: 0; 14 | transition: opacity 1s; 15 | } 16 | 17 | .baby-yoda h1 { 18 | font-family: Impact, sans-serif; 19 | } 20 | 21 | .baby-yoda h1:first-child { 22 | margin-bottom: 0; 23 | } 24 | 25 | .baby-yoda h1:last-child { 26 | margin-top: 0; 27 | } 28 | 29 | .baby-yoda > div > div { 30 | position: relative; 31 | width: 20rem; 32 | } 33 | 34 | .baby-yoda img:first-child { 35 | border-radius: 30%; 36 | width: 100%; 37 | } 38 | 39 | .baby-yoda img:last-child { 40 | left: 4.7rem; 41 | position: absolute; 42 | top: .4rem; 43 | transform: rotate(-5deg); 44 | width: 60%; 45 | } 46 | -------------------------------------------------------------------------------- /challenge/src/mandalorian/BabyYoda.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import BabyYodaURI from "./baby-yoda.jpg"; 3 | import ThugLifeGlassesURI from "./thug-life-glasses.png"; 4 | import "./BabyYoda.css"; 5 | import strings from "../strings.json"; 6 | 7 | export default class BabyYoda extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | loadState: 0 12 | }; 13 | } 14 | 15 | render() { 16 | let inner = document.querySelector('.baby-yoda div'); 17 | let height = '0px'; 18 | if (inner) { 19 | height = '' + inner.clientHeight + 'px'; 20 | } 21 | return ( 22 |
    23 |
    24 |

    Touch This

    25 |
    26 | {strings.babyYodaAlt} 27 | {strings.thugLifeGlassesAlt} 28 |
    29 |

    You Cannot

    30 |
    31 |
    32 | ); 33 | } 34 | 35 | onImageLoad = () => { 36 | this.setState(state => { 37 | return {loadState: state.loadState + 1}; 38 | }, () => { 39 | if (this.state.loadState === 2) { 40 | this.animate(); 41 | } 42 | }); 43 | }; 44 | 45 | animate = () => { 46 | setTimeout(() => {if (document.querySelector('.baby-yoda h1:first-child') != null ) document.querySelector('.baby-yoda h1:first-child').style.opacity = 1}, 250); 47 | setTimeout(() => {if (document.querySelector('.baby-yoda h1:last-child')!= null) document.querySelector('.baby-yoda h1:last-child').style.opacity = 1}, 500); 48 | document.querySelector('.baby-yoda img:last-child').style.opacity = 1; 49 | }; 50 | 51 | onImageHover = () => { 52 | if (this.state.loadState === 2) { 53 | const maxWidth = document.querySelector('.baby-yoda').getBoundingClientRect().width; 54 | const container = document.querySelector('.baby-yoda > div'); 55 | const containerWidth = container.getBoundingClientRect().width; 56 | let x = container.style.left ? parseFloat(container.style.left.slice(0, -1)) * maxWidth / 100 : parseFloat(getComputedStyle(container).left.slice(0, -2)); 57 | 58 | // const leftMin = 0; 59 | const leftMax = x - containerWidth; 60 | const rightMin = x + containerWidth; 61 | const rightMax = maxWidth - containerWidth; 62 | 63 | if (leftMax < 0) { 64 | if (rightMax >= rightMin) { 65 | x = rightMin + Math.random() * (rightMax - rightMin); 66 | } 67 | } else if (rightMax < rightMin) { 68 | x = Math.random() * leftMax; 69 | } else { 70 | x = Math.random() * (maxWidth - containerWidth) <= leftMax ? Math.random() * leftMax : rightMin + Math.random() * (rightMax - rightMin); 71 | } 72 | 73 | container.style.left = `${x / maxWidth * 100}%`; 74 | container.style.transform = `translateX(-${container.style.left})`; 75 | } 76 | }; 77 | } 78 | -------------------------------------------------------------------------------- /challenge/src/mandalorian/baby-yoda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/mandalorian/baby-yoda.jpg -------------------------------------------------------------------------------- /challenge/src/mandalorian/thug-life-glasses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackRU/Reactment/3ab2e5424ccfeb983519bc75a7a7c31c1ab12a6f/challenge/src/mandalorian/thug-life-glasses.png -------------------------------------------------------------------------------- /challenge/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' } 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready.then(registration => { 134 | registration.unregister(); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /challenge/src/strings.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The Bold Title Above the Greeting lolololol", 3 | "greeting": "Welcome to Reactment, RnD's Interview Sandbox!! Feel Free to Explore! Reactment is not HTML. #Im19andThisIsDeep.", 4 | "babyYodaAlt": "Baby Yoda", 5 | "thugLifeGlassesAlt": "Thug life glasses" 6 | } 7 | -------------------------------------------------------------------------------- /challenge/src/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /challenge/src/test/sum.test.js: -------------------------------------------------------------------------------- 1 | import {sum} from "../App.jsx"; 2 | import {render, fireEvent, screen} from '@testing-library/react' 3 | import '@testing-library/jest-dom' 4 | import * as React from 'react' 5 | import Jokes from "../components/Jokes.jsx" 6 | 7 | describe("sum",()=>{ 8 | test("Sums an array correctly",()=>{ 9 | expect(sum([0,1,2,3,0])).toBe(6); 10 | expect(sum([0,0,0,0,1])).toBe(1); 11 | expect(sum([5,5,5,5])).toBe(20); 12 | }) 13 | test("Handles an empty array input",()=>{ 14 | expect(sum([])).toBe(0); 15 | }) 16 | }) 17 | 18 | test('check if likes are registared', async () => { 19 | render() 20 | 21 | fireEvent.click(screen.getByAltText(/Dislike button/i)) 22 | 23 | expect(screen.getByRole("jokeCount")).toHaveTextContent('-1') 24 | }) -------------------------------------------------------------------------------- /challenge/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | theme: { 4 | extend: { 5 | keyframes: { 6 | 'gradient-x': { 7 | '0%, 100%': { 'background-position': '0% 50%' }, 8 | '50%': { 'background-position': '100% 50%' }, 9 | }, 10 | }, 11 | animation: { 12 | 'gradient-x': 'gradient-x 15s ease infinite', 13 | }, 14 | colors: { 15 | 'soft-pink': '#f8cdd2', 16 | 'soft-purple': '#d3b2db', 17 | 'soft-blue': '#d0e1f9', 18 | 'soft-white': '#fefefe', 19 | }, 20 | }, 21 | }, 22 | plugins: [], 23 | }; 24 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Reactment", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | --------------------------------------------------------------------------------