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.
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.
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.
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.
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.
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.
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.
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.
In my specific case, if the animation name was either goIn or goOut, the respective keyframes animations would have fired.
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.
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.
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.
Quite a few JavaScript methods were used here, which gave me the chance to work on my knowledge. Namely: slice, padStart, find and indexOf.
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.
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.
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!
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.
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.
Oldest comments (4)
This is awesome @chiaraintech ! Keep it up!
Keep going, some great progress being made! 💪❤
One super quick suggestion, instead of copying images of code copy the actual code over.
You can include code inside triple backticks so it shows as an actual code block.
So you write three backticks, then the language (so dev.to parser knows how to apply syntax highlighting to the code), on the next line copy your code in and then after it close it with three more backticks
This makes it much easier to read but more importantly, it ensures people using a screen reader can access the same information as everyone else!
The below fiddle shows the format, it is super easy!
Hello! Thank you for this, yes I have been looking into it and will do for the last set of projects' reviews, it's just there's been so much going on and I didn't want not to be able to post this 4th set of projects haha. But yes, I will definitely do it next time also because I think it'll help me!
Thanks !
You just do what you can, you are really motoring along so understand that you are busy!
If you get into the habit of doing it though it doesn't take any time at all, as instead of screen-shotting it, you just copy paste it (in fact it is quicker as you don't have to upload an image!).
I look forward to seeing the next instalment of your series!