50 Projects in 50 Days, 4/5 there! 🌻
Tags: javascript, beginners, html, css
Published: 2021-05-07 08:29:00

Time flies, I have now completed 40 small projects whilst renovating a property and moving houses. Safe to say there have been hiccups along the way in both cases 😂
I am finally much more comfortable working with the DOM and with string interpolations! Yay!
This is what I have been to over the past 10-ish days:


**31st Project: Password Generator**

Okay, this project has been one of the best so far, because it is much more than a simply presentational effort. The aim is to build a password generator which ensures that 5 conditions are met: the password needs to be longer than 20 characters, and it needs to include both uppercase and lowercase letters, symbols and numbers.
To generate a random element of each of these categories, we make use of the **ASCII chart** and of the **String object's 'fromCharCode'**'s property.
To generate the uppercase and lowercase letters, we take a random number and multiply it by 26, due to the length of the alphabet. We then add 97 or 65, to the lower and upper case instances respectively. This is because the first lowercase letter - a -, has the symbol 97 and the first uppercase letter A has the code of 65.
We proceed to do the same for the numbers, (though we obviously limit our random number to 10), and we use the code of 48 in this case, as 0 has the char code of 48.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzbxgleop013kjp1aspd.png)

Even though this is not the only way to generate random characters, I think this is one of the simplest methods to do it.
The actual function to generate the password wasn't the easiest to wrap my head round, to be fair.
Essentially, if no condition has been checked or filled in, return nothing as a password, otherwise loop through whatever the length of the conditions is (4 + the length in my case) and for each type that is true, call the relative password to generate a random character. Though the concept is rather easy, there was a lot of looping and forEaching which I still need to work on 😊




**32nd Project: Good, Cheap and Fast**

It is so very true that a project can't be three things at the same time: good, cheap and fast. You can only pick two out of these three, like every good project manager knows. This project was a relatively simple one, though instead of using simple checkboxes, we created a rolling ball which uses an animation to be slided from left to right, and back.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtwkr7n9kkekki6ru72u.png)

We used two @keyframes queries to manage the slideOn and the slideOff animations. slideOn is the opposite of slideOff, and the transformations use the translateX property to slide the ball back and forth according to where within the div is placed.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7u4o639zmbhiovdpfhg.png)


**33rd Project: Notes App**

Here we had yet another very useful project, a cute notes app.  It might sound as trite and overused, though this time we used a couple new things, and I did learn that I can't grab the value of a 'div' as I can do for a textarea (lol), but I can get the content of the div by looking up its innerHTML value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/laxa9j3izs2nvkemb5gv.png)

The first new thing I came across is the Marked library. https://marked.js.org/
We used it as it's rather light-weight and as it implements all markdown features from the supported flavours & specifications of the case. In our case we simply wrapped the text around it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0jj4e8psta7oqkf3lu6.png)

I use localStorage in my daily job, so I was rather comfortable using this storage for this app, as well. What is important to know about localStorage (which can be accessed in the Application tab in the Developers' Tools), is that we can only store a key-value pair of string type. Should I want to store an array or an object as a value, I would have to stringify the value (e.g. using JSON.stringify). sessionStorage is another similar way of storing data, though the data will be lost when I refresh my browser.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6gmp0mnyn6isy53qy8f.png)


**34th Project: Animated Countdown**

Okay so I learnt another way to center a div (lol, probably my most googled CSS-related problem). Basically, just position it fixed within the page and assign a top and left 50% to it. Then, as you want to center the whole element and not just the left side of it, you will have to transform: translate(-50%, -50%), so that it actually is in center of the page (or element) itself.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1abd7ewjn9n7k0adzmwr.png)

I also realised that there is an event listener called animationend, which is fired when a CSS animation has completed! Veeeery much super handy for anything DOM in my opinion. The whole animation was managed by this event listener, which allowed me to add and remove classes on the elements that I needed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3d91qd6fumswet7o134.png)

In my specific case, if the animation name was either goIn or goOut, the respective keyframes animations would have fired.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04c9uagl5enakhu29bk6.png)


**35th Project: Image Carousel**

The project was a mix of much of the others, I think. Slightly easier than some of the others, but a bit trickier in terms of calculations on the X axis.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oucajpyzk3jnwvuiev31.png)
As usual, we used a mix of indexes and length to understand what to move, toward what direction and when to reset the carousel.

**36th Project: Hoverboard**

I absolutely adored coding this little project because when I was little I had a T-shirt which did the same thing! I have a board made up of squares, each time I hover onto a square, the square changes colour. I did not really learn anything new in the proper sense of it, but I had loads of fun, and I was able to put into practice the majority of what I have studied so far, which was amazingly rewarding.
The main things to keep in mind here is how **mouseover** and **mouseup** work: mouseover is like hovering onto an element, whereas mouseup is used when I move the focus away from the element.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw86h2knlc9d6ikbxk4m.png)


**37th Project: Pokedex**

It was really fun to work on this project, and the PokeAPI (https://pokeapi.co/) is so easy to work with! It is incredible how we can dynamically add a new card only using variables and string interpolation in the JavaScript code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3io3ylgira08za2acb5j.png)

Quite a few JavaScript methods were used here, which gave me the chance to work on my knowledge. Namely: **slice**, **padStart**, **find** and **indexOf**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujqq87v91gdpnva6ujr2.png)


**38th Project: Mobile Tag Navigation**
This was a simple project which simulated a phone and a mobile menu below it. It was similar to some other stuff we did earlier on. It boils down to adding and removing the classes of show/active and to show the respective image when I click on the specific buttons.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta4jo3uu61b61fe3w2m8.png)

**39th Project: Password Strength**
A functional exercise which also looks good! I had never used Tailwind CSS before, but I work with Bootstrap on a daily basis, which is rather similar I would say. It was really handy to be able to style my form already in the HTML code, without worrying too much for it in the CSS file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0um00yax3803nni2fmsr.png)

In terms of CSS itself, the fact that the filter property to blur an element is so simple yet so effective, really is telling. If you apply it to the background like in my case, it does change the whole look of the page!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d63yin8tqbcaxw94ts2i.png)


**40th Project: 3D Boxes Background**

Okay so I realised that you need to have both your maths and logic ready when dealing with animations and transitions. This project was really cool to code, a fun exercise to practice the various transform properties.

I finally got to use rotateZ! It is used to rotate an element across its z-axis without making it look funny. In my case, I used it to rotate the images by 360 degrees, so completely.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqekbma8c7ozfwnzhh23.png)
The JavaScript part of it was the most complex for me, as maths isn't really my strongest point. I used a nested loop (booo! but useful in this case) to control when and how the images would have rotated. As the container is 500x500, and there are 4 boxes on each row, for 4 rows, I had to think in terms of 125-125-125-125. That's why when I click the button, all the boxes rotate according to which index they have, alongside the Z-axis.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwvimyr7ebsnt0hnl0hw.png)