uzluisf/html-tag-exercise.md

## html-tag-exercise.md

      
    Raw
  

              html-tag-exercise.md
            
          
Design and implement a class (or other data structure) that can represent a single HTML tag.

my $html-tag = Tag.new("html");

Write a function or method that can print/return the HTML string representation of a tag.

say $html-tag.new("html"); #=> "<html></html>"

Extend tag data structure to model class attributes and content.

<html class="blue-theme">content</html>

Write a function or method that can add a class to a tag.

$html-tag.add-class("blue-theme");
say $html-tag; #=> <html class="blue-theme"></html>
$html-tag.add-class("main-content"); 
say $html-tag; #=> <html class="blue-theme main-content"></html>

Extend the tag data structure to allow the addition of child tags. Ensure that the HTML tree is pretty-printed with reasonable indentation and new lines.

my $html-tag = Tag.new("html");
my $body-tag = Tag.new("body");
my $div-tag = Tag.new("div");
$html-tag.append-child($body-tag);
$body-tag.appen-child(div-tag);
Then say $html-tag should output:
<html class="blue-theme">
  <body>
    <div></div>
  </body>
</html>

Add a method or function to traverse the dom and return the first element by selector.

Given $html-tag represented by
<html>
  <body>
    <div class="main-content">
      <span class="some-other-content"></span>
      <p class="some-other-content">
    </div>
  </body>
</html>
Then:
say $html-tag.query-selector(['main-content', 'some-other-content']);
#=> <span class="some-other-content"></span>