Detailed Explanation
Most of the styles added in the dashboard to the HTML elements are done using inline CSS style. However, we need to convert all the Inline CSS style to embed CSS Style upon request by the user.
style="background-color: #de3423;"
CONVERT TO
<style>
.something{
background-color: #de3423;
}
</style>
Questions
Can you write some lines of code that can handle this action?
What if a style attribute is given but no class?
Step 1 - Create a Page called "inline_2_embedded.html "
Step 2 - Add 2 textarea HTML tags and a button
### Explanation
The first textarea will be used to receive the entire html code. The second textarea will be used to display the newly converted html content with no inline CSS style but embedded style. The button can be used by the user to initiate the conversion process.
### Algorithm
Algo 1
If we convert the text provided in the first textarea to an HTML Object, We can move from one element to another getting the attribute of style and if the attribute of style is not empty, we can provide a data-id or data-kwickerhub attribute that we can use to reference the element in our embedded sheet.
Algo 2
We can instead of using the first Algorithm, adopt a search, copy and replace technique. The goal will be to search for "style=" and copy the content between the quotation marks into our embedded style while replacing it with a data reference attribute. e.g:
<div data-kwickerhub="hasStyle1"></div>
Good-luck...