Today I Learned
Today I learned is my attempt at learning something new everyday and recording it daily for future references.
January 5, 2025 | Project 1
Today, I learned about basic git commands for version control and republishing website
January 6, 2025 | Project 2
Today, I learned about basic CSS and built expanding cards which is part of the 50 projects in 50 days tutorials on Oreily by Brad Traversy and Florin Pop. I plan to use it for creating a calendar for my daily learning schedule. Here's the Codepen link.
January 7, 2025 | Project 3
Today, I learned that you can use variable like methods in CSS. For e.g.,
we first define a root item:
:root{
--line-border-fill: #3498db;
--line-border-empty: #e0e0e0;
}
and then we refer it to it when we are defining attributes for individual items such as
.progress-container::before{
content: '';
background-color: var(--line-border-empty)};
This means we can refer line-border-fill and line-border-empty in any place in the entire CSS file. This and other points led me to create a progress tracker in HTML/JS/CSS which can be used for tracking multi-step forms. Here's the Codepen link.
#50projectsin50days
January 8, 2025 | Project 4
Today, I learned that you can create some cool animations which are not dependent on libraries like JQuery etc. You can use vanilla javascript with a mix of CSS and HTML to create effects that were previously only possible via JQuery or other such helper libraries. This and other points led me to create a search widget that opens when in focused or remains shrunk when inactive. Here's the Codepen link.
#50projectsin50days
January 9, 2025 | Project 5
Today, I learned that we can use calc() functions in CSS. This helped me in creating a blurry loading background page.Here's the Codepen link.
#50projectsin50days
January 10, 2025 | Project 6
Today, I learned how to implement animation in your web pages using simple CSS methods and keeping things attractive. Maybe, this example can be used for creating dates in my web app.Here's the Codepen link.
#50projectsin50days
January 11, 2025 | Project 7
Today, I learned how to use CSS to style your forms and how to dynamically add span via JavaScript in the HTML to create some dynamic effect. The result is the form below. When a user focuses on the email /password field, the label moves upwards. Here's the Codepen link.
#50projectsin50days
January 12, 2025 | Project 8
Today, I learned how to use the Fetch API with a config variable to pass the headers. I also learnt how to use the Async/Await operator and how to display the data fetched into HTML. The API here is available for free at 'Dad Jokes' . Here's the Codepen link.
#50projectsin50days
January 13, 2025 | Project 9
Today, I learned how to use the Ternary operator in HTML and how it essentially simplifies the logic and makes it more terse. For e.g.
If I need to pass an 'if...then' condition, I can write it traditionally as
if()
then{
//condition to pass if true
}
else {
//condition to pass if false
}
Using the `ternary` operator, we can rewrite the condition as
${event.key === ' '? 'condition to pass if true' : 'condition to pass if false'}
Here's the Codepen link.
#50projectsin50days
January 14, 2025 | Project 10
Today, I learned how to make an FAQ box with dynamic interactivity.
#50projectsin50days
January 15, 2025 | Project 11
Today, I learned about helper functions, how to use filter() and map() functions, how to use setTimeout and setInterval methods and how to display data from form input in HTML by creating HTML tags from within JavaScript. I also learned how to create highlight and unhighlight effect - helper functions. These learnings helped in creating a random picker application which randomly selects a choice from the available choices.
Here's the Codepen link.
#50projectsin50days
January 16, 2025 | Project 12
Today, I learned how to create an animated counter that stops spinning once the target is reached.
Here's the Codepen link.
#50projectsin50days
January 17, 2025 | Project 13
Today, I learned how to create a water drinking tracker that tracks how much water you drank during the day. This project taught me how to use CSS variables, manipulate the DOM, use mathematical concepts in JavaScript and more.
Here's the Codepen link.
#50projectsin50days
January 18, 2025 | Project 14
Today, I learned how to create a movie app using the async...await operator, use destructuring, how to get data from a search field and use it as a query string for search.
Here's the Codepen link.
#50projectsin50days
January 19, 2025 | Project 15
Today, I learned how to create a character count application that displays the number of characters a visitor types.
Here's the Codepen link.
#50projectsin50days
January 20, 2025 | Project 16
Today, I learned how to create a character and word count application that displays the number of characters and words a visitor types.
Here's the Codepen link.
#50projectsin50days
January 21, 2025 | Project 17
Today, I learned how to store and retrieve data in a form using the localStorage method. I learned how to create just in time status messages.
Here's the Codepen link.
#50projectsin50days