aarora4 / votingchromeextension Goto Github PK

This task is to create the issue reporting form

• Copy the top button bar from the existing code base
• Two labeled text sections with the statement and the rating. These don't have to be interactable, just text
• Issue Type buttons should be radio buttons
• The comment field needs to be a text box so you can type in it
• Submit button should print something for now

There is a lot of stuff here so don't worry if you cant finish it all this week

• Title label
• Make the four other labels, spaced out the same way
• Add a border to the entire card
• Use proper fonts and colors. Official red, green and gray colors are, #FF907C, #8BE5B3, and #707070 respectively

Ignore the two dots at the bottom for now. You can download the fonts on googlefonts. Use JSFiddle again for rapid iteration.

Basically, we can't really do distinct pages in a chrome extension, so we need to write code into functions that return html elements so we can dynamically render the page content. This will let us switch between the report an issue page, the main page, and the detail page.

I found this link that should help you get started: https://stackoverflow.com/questions/17829397/google-chrome-extension-redirect-different-page

If you're having a lot of trouble let me know and I'll look for some more resources.

This issue is responsible for combining the two pages into the carousel and formatting them to look like the mockup.

This task is responsible for making the card that shows a preview of the statement and the rating. It also lets them navigate to the detail screen and see the source.

• Outline the rectangle with a thin border. Add a text tag that has some words in it. Next to that add the two buttons separated by a line.
• Make the two buttons clickable and print something to the console

This task is responsible with making the button for users to filter the identified statements on a given page by their rating

This is the button that is being made. We will just duplicate it three times and change the color.

• Make a button that has a circle, a label, and an outline. Lay out the button as shown in the picture
• Make the button interact-able. For now just make it print something to the console when you click it.
• Layout 3 of the buttons into a bar, as shown in the mockup below.

• Display "slide content" in center of screen. Could be an image but it should be able to work with any div
• Two buttons on either side of "slide content"
• Ability to paginate through the slides
• Indicator of current page below (the dots)

This will combine with the other two tasks this week, who will provide the slide content for you to ultimately display.

Trying to make something like this:

This task is responsible for creating the three buttons that are at the top of the chrome extension.

These buttons include the on/off switch, the flag button, and the exit button.

Tasks:

• Make an on/off button. For now, this button should just be able to switch on and off, and look similar to the mockup. The button doesn't need to be functional yet.
• Make a button that has the flag icon. It should be clickable but it doesn't have to do anything yet.
• Make the exit button as it looks in the mockup. It should be a cross and a circle. This also doesn't need to be hooked up yet
• Make sure all buttons are the same height and are positioned relative to eachother like they are in the mockup

• Circle in the middle with a border of color #707070
• Title label
• Rating (true/false) label
• Learn more label, underlined
• Outline the whole card with a rounded border of color #707070
• Use proper fonts and colors. Official red, green and gray colors are, #FF907C, #8BE5B3, and #707070 respectively

Ignore the two dots at the bottom for now. You can download the fonts on googlefonts. Use JSFiddle again for rapid iteration.