Series of projects which I plan on building for the next 30 days without fail 🤨
Built a Binary 2 Decimal converter
- I learned the
parseInt()
function and how it takes in string/number argument and returns an integer of the specifiedradix
(the base in mathematical numeral systems) - In the above app I passed a
radix
orbase
of 2 specifying functions should return a Decimal value
- I should've added regex validation for the input field rather than
alert
ing a message when keycode is not0 or 1
Built a Border Radius Previewer
- I learned the
getComputedStyle()
method and how it returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. - In above project I used
getComputedStyle()
to get current styling properties ofborder-radius
which I was able to target through thegetPropertyValue()
method
- Maybe I should've used functions to change border styling instead hard coding values 😅
- Also I should've added the ability to copy the border-radius property on click
Today I built a calculator (I was barely able 😅)
- I learned about the
eval()
method evaluates JavaScript code represented as a string
- I initially started out thinking of implementing switch cases for each operation, but eventually I got lazy and used the
eval()
function to return the calculated result
Built a GitHub Profile loader, used GitHub users API 😃
- I learned not to be lazy 😅, learned about GitHub Users API
- Should've added better error handling operation. A better way to handle DOM manipulation
Built a Markdown Previewer
- Learned about the
marked
package which I used to convert raw text into markdown syntax
- I took a break of two days, just wasn't feeling like coding anything at all
- Should've been more focussed and determinant
- Also I felt like I should've built my own Markdown parser
Built a Rock Paper Scissors Game. Used design resources from @frontendmentorio challenge
- Learned about rules of Rock Paper Scissors Game, there wasn't much in tech I could learn programmatically
- Maybe simplified how we toggle UI elements
- Store the score in
localStorage
and make it persistent - Add animation to DOM manipulation
Built a Color Scheme Toggler
- Learned about color schemes, how we can use it in our applications etc
- Should've used CSS variables to defines primary/secondary colors
- Store the toggles mode in
localStorage
to make it persistent and render it whenever we load the page
Built a Random Meal Generator
- Learned about the
themealdb
API, and how we can use this API to build apps for food-related stuff
- Should've added CSS transition for smooth animation
Built a Random Programming Quote Generator
- Learned about Programming Quotes API which provides tons of options to load programming-related quotes.
- Make more accessible UI (voiceOver)
Built a simple FAQ accordion
- Not much actually, this project is me trying to do a come back from a long gap
- I should be more consistent
Built a simple pagination component
- Learnt a bit about array manipulation
- Built a complex pagination UI with multipage support
Built a random cat facts page
- Learnt about cat-facts endpoint which returns a random fact about cats
- Re-used the same functional code in 2 differnt event handlers
- NA
Built a table of content generator from the html markup present in the page
- Learned about how we can add/append multiple child node to an element in DOM using
appendChild
method
- Auto highlight table of content links whenever user scroll down the page showcasing the progress of the page
Built a Tooltip element
- Used
mouseover
&mouseleave
event listeners - Learned about
remove()
built-in method to remove any child node from the dom tree - Started using querySelector to select element with different attributes
- Should've applied the positioning of the tooltip automatically using the elements placement in the page
- Added some transition to the tooltop
Built a search box component
- Learned about
Element.replaceChildren
method, which replaces the existing children of a Node with a specified new set of children.
- NA
Built a feedback form component
- Learned about querySelector option to select input fields with same name attribute
- Learned about how to select immediate sibling of element and apply style to it using
+
adjacent selector
- Use some endpoint to post the feedback data asynchronously
Built a cookie popup component
- Learned about
document.cookie
, how we can use it in any JS projects
- Made some static changes when a cookie is stored
Built a modal component
- Learned about
currentTarget
of click event and how we can use it to check of which element is being clicked at the moment
- Add some animation to the modal
Built a URL shortner
- Learned about
*:hover:enabled
and*:hover:dinabled
CSS pseudo-selectors to add hover state style when element is disabled on enabled
- NA
Built a Menu component
- Nothing new!
☹️
- Component should've been dynamic
- Should've used
insertAdjacentElement
method to add menu node to DOM - Should've added option to close menu when focus is moved away from the button
Built a Timeline component
- Nothing new 🥲
- Should've added transition
Built a Tabs component
- Learned about
Element.classList.add()
,Element.classList.remove()
andElement.classList.toggle()
functions - Used
Element.classList.add
andElement.classList.remove
to toggle active tab
- Should've added transition
- Should've tried to simplify class change using
Element.classList.toggle()
function