In this exercise, we're going to play with forms not as tools for sending data to a server, but as a way to allow users to manipulate the DOM using JavaScript. Specifically, we're going to build a form that will allow a user to dynamically change the styles.
The purpose of this drill is to practice using JavaScript to select data a user has entered in a form and pass it to the desired function.
To make it achieve the desired functionality, you need to be familiar with the following concepts:
- Basics of jQuery Events and Event Handling, specifically the
submitevent - The jQuery val() method and css() method
If you bind to the submit event, you should consider using the
event.preventDefault() method provided by jQuery.
Fork this repository before working on the solution.
It may seem obvious what you have to do, but just to make it extra clear what the expected behavior is:
- Enter a CSS selector (e.g.
h1,#header,.faded) into the left input field - Enter a CSS property (e.g.
color,padding,background-color) into the middle input field - Enter a CSS value for the property (e.g. if the property is
color, enter something likeblueor#ff30eb) - Click the button and watch the page transform before your eyes!
Note: Here is a video showing this behavior in action: Style Editor Video
The solution to this exercise can be broken down into three parts:
- retrieving the values from the form,
- passing those values into the correct jQuery function for manipulating CSS, and
- binding the previous two parts to a particular event using an event handler.
If you are having trouble solving this problem, ask yourself the following questions:
- Is my code correctly bound to the appropriate event? If not, how can I test for this?
- Do I know how to retrieve the values from the form?
- Am I correctly passing the user data into the function that modifies the page styles?
Create a PR back to this repository with your completed work. In your PR, include a summary of what was the most challenging part of this challenge.