Task
1.) Implement Design A (only red circled portion). Use the <button> element to create the "Find City" button. Add the existing primary class (already defined in global.css) to the button to use the standardized styling. Add additional styling in components/preferences/preferences.css to make the button look like Result A (below).
Styling Notes: You can apply the following styling to the button to achieve the desired design: font-size: 2.5em, padding: 5px 10px, and margin-top: 20px.
2.) Add an onclick event attribute to your button that temporarily calls alert and displays some random message just to verify it properly works.
3.) [Optional Challenge] Add the "Back" button, as seen in Design A. You can put the button in the same code location as the "Find City" button, but you may have to do some additional positioning (e.g., using the float and/or margin CSS attributes).
Files
You will find comments in components/preferences/preferences.js and components/preferences/preferences.css that tells you where to write your code.
Task 1.) Implement
Design A(only red circled portion). Use the<button>element to create the "Find City" button. Add the existingprimaryclass (already defined inglobal.css) to the button to use the standardized styling. Add additional styling incomponents/preferences/preferences.cssto make the button look likeResult A(below).font-size: 2.5em,padding: 5px 10px, andmargin-top: 20px.2.) Add an
onclickevent attribute to your button that temporarily callsalertand displays some random message just to verify it properly works.3.) [Optional Challenge] Add the "Back" button, as seen in
Design A. You can put the button in the same code location as the "Find City" button, but you may have to do some additional positioning (e.g., using thefloatand/ormarginCSS attributes).Files You will find comments in
components/preferences/preferences.jsandcomponents/preferences/preferences.cssthat tells you where to write your code.Resources Button: https://www.w3schools.com/tags/tag_button.asp HTML Classes: https://www.w3schools.com/html/html_classes.asp onclick Event: https://www.w3schools.com/jsref/event_onclick.asp alert: https://www.w3schools.com/jsref/met_win_alert.asp
Design A
Result A