Taylor Stauss | Take a look at some of the projects I've worked on.

See the Pen FCC: Tribute Page #2 by Taylor Stauss (@ttstauss) on CodePen.

Build a Tribute Page

I had a lot of fun building this tribute page for my dad. I spent quite a bit of time looking at a lot of design examples to establish the look and feel. I selected blue because it's his favorite color followed by a split complementary color. The background image is blurred in order to not take the focus away from the profile. It's of Yosemite, one of our favorite places to visit growing up.

Technologies Used:

HTML 5
CSS 3

Key Techniques Used:

Attempted to use BEM CSS naming standards
Images hosted on Cloudinary to avoid hotlinking
Keyframe animations for expressive UI on page load. Primarily used the transform property with translate and scale
Extensive use of Pseudo-class and Pseudo-elements for timeline
Media Queries for responsive breakpoint (pay attention to how the Header Profile and Timeline change at the 767/768px mark)
Animated hover effect on tribute-link (courtesy of 30 Seconds of CSS)

See the Pen FCC: Survey Form #2 by Taylor Stauss (@ttstauss) on CodePen.

Build a Survey Form

I had a lot of fun building this survey form. I've spent a good part of my career in digital marketing and know how important surveys are and making sure the form looks good and works properly. The data can be invaluable. I also really like Google's Material Design principles. I'm a sucker for clean design.

Technologies Used:

HTML 5
CSS 3

Key Techniques Used:

Attempted to loosely follow Google's Material Design guidelines. While far from perfect, I hope it somewhat resembles the look and feel. It got pretty tricky relying on only CSS and you'll notice some behavior issues (I hope to work those out sometime if possible without Javascript)
Attempted to use BEM CSS naming standards
Extensive use of Pseudo-classes and Pseudo-elements for styling form items. I learned how to use ones I've never seen before like :valid and :checked
Learned how to use complex selectors (including combining them with pseudo selectors). The two I primarily relied on are as follows
- General Sibling Selector or ~
- Adjacent Sibling Selector or +
Animated label and bottom-borders (without dynamically adding classes). I had to really get into how the cascade works in order to animate the labels (i.e. putting the label after the input in order to style properly using the :focus and adjacent sibling selector). I used transition, transform, and translate for the animations. I also had to get rather creative with how to implement the animated bottom-borders

See the Pen FCC: Product Landing Page #2 by Taylor Stauss (@ttstauss) on CodePen.

Build a Product Landing Page

I had a good time designing this page. I've been wanting to design a website for my sister's makeup business for a while and this was a great exercise to do it. I also got to put some of my digital marketing background into play for copy and cta's. There's still a bit more to be done before it's ready for prime-time, but I think it's a good start.

Technologies Used:

HTML 5
CSS 3
Vanilla JavaScript (very little)

Key Techniques Used:

A large amount of my time was focussed on mobile responsiveness, layout, and design.
I got carried away with this project and used a small amount of JavaScript. I wanted to have a mobile menu that transitions out as an overlay from the right side. Primarily used the following methods:
- querySelector
- addEventListener ('click')
- classList.toggle
- childNodes[i]
- forEach
I had to get really familiar with how z-index works. I probably could have used larger values for more flexibility, but I got it working anyhow.
Attempted to use BEM CSS naming standards
Found inspiration for a great hover effect on buttons
Extensive use of background large background images. I learned how to apply a linear-gradient as a way to darken the image a bit if the text contrast was bad

See the Pen FCC: Technical Documentation Page #2 by Taylor Stauss (@ttstauss) on CodePen.

Build a Technical Documentation Page

This was a fun page to create. I chose the R documentation because both of my brothers are data scientists who use R extensively. We always joke about how ugly their documentation pages are. I think a well formatted/designed doc page makes for a much more pleasant developer experience and is important for productivity.

Technologies Used:

HTML 5
CSS 3
Vanilla Javascript (a single function)

Key Techniques Used:

Used the <pre> and <code> to implement the code sections. Getting the formatting right was tricky at times since it includes spacing. Had to use word-wrap and white-space to help with the mobile responsiveness.
The layout is inspired from a layout I commonly see on documentation pages. I accomplished this by applying the CSS Grid properties and structuring the HTML properly.
Attmpted to use BEM CSS naming standards
Used three breakpoints to prevent too many columns getting squished on the screen.
Implemented a dropdown version of the menu. Used a very small snippet of Javascript to anchor the options to the correct spot on the page.

See the Pen Personal Portfolio Webpage #2 by Taylor Stauss (@ttstauss) on CodePen.

Build a Personal Portfolio Webpage

I had already worked on a portfolio page before starting the bootcamp (the site you're currently on), so most of this page is a repeat of what I already had. The biggest difference is that I had used Bootstrap outright originally, in this project I attempted to mimic the look without relying on Bootstrap at all.

Technologies Used:

HTML 5
CSS 3

Key Techniques Used:

Used multiple background images in some section elements
Extensive use of Font Awesome icons
Mimicked Bootstrap styling

JavaScript Algorithms and Data Structures Projects - View Certificate

Palindrome Checker

                      
  function palindrome(str) {
  // set string to lowercase and remove non-alphanumeric characters
  let newStr = str.toLowerCase().replace(/[^a-z0-9]/g, '')
  
  // reverse string for comparison
  let checkStr = newStr.split('').reverse().join('')
  
  // check if strictly equal
  return newStr === checkStr
  }
  
  palindrome("eye");

Roman Numeral Converter

                       
  function convertToRoman(num) {
  
  // set up an array for ones, tens, and hundreds
  let ones = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX']
  let tens = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC']
  let hundreds = ['C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM']
  let res = ''
  
  // Add 'M' for every 1000
  while (num >= 1000) {
    res += 'M'
    num -= 1000
  }
  
  // add appropriate hundreds value
  while (num >= 100) {
    res += hundreds[Math.floor(num/100 - 1)]
    num = num % 100
  }
  
  // add appropriate tens value
  while (num >= 10) {
    res += tens[Math.floor(num/10 - 1)]
    num = num % 10
  }
  
  // add appropriate ones value
  while (num >= 1) {
    res += ones[Math.floor(num - 1)]
    num = 0
  }
  
  return res
  }

Caesars Cipher

                      
  function rot13(str) {
    return (
      str
  
        // split string into array
        .split('')
  
        // map array to new array
        .map(item => {
          // if item was non-alphabetic character ignore it
          if (item.match(/[^\w+]/g)) {
            return item
          } else {
            // return character based on result of calculation
            return String.fromCharCode(
              item.charCodeAt(0) < 78 // if char code is below 78
                ? 90 + (item.charCodeAt(0) - 12 - 65) // find offset from char code 90
                : item.charCodeAt(0) - 13 // find offset from base code
            )
          }
        })
        .join('')
    )
  }
  
  // Change the inputs below to test
  rot13("SERR PBQR PNZC")

Telephone Number Validator

                    
  function telephoneCheck(str) {
    return !!str.match(/^(1\s?)?(\([0-9]{3}\)|[0-9]{3})\-?\s?[0-9]{3}\-?\s?[0-9]{4}$/)
  }
  
  telephoneCheck("555-555-5555");

Cash Register

                    
  function checkCashRegister(price, cash, cid) {
  
    // calculate change
    let change = cash - price
  
    // set up default result object
    let res = {}
  
    // convert cid to object and add up total
    // use .reduce with default object and total prop
    let till = cid.reduce((obj, prop) => {
      obj[prop[0]] = prop[1]
      obj.total += prop[1]
      return obj
    }, { total: 0 })
  
    // check if total is less than change due
    if (till.total < change) {
      res.status = 'INSUFFICIENT_FUNDS'
      res.change = []
      return res
    }
  
    // check is total equals change due
    if (till.total === change) {
      res.status = 'CLOSED'
      res.change = cid
      return res
    }
  
    // set up denominations array
    // reverse to make it easier to work with below
    let denomsArr = [
      ['PENNY', 0.01],
      ['NICKEL', 0.05],
      ['DIME', 0.1],
      ['QUARTER', 0.25],
      ['ONE', 1],
      ['FIVE', 5],
      ['TEN', 10],
      ['TWENTY', 20],
      ['ONE HUNDRED', 100],
    ].reverse()
  
    // track change by denomination
    let changeByDenom = []
  
    // set up empty array for use in loop
    let changeDenom = []
  
    // loop through each denomination
    for (let i = 0; i < denomsArr.length; i++) {
      // set initial change item
      changeDenom = [denomsArr[i][0], 0]
      
      // loop until change is smaller than denomination
      // and if till would dip below zero
      while (change >= denomsArr[i][1] && till[denomsArr[i][0]] > 0) {
  
        // decrement change by the denomination value
        change -= denomsArr[i][1]
  
        // decrement the till by the denomination value
        till[denomsArr[i][0]] -= denomsArr[i][1]
  
        // increment the change value
        changeDenom[1] += denomsArr[i][1]
  
        // fix precision issues
        change = Math.round(change * 100) / 100
      }
      // only return change for denomination if greater than zero
      if (changeDenom[1] > 0) {
        changeByDenom.push(changeDenom)
      }
    }
  
    // check if there is leftover change
    if (change > 0) {
      res.status = 'INSUFFICIENT_FUNDS'
      res.change = []
      return res
    }
  
    // set status and change
    res.status = 'OPEN'
    res.change = changeByDenom
    return res
  }
  
  checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])

Front End Libraries Projects - View Certificate

See the Pen FCC: Random Quote Machine by Taylor Stauss (@ttstauss) on CodePen.

Build a Random Quote Machine

I had a good time working on this project. A few years ago I made it partway through FCC and remember doing this project without React. It's amazing how far tech has come. I'm really liking React.

Technologies Used:

HTML 5
CSS 3
Vanilla Javascript (ES6)
React

Key Techniques Used:

Created a basic algorithm to censor swears from the Mitch Hedberg quotes. Used RegExp to create expression with lookahead/lookbehinds.
Used React to make basic components and kept state local to the QuoteBox component.
Prevent the same quote from showing twice in a row using prevState.
Css animation fadeIn on load and re-render. This was tricky. I had to get creative with state, componentDidMount, class methods, and the short circuit operator (&&).

See the Pen FCC Markdown Previewer by Taylor Stauss (@ttstauss) on CodePen.

Build a Markdown Previewer

Good project. I've used Remarkable in a past project here. It was fun to learn a new library.

Technologies Used:

HTML 5
CSS 3
Vanilla Javascript (ES6)
React

Key Techniques Used:

Used ES6 template literal to store default Markup.
Used React to creat basic component and store markup in state.
Used an option object to pass the optional bonus stories (had to go here for help on the link target bonus.

See the Pen FCC: Drum Machine by Taylor Stauss (@ttstauss) on CodePen.

Build a Drum Machine

This was a cool project. I can see how you could use some of these techniques to get really creative.

Technologies Used:

HTML 5
CSS 3
Vanilla JavaScript
React

Key Techniques Used:

Used React to create basic components. Iterated over each item in object to creat the Drum (or keyboard) components. Passed method down to child to modify parent state.
Added event listener to componenetDidMount to add keydown listener to DOM (also added removeEventListener to comopnentWillUnmount to cleanup events).
Used state to add/remove class on key press (had to use a setTimeout to get the removal to work).

See the Pen FCC: JavaScrip Calculator by Taylor Stauss (@ttstauss) on CodePen.

Build a JavaScript Calculator

This was a challenging project. There are definitely holes in my calculator, but I got it to pass all test cases. My main concern is the use of the eval() method. I know that there are risks and performance considerations. In the future I'd like to practice my algorithm scripting and build my own eval method (and fix some of the fringe cases on this calculator).

Technologies Used:

HTML 5
CSS 3
Vanilla JavaScript
React

Key Techniques Used:

Used React to create Calc component and manage state.
Extensive use of prevState to build and manage expressions.
Had to get creative using strings vs numbers.

See the Pen FCC: Pomodoro Clock by Taylor Stauss (@ttstauss) on CodePen.

Build a Pomodoro Clock

I remember trying this project a few years ago (my first time trying to go through FCC—I think this is the project I stopped on—life does that to you), I very much enjoyed using React/Redux to do this as opposed to vanilla JavaScript. This exercise got me very familiar with some of the nuances of the two technologies.

Technologies Used:

HTML 5
CSS 3
React
Redux
Moment.js

Key Techniques Used:

Used React to separate each part of the UI into it's own separate components. Utilized both stateless and functional components.
Used Redux to manage state. Extensive use of connect, mapStateToProps, mapDispatchToProps (though I didn't use them by name - just dropped them into connect as functions).
Utilized Thunk middleware as well as a logger middleware (courtesy of Redux).
Relied on Moment.js to help manage the clock duration. This was a little tricky to think through, but eventually I got it.

Data Visualization Projects - View Certificate

Visualize Data With A Bar Chart

See the Pen FCC: Bar Chart by Taylor Stauss (@ttstauss) on CodePen.

Visualize Data With A Scatterplot Graph

See the Pen FCC: Scatter Plot by Taylor Stauss (@ttstauss) on CodePen.

Visualize Data With A Heat Map

See the Pen FCC: Heatmap by Taylor Stauss (@ttstauss) on CodePen.

Visualize Data With A Choropleth Map

See the Pen FCC: Choropleth Map by Taylor Stauss (@ttstauss) on CodePen.

Visualize Data With A Treemap Diagram

See the Pen FCC: Tree Map by Taylor Stauss (@ttstauss) on CodePen.

Apis and Microservices Projects - View Certificate

Timestamp Microservice

User stories:

The API endpoint is GET [project_url]/api/timestamp/:date_string?
A date string is valid if can be successfully parsed by new Date(date_string) (JS) . Note that the unix timestamp needs to be an integer (not a string) specifying milliseconds. In our test we will use date strings compliant with ISO-8601 (e.g. "2016-11-20") because this will ensure an UTC timestamp.
If the date string is empty it should be equivalent to trigger new Date(), i.e. the service uses the current timestamp.
If the date string is valid the api returns a JSON having the structure {"unix": <date.getTime()>, "utc" : <date.toUTCString()> } e.g. {"unix": 1479663089000 ,"utc": "Sun, 20 Nov 2016 17:31:29 GMT"}.
If the date string is invalid the api returns a JSON having the structure {"unix": null, "utc" : "Invalid Date" }. It is what you get from the date manipulation functions used above.

Example Usage:

Example Output:

{ "unix": 1450137600, "natural": "December 15, 2015" }

Request Header Parser Microservice

User stories:

I can get the IP address, preferred languages (from header Accept-Language) and system infos (from header User-Agent) for my device.

Example Usage:

https://fcc-api-project-request-header-parser-microservice.glitch.me/api/whoami

Example Output:

{"ipaddress":"159.20.14.100","language":"en-US,en;q=0.5","software":"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0"}

URL Shortener Microservice

User stories:

I can POST a URL to https://fcc-api-project-url-shortener-microservice.glitch.me/api/shorturl/new and I will receive a shortened URL in the JSON response. Example : {"original_url":"www.google.com","short_url":1}
If I pass an invalid URL that doesn't follow the valid http(s)://www.example.com(/more/routes) format, the JSON response will contain an error like {"error":"invalid URL"}. HINT: to be sure that the submitted url points to a valid site you can use the function dns.lookup(host, cb) from the dns core module.
When I visit the shortened URL, it will redirect me to my original link.

Creation Example (when submitted via a form):

POST https://fcc-api-project-url-shortener-microservice.glitch.me/api/shorturl/new : url=https://www.freecodecamp.com

Usage:

https://fcc-api-project-url-shortener-microservice.glitch.me/api/shorturl/0

Will redirect to:

https://www.freecodecamp.com

Exercise Tracker

User stories:

I can create a user by posting form data username to /api/exercise/new-user and returned will be an object with username and _id.
I can get an array of all users by getting api/exercise/users with the same info as when creating a user.
I can add an exercise to any user by posting form data userId(_id), description, duration, and optionally date to /api/exercise/add. If no date supplied it will use current date. Returned will the the user object with also with the exercise fields added.
I can retrieve a full exercise log of any user by getting /api/exercise/log with a parameter of userId(_id). Return will be the user object with added array log and count (total exercise count).
I can retrieve part of the log of any user by also passing along optional parameters of from & to or limit. (Date format yyyy-mm-dd, limit = int)

Usage:

https://fcc-api-project-exercise-tracker-rest-api.glitch.me/

File Metadata Microservice

User stories:

I can submit a form that includes a file upload.
The from file input field has the "name" attribute set to "upfile". We rely on this in testing.
When I submit something, I will receive the file name and size in bytes within the JSON response

Usage:

https://fcc-api-project-file-metadata-microservice.glitch.me/

Information Security and Quality Assurance Projects - View Certificate

Metric-Imperial Converter

User stories:

I will help prevent the client from trying to guess(sniff) the MIME type.
I will prevent cross-site scripting (XSS) attacks.
I can GET /api/convert with a single parameter containing an accepted number and unit and have it converted.
Hint: Split the input by looking for the index of the first character.
I can convert 'gal' to 'L' and vice versa. (1 gal to 3.78541 L)
I can convert 'lbs' to 'kg' and vice versa. (1 lbs to 0.453592 kg)
I can convert 'mi' to 'km' and vice versa. (1 mi to 1.60934 km)
If my unit of measurement is invalid, returned will be 'invalid unit'.
If my number is invalid, returned with will 'invalid number'.
If both are invalid, return will be 'invalid number and unit'.
I can use fractions, decimals or both in my parameter(ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.
My return will consist of the initNum, initUnit, returnNum, returnUnit, and string spelling out units in format {initNum} {initial_Units} converts to {returnNum} {return_Units} with the result rounded to 5 decimals.
All 16 unit tests are complete and passing.
All 5 functional tests are complete and passing.

Example Usage:

/api/convert?input=4gal
/api/convert?input=1/2km
/api/convert?input=5.4/3lbs
/api/convert?input=kg

Example Return:

{initNum: 3.1, initUnit: 'mi', returnNum: 5.0000008, returnUnit: 'km', string: '3.1 miles converts to 5.00002 kilometers'}

Usage:

https://fcc-metric-imperial-converter-1.glitch.me/

Issue Tracker

User stories:

Prevent cross site scripting(XSS attack).
I can POST /api/issues/{projectname} with form data containing required issue_title, issue_text, created_by, and optional assigned_to and status_text.
The object saved (and returned) will include all of those fields (blank for optional no input) and also include created_on (date/time), updated_on (date/time), open (boolean, true for open, false for closed), and _id.
I can PUT /api/issues/{projectname} with a _id and any fields in the object with a value to object said object. Returned will be 'successfully updated' or 'could not update '+_id. This should always update updated_on. If no fields are sent return 'no updated field sent'.
I can DELETE /api/issues/{projectname} with a _id to completely delete an issue. If no _id is sent return '_id error', success: 'deleted '+_id, failed: 'could not delete '+_id.
I can GET /api/issues/{projectname} for an array of all issues on that specific project with all the information for each issue as was returned when posted.
I can filter my get request by also passing along any field and value in the query(ie. /api/issues/{project}?open=false). I can pass along as many fields/values as I want.
All 11 functional tests are complete and passing.

Example Usage:

/api/issues/{project}
/api/issues/{project}?open=true&assigned_to=Joe

Example Return:

[{"_id":"5871dda29faedc3491ff93bb","issue_title":"Fix error in posting data","issue_text":"When we post data it has an error.","created_on":"2017-01-08T06:35:14.240Z","updated_on":"2017-01-08T06:35:14.240Z","created_by":"Joe","assigned_to":"Joe","open":true,"status_text":"In QA"},...]

Usage:

https://fcc-issue-tracker-1.glitch.me/

Personal Library

User stories:

Nothing from my website will be cached in my client as a security measure.
I will see that the site is powered by 'PHP 4.2.0' even though it isn't as a security measure.
I can POST a title to /api/books to add a book and returned will be the object with the title and a unique _id.
I can GET /api/books to retrieve an aray of all books containing title, _id, & commentcount.
I can GET /api/books/{_id} to retrieve a single object of a book containing title, _id, & an array of comments (empty array if no comments present).
I can POST a comment to /api/books/{_id} to add a comment to a book and returned will be the books object similar to GET /api/books/{_id}.
I can DELETE /api/books/{_id} to delete a book from the collection. Returned will be 'delete successful' if successful.
If I try to request a book that doesn't exist I will get a 'no book exists' message.
I can send a DELETE request to /api/books to delete all books in the database. Returned will be 'complete delete successful' if successful.
All 6 functional tests required are complete and passing.

Usage:

https://fcc-personal-library-1.glitch.me/

Stock Price Checker

User stories:

Set the content security policies to only allow loading of scripts and css from your server.
I can GET /api/stock-prices with form data containing a Nasdaq stock ticker and recieve back an object stockData.
In stockData, I can see the stock (string, the ticker), price (decimal in string format), and likes (int).
I can also pass along field like as true(boolean) to have my like added to the stock(s). Only 1 like per ip should be accepted.
If I pass along 2 stocks, the return object will be an array with both stock's info but instead of likes, it will display rel_likes (the difference between the likes on both) on both.
A good way to receive current price is the following external API (replacing 'GOOG' with your stock): https://finance.google.com/finance/info?q=NASDAQ%3aGOOG
All 5 functional tests are complete and passing.

Example Usage:

/api/stock-prices?stock=goog
/api/stock-prices?stock=goog&like=true
/api/stock-prices?stock=goog&stock=msft
/api/stock-prices?stock=goog&stock=msft&like=true

Example Return:

{"stockData":{"stock":"GOOG","price":"786.90","likes":1}}
{"stockData":[{"stock":"MSFT","price":"62.30","rel_likes":-1}
{"stock":"GOOG","price":"786.90","rel_likes":1}]}

Usage:

https://fcc-nasdaq-stock-price-checker.glitch.me/

Anonymous Message Board

User stories:

Only allow your site to be loading in an iFrame on your own pages.
Do not allow DNS prefetching.
Only allow your site to send the referrer for your own pages.
I can POST a thread to a specific message board by passing form data text and delete_password to /api/threads/{board}.(Recomend res.redirect to board page /b/{board}) Saved will be _id, text, created_on (date&time), bumped_on (date&time, starts same as created_on), reported (boolean), delete_password, & replies (array).
I can POST a reply to a thead on a specific board by passing form data text, delete_password, & thread_id to /api/replies/{board} and it will also update the bumped_on date to the comments date.(Recomend res.redirect to thread page /b/{board}/{thread_id}) In the thread's 'replies' array will be saved _id, text, created_on, delete_password, & reported.
I can GET an array of the most recent 10 bumped threads on the board with only the most recent 3 replies from /api/threads/{board}. The reported and delete_passwords fields will not be sent.
I can GET an entire thread with all it's replies from /api/replies/{board}?thread_id={thread_id}. Also hiding the same fields.
I can delete a thread completely if I send a DELETE request to /api/threads/{board} and pass along the thread_id & delete_password. (Text response will be 'incorrect password' or 'success')
I can delete a post(just changing the text to '[deleted]') if I send a DELETE request to /api/replies/{board} and pass along the thread_id, reply_id, & delete_password. (Text response will be 'incorrect password' or 'success')
I can report a thread and change it's reported value to true by sending a PUT request to /api/threads/{board} and pass along the thread_id. (Text response will be 'success')
I can report a reply and change it's reported value to true by sending a PUT request to /api/replies/{board} and pass along the thread_id & reply_idM. (Text response will be 'success')
Complete functional tests that wholely test routes and pass.

Usage:

https://fcc-anon-message-board-1.glitch.me/

Educational & Hobby

Micro Blog App

Recipe App

FreeCodeCamp Projects

Full Stack Certification - View Certificate

Responsive Web Design Projects - View Certificate

Build a Tribute Page

Build a Tribute Page

Build a Survey Form

Build a Survey Form

Build a Product Landing Page

Build a Product Landing Page

Build a Technical Documentation Page

Build a Technical Documentation Page

Build a Personal Portfolio Webpage

Build a Personal Portfolio Webpage

JavaScript Algorithms and Data Structures Projects - View Certificate

Palindrome Checker

Palindrome Checker

Roman Numeral Converter

Roman Numeral Converter

Caesars Cipher

Caesars Cipher

Telephone Number Validator

Telephone Number Validator

Cash Register

Cash Register

Front End Libraries Projects - View Certificate

Build a Random Quote Machine

Build a Random Quote Machine

Build a Markdown Previewer

Build a Markdown Previewer

Build a Drum Machine

Build a Drum Machine

Build a JavaScript Calculator

Build a JavaScript Calculator

Build a Pomodoro Clock

Build a Pomodoro Clock

Data Visualization Projects - View Certificate

Visualize Data With A Bar Chart

Visualize Data With A Bar Chart

Visualize Data With A Scatterplot Graph

Visualize Data With A Scatterplot Graph

Visualize Data With A Heat Map

Visualize Data With A Heat Map

Visualize Data With A Choropleth Map

Visualize Data With A Choropleth Map

Visualize Data With A Treemap Diagram

Visualize Data With A Treemap Diagram

Apis and Microservices Projects - View Certificate

Timestamp Microservice

Timestamp Microservice

User stories:

Example Usage:

Example Output:

Request Header Parser Microservice

Request Header Parser Microservice

User stories:

Example Usage:

Example Output:

URL Shortener Microservice

URL Shortener Microservice

User stories:

Creation Example (when submitted via a form):

Usage:

Will redirect to:

Exercise Tracker

Exercise Tracker

User stories:

Usage:

File Metadata Microservice

File Metadata Microservice

User stories:

Usage:

Information Security and Quality Assurance Projects - View Certificate

Metric-Imperial Converter

Metric-Imperial Converter

User stories:

Example Usage:

Example Return: