HTML Tag Counter
-
Role
Product Designer & Software Engineer -
Type
Personal Project -
Date
2016 -
Technologies
Angular.js, Node.js, LESS, grunt, bower, CodeMirror, js-beautify
Demo
This project is hosted on Amazon’s EC2 at the following link and the code can be found on GitHub.
Goal
- Create a simple web app, hosted at a URL we can visit.
- Users can enter a URL of a page to fetch.
- The web app fetches the HTML of the page and displays the source to the user.
- A summary of the document is displayed, listing which tags are present in the HTML and how many of each tag.
- Clicking on the name of each tag in the summary will highlight the tags in the source code view.
Features
- Clicking on an element type will highlight the selected elements in the source view and scroll to the first occurrence.
- A search for elements that is useful when the list gets really long.
- URL validation in the HTML form
- Error handling when requests don’t match a content-type of text/html.
- Error handling when requests fail.
- HTML source beautification on the server side using the node js-beautify library.
- Syntax highlighting using the CodeMirror library.
- Support for both mobile and desktop experiences