Skip to content

CodeTerminator is a gem for check and compare html and css code syntaxis.

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt
Notifications You must be signed in to change notification settings

eponce19/CodeTerminator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CodeTerminator

CodeTerminator is a gem that helps to exterminate Sarah Connor parse, evaluate and compare html and css code. Also is useful when you need to check html and css code syntaxis.

##Features

  • HTML parser
  • CSS parser

Installation

Add this line to your application's Gemfile:

gem 'code_terminator'

And then execute:

$ bundle

Or install it yourself as:

$ gem install code_terminator

Quick Start

#####HTML To parse HTML and match the file with html code you just need to do:

    # code = code get from an editor
    # source = Source of the file you want to compare with

    ct = CodeTerminator::Html.new
    result = ct.match(source, code)

If the code and the source mismatch, ct.match() will return an array with the differences between code and source file. You will know that the code and the source file have the same html elements when the ct.match() return a nil array.

	# hola_mundo.html
	# 	<h1>Come with me if you want to live!</h1>
	#
    >> ct.match("hola_mundo.html","<h2>Come with me if you want to live!</h2>")
    #  => [{:element=>{:parent=>"body", :tag=>"p"}, :type=>404, :description=>"p not exist"}]
CSS

To parse CSS and match the file with css code you just need to do:

    # code = code get from an editor
    # source = Source of the file you want to compare with

    ct = CodeTerminator::Css.new
    result = ct.match(source, code)

If the code and the source mismatch, ct.match() will return an array with the differences between code and source file. You will know that the code and the source file have the same css elements when the ct.match() return a nil array.

	# test.css
	# => h1{ margin: 100px; }
	#
    >> ct.match("test.html","h1{ margin: 50px; }")
    #  => [{:element=>{:selector=>"body", :property=>"background-color", :value=>"yellow"}, :type=>111, :description=>"not the same property background-color: yellow in selector body"}]

##Cheat Sheet

###match(source, code) Match if the code have the same elements than the exercise. Return an array with the mismatches.

####HTML

   #   hola_mundo.html
   # => <h1>Come with me if you want to live!</h1>
   >> ct = CodeTerminator::Html.new
   >> ct.match("hola_mundo.html","<h2>Come with me if you want to live!</h2>")
   #  => [{:element=>{:parent=>"body", :tag=>"p"}, :type=>404, :description=>"p not exist"}]
   #

#####CSS

   #   test.css
   # => h1{ margin: 100px; }
   >> ct = CodeTerminator::Css.new
   >> ct.match("hola_mundo.css","h1{ margin: 50px; }")
   #  => [{:element=>{:selector=>"body", :property=>"background-color", :value=>"yellow"}, :type=>111, :description=>"not the same property background-color: yellow in selector body"}]

   #

######Errors description The errors that throw match() are in json format to help you to identify each error type as the following:

  # [element, error_type, description]
  [{:element=>{:selector=>"body", :property=>"background-color", :value=>"yellow"}, :type=>111, :description=>"not the same property background-color: yellow in selector body"}]

Errors Types

  • 101 : Css property not found
  • 111 : Different css property in the selector
  • 330 : Different text in the html tag
  • 333 : Different value in the html attribute
  • 334 : Html attribute doesn't exist in the tag
  • 335 : If original Html attribute is blank it can't be empty
  • 404 : Element not found
  • 440 : Tag not found in the parent tag

###new_file(source, code) DEPRECATED, not available in 0.6.0 and above Create a Html/Css file with the code of the editor. Return a boolean that indicate if the file was created or not. #####HTML

    >> ct = CodeTerminator::Html.new
    >> ct.new_file("hola_mundo.html", "<h1>Come with me if you want to live!</h1>")
    #   => true

#####CSS

    >> ct = CodeTerminator::Css.new
    >> ct.new_file("hola_mundo.css", "h1{ margin: 50px; }")
    #   => true

###read_file(source) DEPRECATED, not available in 0.6.0 and above Read a html file. Return the text of the file. #####HTML

    >> ct = CodeTerminator::Html.new
    >> ct.read_file("hola_mundo.html")
     #   => "<h1>Come with me if you want to live!</h1>"

#####CSS

    >> ct = CodeTerminator::Css.new
    >> ct.read_file("hola_mundo.css")
     #   => "h1{ margin: 50px; }"

###validate_syntax(code) DEPRECATED, not available in 0.6.0 and above Validate if the syntax is correct. Return an array with errors. #####HTML

    >> ct = CodeTerminator::Html.new
    >> ct.validate_syntax("<h1>Come with me if you want to live!</h1")
     #   => [#<Nokogiri::XML::SyntaxError: expected '>'>]

#####CSS

    >> ct = CodeTerminator::Css.new
    >> ct.validate_syntax("h1{ margi")
     #   => ["error"]

###get_elements(source) Get html elements of a html file. Return a list of elements with their properties. #####HTML

    >> ct = CodeTerminator::Html.new
    >> ct.get_elements("hola_mundo.html")
     #   => [{:parent=>"body", :tag=>"div", :attribute=>"class", :value=>"col-md-12"}, {:parent=>"div", :tag=>"h1"}, {:parent=>"h1", :tag=>"text", :content=>"Come with me if you want to live!"}]

#####CSS

    >> ct = CodeTerminator::Css.new
    >> ct.get_elements("hola_mundo.css")
     #   => [{:selector=>"h1"}, {:selector=>"h1", :property=>"margin", :value=>"50px"}]

###get_instructions(source) DEPRECATED, not available in 0.6.0 and above Get the instructions to recreate the html code. Return an array with strings . #####HTML

    >> ct = CodeTerminator::Html.new
    >> ct.get_instructions("hola_mundo.html")
     #   => ["Add the tag h2 in body", " In h2 add the text 'hola test' ", "Add the tag p in body"]

#####CSS

    >> ct = CodeTerminator::Css.new
    >> ct.get_instructions("hola_mundo.css")
     #   => ["Create the selector body", "In the selector body add the property ' background-color'  with value 'yellow' "]

###print_elements(source) DEPRECATED, not available in 0.6.0 and above Get the elements of the code in html format. Return a string with elements in html.
#####HTML

     CodeTerminator::Html.print_elements("exercises/hola_mundo.html" )
     #   => "name = h1<br><hr>name = text<br>content = Come with me if you want to live!<br><hr>"
     #

#####CSS

     CodeTerminator::Css.print_elements("exercises/hola_mundo.css" )
     #   => "selector = h1<br><hr>property = margin<br>value = 50px<br><hr>"
     #

##Example An example of an editor using CodeTerminator is available at https://github.com/eponce19/editor_terminator.git

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake test to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment. Run bundle exec code_terminator to use the gem in this directory, ignoring other installed copies of this gem.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/eponce19/code_terminator. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.

About

CodeTerminator is a gem for check and compare html and css code syntaxis.

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages