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 specified radix (the base in mathematical numeral systems)
• In the above app I passed a radix or base of 2 specifying functions should return a Decimal value

• I should've added regex validation for the input field rather than alerting a message when keycode is not 0 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 of border-radius which I was able to target through the getPropertyValue() 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() and Element.classList.toggle() functions
• Used Element.classList.add and Element.classList.remove to toggle active tab

• Should've added transition
• Should've tried to simplify class change using Element.classList.toggle() function