hackru / reactment Goto Github PK

Description
Level 3
Everyone’s favorite thing to do… bug fixes! Try to fix the following bugs without killing baby yoda.

1. Baby Yoda covers the navbar when you scroll
2. The Navbar doesn’t let you switch pages when you scroll down.
3. Rapidly switch between the home, sponsors and about pages, a bug occurs (Why? Can you fix it?)

Description
Level 3
In the Contact Us page, add a way for users to rate their experience out of 5 (1 being worst, 5 being best). Take the average of these ratings and find a way to display it graphically. This graphic should be modified every time the average changes. If our average rating is above 4.2, then our website is certified fresh. Find a way to make our users know if we’re certified fresh!

Description

Level 2

THIS PAGE NEEDS MORE BABY YODA!

Description

Level 1

Add a help button for confused users. don't connect it to anything, because we don't have enough money in the budget to actually help them. Extra points if you can figure out whatever the opposite of help would be in this context.

Description

Level 3

currently the number logger feature sends all the numbers to the console. make it so that instead, it lists out all the numbers in an li so the user can see them without opening the console.

Description

Level 3

let's spice up this website's homepage by listing out hackru announcements from slack. using the js fetch function you can get some public anouncements from our backend using the url https://api.hackru.org/prod/dayof-slack. if you just go to that url in your browser you can see what the data looks like. important make sure you only call fetch when a component is initialized using a react stateful component or useState hook. this ensures there aren't excessive requests when the page is updated, like when you use the "log me" button

Description
Level 2
Display the HackRU logo in a header above the Navbar. Add an animation to it when you load the page!

Description

Level 1

When there’s only 1 person left alive on the about page (after Thanos snapped everyone else away), display an error message saying “Thanos’ fingers are sore!” if the user clicks on the Thanos snap again. We don’t want Thanos to get arthritis do we?

Description

Level 3

I don't like how the text just appears. Add a fade in effect!

Description

Level 1

adjust the button that says "go to github" to instead say "go to HackRU's github"

Description

Level 3

Now that we have an improved nav bar, let's put it to work

• add a callback to the constructor of the Navbar component to notify the parent component when the user selects a different page
• add state to the app component to display different content when the user selects a different option on the nav bar

All current contend should be considered part of the home page, and the home page should be the default one

Description
Level 2
Hide an image of a Krabby Patty somewhere on one of the pages that prints “Are you feeling it now Mr. Krabs?!?” into the console when clicked on.

Description

Level 2

Monetize this app! add a side bar to display whatever add you want on the side (keep it pg13). bonus points if you can get it to pick a random add from a handfull

Description

Level 2

This help button is useless… what should we do?
When a user clicks on the help button in the homepage - refresh the page (states of everything should reset)

Description

Level 1

There is some noisy log statement in the console! Remove it.

Description

Level 2

Woah this looks really plain. Maybe we should add a button that routes the user to the HackRU GitHub underneath the greeting?

Description

Level 2

Center the text vertically on the page.

Description

Level 2

This site needs more JIFs ... or GIFs ... or whatever. feel free to get creative with your gif choice but keep it pg13

Description
Level 1
Change color of the banner background behind the pictures in the sponsors and about pages to green.

Description

Level 1

Add Party Parrot to the homepage and make him dance!

Description

Level 2

use the Date class to display the current month and year. Just in case any time travelers come wandering into our app.

Description

Level 2

Create a useful gitignore in the root directory. Bonus points if its uselessly useful, whatever that means

Description

Level 1

Seriously, "Hello World"? Do us all a favor and change that to something more meaningful that is more representative of what Reactment is.

Description
Level 1
Add a picture of the most fun fictional character or celebrity you know into the fun facts page with a fun fact of that person below the picture as a caption.

Description

Level 2

This isn't an English essay! We hate times new roman! Pick a Google font, and include it on the website.

Description
Level 3
Reality can be whatever we want it to be!

1. Change the about page so that there are 4 images in a 2 by 2 grid. These images can be of anyone from your favorite TV shows (though to be consistent with the title, I recommend Jojo’s Bizarre Adventure).
2. Add captions to each of these pictures.
3. Add a button that when clicked on, eliminates half the characters on the page when clicked.
4. Add a cool animation when the characters disappear

Description
Level 1
Move the Donate Now sponsor form below the pictures to above the pictures in the Sponsors page.

Description

Level 3

We need to prove time is real! What better way to do that than with pictures? In the home page, replace the date ("It is Month Year”) with a Calendar that shows the date/month.
You can choose to implement this however you like. One starting place you may want to look at is Google’s Calendar API [you will need a Google API key for this].

Description

Level 1

Rework the navbar so that instead of having 6 separate tabs, we only have 3: Home, About, and Contact us. Move “Sponsors”, “Announcements”, and “Fun Facts” as sub tabs under About.

Description
Level 3
Create a form with the following features:

• User should be able to type in the message they want to announce into the form
• The user should be able to select the type of announcement it is (Update, Warning, Critical)
• Display the announcement in the home page when the user submits the form
• The announcement should be wrapped in a box that is a different color depending on the type of announcement (update - blue, warning - yellow, critical - red?)

Description

Level 1

Sometimes, I don't even know if I'm rendering! Add a log statement in the render method so that I know whenever the render method is executed.

Description
Level 2
Add a new page full of your favorite memes (keep it PG). Make it such that a random meme shows up every time you load the page.

Description

Level 1

have the contact page generate a random email and phone number to display on the contact page. perhaps someone may find it "helpful"

Description

Level 2

add a counter to say how many time's the page has viewed. we haven't figured out a good way to track this yet so feel free to just display a random number! (preferably a big one)

Description

Level 2

Honestly, the white background is a bit boring. Change the color.

Description

Level 2

lets add a way for people to become sponsors. on the sponsor page add a form that asks people for their name, a donation amount, and a "become a sponsor" button. when they click the button it should print their name and contribution amount to the console. for bonus points you can instead list the names and contribution amounts on the page itself instead using a react stateful component, or the react useState hook.

Description
Level 1
Replace the images in the Contact Page with instructions on how to contact the Ghostbusters!

Description

Level 1

We don’t want the world to know the secret to the Krabby Patty formula! Move the Krabby Patty from Home to Fun Facts and make it have a transparent background.

Description

Level 3

add an html <table> with some interesting data points. the data can be about anything including horses, box office data, leap years, ect... get creative!

Description

Level 2

Display a random joke every time you enter the Fun Facts page. In addition, add a thumbs up/down button next to the joke for the user to click on if they liked or disliked the joke. If they disliked the joke, display a new joke and reset the thumbs up/down buttons.

Description

Level 3

add a fake live chatbox to the contact us page. the ai behind this will be highly sophisticated: whenever the user asks the bot a question it will always respond with "I didn't quite understand that, please try rephrasing what you said." you will need to create a chatbox component that is either a react stateful component, or uses the useState react hook. it should list out all the messages from the user and the "bot", have a text input for the user to type a message, and a send button that "sends" the message. this one is a bit complicated so feel free to ask lots of questions

Description
Level 1
Format the home page such that there is a bold title above the greeting. The title and greeting should be on separate lines and taken from strings.json
(Title: HackRU Reactment Challenge
Greeting: Welcome to Reactment, RnD's Interview Sandbox!! Feel Free to Explore! Reactment is not HTML. #Im19andThisIsDeep.)

Description
Level 2
Next to the date displayed in the home page, write how many days until the fall 2020 semester begins (xx days until Fall 2020 Begins!) . If this number reaches zero, display that the Semester has begun, if it is negative, display that the Semester is in progress.

Description

Level 1

scrolling is s o o o o much effort. move the zodiac table and skeleton gifs from the home page to the about page so you can click there instead of having scroll. this also means people can focus more on baby yoda.

Description

Level 3

add a number <input> and a button. when a user pushes the button it should print the number in the console.
@shivanmodha should this be 3 or 2. dm me

Description
Level 2
The Thanos snap needs to be random! Modify the Thanos snap such that it randomly determines which characters get disintegrated rather than having it predetermined. If Star Platinum gets disintegrated, output "Unbalanced!" into the console.

Description

Level 2

When someone clicks “Become a Sponsor Now” in the sponsor’s page, list their name somewhere in the sponsor’s page. In addition, give them a rating based on how much they donated.

Description

Level 3

add an automated test for the sum function in App.jsx. Use the already included jest library and npm test to run the tests

Description

Write a UI that takes a text sentence as a string and returns a string with all the contractions instead (ie. "is not" becomes "isn't"). Convert at least [should, could, would, do, is, are, does, have] not => []n't and [should, could, would] have => []'ve. Many may occur in a sentence. Words will be delimited by single spaces and will not contain punctuation.

Trivia

This is actually the first ever RnD interview question! The interview process was very different, so the above is a shorter version of the question. The whole question was:

1. Write a function that takes a sentence as a string and returns a string with all the contractions instead (ie. "is not" becomes "isn't"). Convert at least [should, could, would, do, is, are, does, have] not => []n't and [should, could, would] have => []'ve. Many may occur in a sentence. Words will be delimited by single spaces and will not contain punctuation.
2. Multiple contractions can be chained in some cases: there's a famous Southern "y'all'd've" (you all would have) which y'all'd'ven't (you all would have not) heard of if y'all'evn't (you all have not (I may be making this one up)) been to the South. Additionally, Scottish slang allows for "am not" to be written as "amn't," which ain't different from "ain't." Design an app to let users input sentences and get shortened (or even expanded) ones back. How would you allow them to conveniently configure your tool to handle all sorts of contractions (even their own, or their own odd chains)?

Description

Level 3

What kinda site lacks a navbar? Implement a sticky navbar!