50 Projects in 50 Days, 2/5 there! 🌻
Tags: javascript, css, beginners
Published: 2021-04-14 12:33:04

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!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nk811x7wt7g9mi26cu8.png) *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.:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1njko7w0ni696c8s9dmd.png), in the CSS I have to use their unicode in the content string, once I apply ::before and ::after pseudo classes:![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvfqe0fqhceqfwyy1njl.png)

**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!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tcdqydswafb26id1v9h.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rku6vx8dp9m918p6g3af.png)*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().
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1294sagqejemswoiwwe.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1au0oesa4aunxrui5k3.png)


**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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvxaycj4u1hzl34cy9aw.png) *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);
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khgcmrbo58mpjg7uct08.png)*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. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hluxw2vmdp1dc4rit9c2.png) *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. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oedycy15s9dplt77fu2v.png)*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.*