Homework answers / question archive / Lab - Webpage Customizer Using the jQuery method css which you can read about here: https://api

Lab - Webpage Customizer Using the jQuery method css which you can read about here: https://api

Computer Science

Share With

---

Lab - Webpage Customizer

Using the jQuery method css which you can read about here: https://api.jquery.com/css/ (Links to an external site.), you can alter the styles of any element that you can select via jQuery.

 

An example of how this works is:

 

$('p').css('color', 'red');

If you ran this on a page that had paragraph tags, all the text of those paragraphs would turn red. The selector targets all p tags and the css method will change the color of all of them to red. This is the same as writing:

 

p {

   color: red;

}

in your CSS, except with JavaScript we can have logic that changes the properties and colors.

We can, for instance, use variables in our JavaScript:

 

let color = 'red';

$('p').css('color', color);

This should give you a sense of how to proceed with the assignment.

This week I want you to create web page that allows the user to control to look of the page by interacting with form elements on the page. The form inputs should directly control the CSS properties of parts of the page using the jQuery css method mentioned above. Your form must have at least three different inputs and at least two different types of inputs (text and select for example). The form elements must be types that have data that can be accessed (clicking a button for instance provides not actual data the way an input or a select would).

Add your form to the top of the page and add an area that will display information about the choices. If you allow the user to change the font, a small area in the top right should display the current font choice in text. Changing the form values should change the text appropriately. The following screenshot shows an example of this. You don't have to use the same form elements or same text, but the general idea should be clearly demonstrated:

 

Requirements

·      Use the starting files that have been provided. The content of the page is pulled from the Wikipedia page about Python.

·      Use the given HTML and adapt it to add your form and form value display area.

·      The form must have a minimum of three inputs and two different input types.

·      Add some CSS to make the page look reasonable when the page first loads.

·      Add in jQuery and your own JavaScript to connect the form to the page styles.

·      Your style chooser form must allow the user to change at least three aspects of the page. (font, sizes, colors, backgrounds...).

·      The selected form values must be displayed in text somewhere else on the page (see example image above).

·      I will award extra credit if you add a forth form element (your page allows you to change four page properties) and all of your form elements use different types of input (select, checkbox, radio, etc.)

 

Note: This assignment has an extra credit component. To earn extra credit you must first earn a perfect score on the base requirements for the assignment.

Download the start file: styler.zip.

 

 

Rubric

Forms Lab Rubric

Forms Lab Rubric

Criteria

Ratings

Pts

Uses HTML form elements

4.0 pts

Full Marks

0.0 pts

No Marks

4.0 pts

CSS changed by JavaScript

4.0 pts

Full Marks

0.0 pts

No Marks

4.0 pts

Code quality

2.0 pts

Full Marks

0.0 pts

No Marks

2.0 pts

Form data collected by JavaScript

4.0 pts

Full Marks

0.0 pts

No Marks

4.0 pts

Event Listeners on form or form elements

2.0 pts

Full Marks

0.0 pts

No Marks

2.0 pts

Displays currently selected choices on the page

4.0 pts

Full Marks

0.0 pts

No Marks

4.0 pts

Extra Credit - Four different HTML form inputs

4.0 pts

Full Marks

0.0 pts

No Marks

4.0 pts

Total Points: 24.0