50 Projects in 50 Days, 2/5 there! 🌻

Here I am after another ten whole days of projects! I have been thoroughly enjoying these ones, and a couple in particular. Let's dive into what I have been learning.

11th Project: Event Keycodes
Two main big topics here: CSS Specificity and calculations and keyboard events.

The browser needs to be able to decide which CSS property to apply to a certain element. But what if multiple properties are applied to the same one? I found the CSS Podcast episode on the topic quite fun, as it invites listeners to think of CSS specifications as a football match: whichever element gets the most points, it's the one that wins the property! Universal selector (*) and combinators don't have any effect on specificity. By ascending order, these are the elements and their specificity: type selectors (such as div); class selectors (like .container) and finally ID selectors (#bestColour).

I also learnt how to use KeyboardEvent objects, that is how the user interacts with the keyboard! There are three event types we can work with: keydown, keyup and keypress. When console logging an event fired by, for example, keydown, the most interesting properties that I discovered are: code, keyCode and key!
Example from the project, where I had to render the key, keyCode and code of the event.

12th Project: FAQs collapse
This is a very good project for a potential portfolio, and the main focus here for me was learning how to manage font-awesome icons.
If in the HTML I can just import them and call them with the attribute set for that specific icon (e.g.:
, in the CSS I have to use their unicode in the content string, once I apply ::before and ::after pseudo classes:

13th Project: Random Choice Picker
Another project rather interesting to apply to your portfolio or CV! It lets you write a number of words, separated by a comma, and then the random choice picker function will select a random tag.
I learnt that in terms of textarea, if you call the focus() method on the DOM element, the focus will be there as soon as the user loads the page!
The use of setInterval(), clearInterval() and setTimeOut() is rather extensive in the Javascript but simply because there is a great deal of intervals at play here!
What you can see from the screenshot is the randomSelect function, where I set two timeouts to highlight and unhighlight the random tag, and then I clear the interval after a certain amount of times, so that the highlighted tag remains.

14th Project: Animated Navigation
Overall a pretty simple but interesting project which made me finally understand that I can apply a transition to any property set within a certain element/class, so even if in e.g. transition: opacity, opacity doesn't change colour/get highlighted, I am still applying a transition to that.
Here I am declaring a transition for two of the properties that I am styling above, that is the rotation and the opacity.

15th Project: Incrementing Counter
After this project, I started reading about the "data-target" attribute in HTML. I can assign a 'data-target- attribute to a div and then get its value in the Javascript code by using the .getAttribute('data-target') method. I am still trying to figure out where I would use it on a day-to-day / personal project case, but at least I learnt a new method!!
Something even cooler that I learnt here is that, if you want to make something a number instead of a string, put a + sign in front of the variable!
e.g. const target = +counter.getAttribute('data-target), so to make sure that you're grabbing the numerical value of it; -- same as wrapping it around Number or using parseInt().
Example from the project where I grab the value of target and current variables, ensuring that what I have is a numeric value.

16th Project: Drink Water
A couple of things here: the nextElementSibling node! It reminded me of the fact that the DOM always knows where the siblings of your elements are, and it's cool that we can use this method to grab and check the next element closest to the one I am focusing right now;
I played around a lot with the JavaScript file and the style applied to a few elements before and after an event happened, or a condition was applied to them. I like the idea that this is not regarded so bad as pure in-line styling is.

17th Project: Movie app
A classic project to learn the Rest API model, this time using movies! I added a couple more tweaks to the original one:
1) Instead of copying and paste the API key multiple times (as it might become confusing and prone to error), I used template literals to extrapolate its value;
2) The use of window.location.reload(); to refresh the page in cases where there is no word matching the value inputted OR the value inputted is null/not existent.
It was a great exercise to work with API calls (GET method mainly) plus to integrate the results into the DOM !! I'll try to do similar stuff with other and more complex API's, and different API methods as well.
Here I concatenate the search term with the fixed search API URL and if the entry is invalid/empty, I reload the page.

18th Project: Image Slider
This project was a massive refresher for CSS syntax and implementation:
1) Opacity: 0 and background-colour: transparent are exactly the opposite thing! Opacity sets the opacity of the entirety of the element we are targeting, and it is exactly the opposite of transparency. The lower the opacity, the hazier you'll see the element. On the contrary, if you set a higher opacity (up until 1), the element is more visible.
2) CSS' background-size allows us to set the size of an image for the background. The property I use more often is 'cover', which means that the image will occupy the space of the entire background, and if necessary it will be stretched. Another oft-used one is 'contain', where instead the image will not be stretched, with the risk of repeating itself unless otherwise specified (using no-repeat);
An example of setting the opacity and the size of the background.

19th Project: Theme Clock
Okay, so this was a proper and full lesson on the Javascript Date() function. I initialise the time variable using new Date(), and then I get access to all the other Javascript data objects as a result.

20th Project: Button Ripple Effect
The 20th project was all about getting clientX and clientY and then using the event's properties to locate where within the button ton initiate the on-click ripple effect. I had never heard the name of the offset prop (I used offsetTop and offsettLeft in the project) but that was the key to grab the distance of the outer border of the button relative to the inner border of the top of the offsetParent node. Here I add an event listener to the button, so that some styles are applied to it when I click on a specific point within the button.