Portfolio Of Mini Creations
Little things I've coded while learning web development skills.
Some look simple but they’re tricky when first learning. They all have poor UI because I only care about the functionality so ignore the ugliness!
Click a button and get random dog photos from across the web!
Convert a USD value to GBP.
Get a definition (some of them are a bit questionable!) for words.
Search for specific words within a page, ideal for large webpages or analysing long documents.
Click and hold words and highlight them, ideal for an education website.
Demos of Google Charts that pull data from external spreadsheets.
See daily prices for the U.S. major indices.
Save your notes into your browser without needing to login.
Random Dog Pics (API Call)
What: A fun tool that will show you random dog photos.
Possible use cases: A pets website surely!
Why I made it: I was learning to use API’s. I wanted to keep it light-hearted and fun where possible so using a simple API containing dog pics was ideal!
Coding: HTML, CSS, Javascript, Fetch API
Currency Exchange (API Call)
What: A currency converter that you put in a USD value and it’ll tell you the current GBP equivalent.
Possible use cases: A tourism website where users may calculate how much spending money they’ll need.
Why I made it: I was learning the basics of using API’s and saw this free currency exchange API so it was ideal to help me learn.
Coding: HTML, CSS, Javascript, Fetch API
Dictionary (API Call)
What: You type in a word and it will return a definition (some of them are a bit questionable!).
Possible use cases: An educational website.
Why I made it: To help me learn how to call API’s and output data my API calls return.
Coding: HTML, CSS, Javascript, Fetch API
Text Searcher
What: A tool that allows you to search a webpage for a specific word. It’ll highlight each instance of the word and show you how many times it’s present in the content.
Possible use cases: An educational website, tutorial website, or company filings containing thousands of words.
Why I made it: I was prototyping tools for users who have to read large pages.
Coding: HTML, CSS, Javascript
Text Highlighter
What: You highlight words with your mouse (if on PC) or hold down your finger on words on mobile devices, and then click a button that will give the text a background colour.
Possible use cases: An educational website, tutorial website, or company filings containing thousands of words.
Why I made it: I was prototyping tools for users who have to read large pages.
Coding: HTML, CSS, Javascript
Google Charts With External Data
What: A demo of different types of Google Charts. They’re all mobile friendly. All charts pull their data from an external spreadsheet.
Possible use cases: Any website that needs to show data using charts.
Why I made it: I needed a new charting solution for content I was creating so decided to give Google Charts a test run.
Coding: HTML, CSS, Javascript, Google Charts, Google Sheets
Live Stock Market Index Prices
What: This displays regularly updated stock market data for the major U.S. indices. It’s poorly coded and can be significantly improved but I was learning at the time so I was delighted just to get something working! It regularly updates using an apps script trigger.
Possible use cases: A financial website for investors.
Why I made it: I was prototyping financial content for a new project while also learning about API’s at the same time.
Coding: HTML, CSS, Javascript, Google Charts, Google Finance, Google Sheets
Notepad Using Web Storage API
What: A text notepad for storing notes. It’s key feature is that it stores your notes in your browser using localStorage, a mechanism of the Web Storage API. This means you don’t need to login to save your notes and can return to the notes day after day and they’ll still be there. The downside is it’s specific to your device, so you can’t save notes on a PC and then visit the same webpage on your smartphone and see the notes.
Possible use cases: Educational websites where it makes sense for users to store notes.
Why I made it: I was considering a notepad tool on a website I own so this acted as a prototype.
Coding: HTML, CSS, Javascript, Web Storage API (localStorage)
I plan to build out this portfolio in the future and create better UI for each creation, but it’s not a priority right now.
