Forem: Ashley Young

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

Ashley Young — Wed, 19 May 2021 14:40:17 +0000

Yesssss, I made it! Not exactly 50 projects for 50 days, but almost. Doing a small or medium project a day has not only improved my DOM skills massively, but it also taught me that discipline is the only way forward, as you won't always be motivated to code, especially when days start to be a bit brighter and warmer. But let's jump into my last projects.

41st Project: Validate Account

in this project we used Webkit, something that I had always putting off learning, probably just because I didn't fancy writing too many ---'s 😂, as at work we already use BEM (block, element, modifier) methodologies. Researching it, I discovered that is is a simple HTML and CSS web browser rendering engine (used by popular browsers such as Chrome and Safari). Also, from what I understood from a Stack Overflow answer, it is used as a prefix on CSS selectors for properties that you only want to use on a certain engine....and many hope that this specification goes away eventually.

.code::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

The actual JavaScript code wasn't super hard, though I hard a rather hard time understanding why the key I needed was keydown rather than keyup. Yes, I still have some issues with some event listeners when it comes to keys events, as so much stuff has also now been deprecated.

codes.forEach((code, index) => {
    code.addEventListener('keydown', (e) => {
        if(e.key >= 0 && e.key <= 9) {
            codes[index].value = '';
            setTimeout(() => codes[index + 1].focus(), 10)
        } else if (e.key === 'Backspace') {
            setTimeout(() => codes[index - 1].focus(), 10)
        }
    });
});

42nd Project: Live User Filter

This project was similar to the GitHub profiles one, though in this case we query the Randomuser API instead. The aim is to have a text input where the user types either a name or a location, and then the code will filter by the inputted words, and show a picture with the related info.

async function getData() {
    const res = await fetch('https://randomuser.me/api?results=50')
    const { results } = await res.json()
    result.innerHTML = ''
    results.forEach(user => {
        const li = document.createElement('li');
        listItems.push(li);
        li.innerHTML = `
            <img src="${user.picture.large}" alt="${user.name.first}">
            <div class="user-info">
                <h4>${user.name.first} ${user.name.last}</h4>
                <p>${user.location.city}, ${user.location.country}</p>
            </div>
        `
        result.appendChild(li);
    });
};

43rd Project: Feedback UI Design

Well, this was a change! I learnt about Event Bubbling in this project, as a way to avoid another forEach loop. Event bubbling is a funny name to refer to the actual bubbling up of events from the DOM tree up. It is very interesting and also very functional, as it saves up a lot of code and repetition. Essentially, instead of targeting each child element of a parent node/element, you attach an eventListener to the parentNode or parentElement, so that it'll act onto how many children you set it to.

panel.addEventListener('click', (e) => {
    if (e.target.parentNode.classList.contains('rating')) {            //If the parent node contains rating class
        removeActive();
        e.target.parentNode.classList.add('active');
        defaultRating = e.target.nextElementSibling.innerHTML
    };
});

44th Project: Custom Range Slider

This project was harder than I expected, with a lot of 'edge' cases to account for, such as using -webkit to cater for different browsers, and a couple new methods I wasn't aware of.
The goal of the project is to move the label of a progress bar toward whichever direction I am dragging the circle towards. The two new methods I have learnt here are: the window's getComputedStyle and the CSS method getPropertyValue. The first returns all of the CSS properties applied to the element I target, and the second gets me whichever property I want from it.

const range = document.getElementById('range');

range.addEventListener('input', (e) => {
    const value = +e.target.value;
    const label = e.target.nextElementSibling;

    const rangeWidth = getComputedStyle(e.target).getPropertyValue('width');
    const labelWidth = getComputedStyle(label).getPropertyValue('width');

    const numRangeWidth = +rangeWidth.substring(0, rangeWidth.length - 2);
    const numLabelWidth = +rangeWidth.substring(0, labelWidth.length - 2);

    const max = e.target.max;
    const min = e.target.min;

    const left = value * (numRangeWidth / max) - numLabelWidth / 2;
    label.style.left = `${left}px`

    label.innerHTML = value;
});

45th Project: Netflix Navigation

This mobile menu navigation reminded me of the 14th project, which was roughly the same, just with a bit less JavaScript code and a rotating effect. The aim of this project was instead to replicate Netflix's mobile menu using the burger menu icon.
As I said previously, l have now understood the general concepts used to do the main effects, so I am focusing here on the smaller details and properties such as text-transform, which is the CSS version of the JavaScript method .toUpperCase(). I also played around with transition-delay and text-decoration.

.nav-black {
    background-color: rgb(34, 31, 31);
    width: 60%;
    max-width: 480px;
    min-width: 320px;
    transition-delay: 0.3s;
}

46th Project: Quiz App

This was a fun and rather fun one. The data is in an array ready to be queried, so it makes it easier for the data to be grabbed. I got to practice my ever-lasting issues with indexes and iteration, which was good, though I think that what makes it hard for me to distinguish between indexes and variables, is that indexes (which in my mind are integers) sometimes are called with string names.

submitBtn.addEventListener('click', () => {
    const answer = getSelected();
    if (answer) {
        if (answer === quizData[currentQuiz].correct) {
            score++;
        }
        currentQuiz++;

        if (currentQuiz < quizData.length) {
            loadQuiz()
        } else {
            quiz.innerHTML = `<h2>You answered correctly at ${score} / ${quizData.length} questions</h2>`
        }
    }
})

For example, on line 4, I am checking whether the answer which I previously obtained by checking its ID, correspond to the correct one for whichever page of the quiz I am looking at. In this case, currentQuiz is the index which I use to identify which page of the quiz I am on. The index then gets increased on line 82, to move to the next quiz.

47th Project: Testimonial Box

Cute little project to display testimonials in boxes, and with a progress bar to allow the user to see how long it takes to disappear and move to the next profile. The only new thing here was the animation of the progress bar, which we animated via CSS using a linear infinite animation of 8 seconds, which we defined in @keyframes, so that it would effectively grow from 0% to 100% in on the X (horizontal) axis, starting from the left side (if left without transform-origin, it would start from the middle of the bar and grow towards both directions).

.progress-bar {
    background-color: white;
    height: 4px;
    width: 100%;
    animation: grow 8s linear infinite;
    transform-origin: left;
}

@keyframes grow {
    0% {
        transform: scaleX(0);
    }
}

@media(max-width: 768px) {
    .fa-quote {
        display: none;
    }

    .testimonial-container {
        padding: 20px 30px;
    }
}

48th Project: Random Image Feed

A very short and straight to the point project, not much different from what I have been doing already in the other projects.

49th Project: Todo List

Aaaaah and we eventually got there. The prettier spin-off of the notes app, but I like styling DOM elements so it was rather fulfilling in the end. The only thing that changes from a normal todo list is the fact that I am making use of contextmenu to perform the deletion operation. This simply means that I only had to right click on one item so that it disappeared from the DOM, rather handy!! On the other hand, by using the usual click event, I draw a line through, as I apply the following css: text-decoration: line-through.

.todos li.completed {
    color: grey;
    text-decoration: line-through;
}

I also like that we worked a bit on the localStorage, by setting and getting the key-value pairs to and from it. After each event has ended, we update the localStorage so that it reflects the changes that we have made.

function updateLocalStorage() {
    todosElement = document.querySelectorAll('li');
    const todos = [];
    todosElement.forEach(todoElement => {
        todos.push({
            text: todoElement.innerText,
            completed: todoElement.classList.contains('completed')
        });
    });
    localStorage.setItem('todos', JSON.stringify(todos));
};

function addTodo(todo) {
    let todoText = input.value;
    if (todo) {
        todoText = todo.text
    };

    if (todoText) {
        const todoElement = document.createElement('li');
        if (todo && todo.completed) {
            todoElement.classList.add('completed')
        }
        todoElement.innerText = todoText;
        todoElement.addEventListener('click', () => {
            todoElement.classList.toggle('completed');
            updateLocalStorage();
        });
        todoElement.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            todoElement.remove();
            updateLocalStorage();
        });
        todosUL.appendChild(todoElement);
        input.value = '';
        updateLocalStorage();
    };
};

50th Project: Insect Catch Game

Yes we made it! It wasn't exactly 50 days, but almost! This last project was one of the longest ones, with a lot of DOM functionality and manipulations which I found fun, but that I think I might done with now... not sure if you noticed but toward the end of the projects, stuff got a tad repetitive, though still very useful and engaging.

All in all it was a very good exercise, I learnt a lot and I am sure that after over 15/20 hours spent on this set of projects, I will not forget anything 😊

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

Ashley Young — Fri, 07 May 2021 08:29:00 +0000

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.

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

Ashley Young — Sat, 24 Apr 2021 14:53:54 +0000

Back at it, back to my projects. I am finally getting the hang of the majority of stuff, especially DOM manipulation, which is getting easier and easier, but also more complex...

21st Project: Drag and Drop
The project gave me a basic understanding of the drag and drop functionality works.
I have been exploring the HTML Drag and Drop API, and these events specifically: dragover, dragenter, dragleave and drop. In the HTML I identified which elements are draggable, and to do so I used the 'draggable' attribute and I set it to true.
I just need to remember next time I do something similar, to ensure that I add preventDefault() to prevent and automatic rendering. All the events I used to make this functionality.

22nd Project: Drawing App
This project was a fun one, I got to learn about the Canvas API which is one of those things that I just kept putting off for no apparent reason (?!). In fact, it is quite enjoyable once you get the hang of it. In the Javascript code, two main methods are used to start with: the getElementById() method to get the reference of the HTML element, and then the getContext() method to get the element's context (that is where the canvas will be rendered onto).

The methods that I have used and studied are mainly offsetX, offsetY. I used mouse events to manipulate the canvas HTML element.

23rd Project: Kinetic CSS Loader
Rather a short but mesmerising one, this one here. The main events happen in the CSS styling file, where I manipulate the element's class by using @keyframes and assigning variables so that the elements I need rotate as soon as they reach a certain degree. I applied an animation to the kinetic class, and then I used @keyframes to manage when to apply it to it.

24th Project: Content Placeholder
A new CSS property has been discovered! object-fit. According to documentation, this property sets how the content of a replaced element should be resized to fit its container. In my case I used cover. It reminds me very much of background-size, and it's actually quite its equivalent, though with object-fit we are targeting images instead.
I am still amazed by linear-gradient as a property, especially when animations come into play! I used keyframes to manage the animation at different degrees in its space.
Finally, I found out about this cool Random User Generator API (!!!!), which makes you put a random User profile should you need some quick dummy data. A bit like the good old Lorem, but at least you can understand what's happening here haha. The API in action.

25th Project: Sticky Navbar
Back to something which used to be simple enough for me to be thought of as 'basic', which is now giving me a whole lotta different vibes. Apart from giving to the navbar a position of fixed, I also manipulated the JavaScript so that the style was changed according to where in the window the nav bar found itself.

26th Project: Vertical Slider
A lot of quirky calculations here and jumping from indexes to integers. I learnt that the Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present) (thanks docs!).

27th Project: Toast Notification
When I first started at my first job, I laughed when I saw a file called toast.js! Like, what the hell does it even mean? But I quickly learnt that it's nothing but a pop-up notification which comes up when some event gets triggered. The createNotification method creates a div of class 'toast' and it makes it appear within the div/container of class 'toasts'. It then sets an interval of 3 seconds before it removes it from the DOM (i.e. it makes it disappear).

28th Project: GitHub Profiles
A few things of notice here in this project:

The use of Axios instead of Fetch API (for better error handling, no need to parse the response into JSON format);
The destructuring of res.data into only what I need, in this case {data} and concatenating strings to go to whatever link I need;
Inserting stuff into the DOM using template literals from JS;
Using try/catch refresh. The function getUser accepts the username as a parameter and then queries the GitHub API by using the axis library. As you can see, there is no need to manually parse the JSON response after the data has been fetched as the format is already in place.

29th Project: Double-Heart Click
A very Insta-worth project, this one! An especially good refresher in terms of coordinates, great illustration here: https://images1.programmersought.com/197/16/16ee7586e072b18147a89cc2a101a44d.png to understand the difference between pageX and clientX, and between offsetLeft and offsetTop;
and an interesting way to recreate the 'doubleclick' event. Instead of adding an actual ready-made'doubleclick' event, we used the timestamp to figure out whether the second click in a row was quick enough for it to be considered effectively a double click.I append the heart image/icon and then I remove it quickly after from the DOM (after 1 second).

30th Project: Auto Text Effect
Very nice and useful small project when it comes to animated websites, as it deals with animating a title (e.g. for a hero banner or similar). It took me a while to understand the maths behind this (cough cough haha) but eventually it makes sense! I create an input which allows a number between 1 and 5, and that input will regulate how fast the title auto-complete itself speed-wise. The speed is managed by a setTimeout which takes as an argument the actual writeText function and uses as an interval the speed.

I didn't know that I could simply add an event listener to an input element with the name of 'input', and then as long as I have the number attribute set to 'number' in the HTML code, I can obtain the number still using the usual e.target.value.I manage how many letters and how fast the sentence will be written by setting a timeout which will take the function writeText and will proceed to type in the speed variable's terms.

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

Ashley Young — Wed, 14 Apr 2021 12:33:04 +0000

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.

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

Ashley Young — Sun, 04 Apr 2021 17:22:55 +0000

In an effort to improve my front-end skills, I bought and started Brad Traversy's '50 Projects in 50 Days' on Udemy.

Having completed and personalised most of them, these are the things I learned during these first ten days:

First project: Expanding Cards
If you want your HTML elements to have cool effects, use transitions!
They really are the best way to animate something using CSS, as they enable to define the visual transition between two states of a certain element.
I learnt that for performance reasons, it is better to avoid using 'all' in order to apply multiple properties, as they are very CPU intensive.
Example from the first project, where I want a smooth transition to be used to edit the opacity of an element.

Second project: Progress Steps
I think that in terms of notions learnt, this project was one of the best for me.
After a thorough refresh of how position: relative and position: absolute work and relate to each other, I also learnt that you can make a little forbidden sign pop up if you assign the property not-allowed to the cursor!
Learning that a simple transform: scale: 09 property applied to a button makes it pop up for a split second was mind-blowing!
Also, when using ::before and ::after selectors, don't forget to put a content property, even if you don't have anything to actually render.

The main takeaway from the exercise, however, was that I can manage the width of an element by getting the element from the DOM and then changing its style directly in the JavaScript code. Remember, you can apply iterative/array methods on DOM elements!
Example from the second project, where I had to make a progress bar seem responsive on click. Here I increase the percentage of its width whenever the circles (buttons) are clicked.

Third project: Rotating Navigation
While coding some effects, I asked myself: what is the actual difference between transition and transform properties?
The first property applies a more smooth visual change to an element, it should be rather subtle and pleasant for the eye. The second property actually transforms (e.g. moves, changes the appearance of) an element.
Example from the third project. Here, I make the elements move horizontally using the transform: translateX and then I apply a transition to make the change smoother.

Fourth project: Hidden Search Widget
In this project, I learnt two very useful JavaScript methods which allow me to manage DOM elements.
The toggle() method is essentially the same as calling classList.add() and classList.remove() one after the other! Just use toggle() and every time an element is clicked, or that element has a listener, my action will toggle that element.
Then, the focus() method, is used to give focus to a HTML element meaning that if that element can be focussed, then a focus attributed will be applied to it.
I used both methods in the example above, from the fourth project, so that every time I clicked on the div with class 'search', the 'active' class was also applied, and for the input field to be in focus.

Fifth project: Blurry Loading
While coding this project, I jumped in a rather endless rabbit hole about the blur(radius) function, which applies a Gaussian blur to the input image. The function essentially tells you how many pixels in the screen blend into one another, meaning that a larger value will create a deeper blurring effect, whereas a value of 0px will leave the input unchanged.
I also learned that by using a z-index property, I can manage how multiple elements overlap, and I can decide which one is visible and which one should be hidden behind it.
In this example from the CSS file of the fifth project, I didn't want to apply any actual blur to my image.

Sixth project: Scroll Animation
This project was a good refresher when it came to the :nth-of-type() selector, I wasn't aware that I could simply write even instead of complicating things with various formulas like I normally do. Hehehe.
For every other div, I wanted to move it horizontally to the left.

Seventh project: Split Landing Page
This was a fun one. Basically, my page is split in two parts: on the left, I have a Playstation 5 advert, whereas the Xbox one is on the right. Both pages have a 'Buy Now' button and depending on which one you click on, the page expands.
A good recap on CSS selectors and pseudo-selectors alike and rather simple JavaScript, too. I simply apply a class of either hover-right or hover-left according to which side of the page I over onto.
This example from the project shows how the class of hover-left will be applied or removed when I hover or move away from the left side of the page.

Eighth project: Form Wave Animation
YAY!!! I finally understood the difference between display: block and display: inline-block and I didn't have to run to Google to choose which one I needed in this project. In summary, if you use in-line block, you can apply a width and a height to an element, and top/bottom & margins & paddings are all respected. When using only block, none of this happens as a line break appears after the element, making it unable to 'be in line' with the others.
Application of inline-block to a button.

Ninth project: Sound Board
Did you know there was such thing as the audio tag in HTML? I was surprised and rather amused, I have to say. Basically, the Web Audio API allows you to control audio files (such as mp3 files) by adding them into your HTML file and then managing them from the script file. The JavaScript play() and pause() methods allow you to start and stop an audio file so that sounds don't overlap.
HTML index file of the project, where I set six different sounds.
The script file allows me to loop over the sound names and for each one of them I add an event listener. Every time I click on a button, the previous sound stops playing (hence the need for the stopSounds function), and the new one starts.

Tenth project: Dad Jokes
This project was more an exercise on the FetchAPI than anything else, and thankfully I feel rather confident using it (though I should mention I prefer to use Axios normally).
There are two main ways to use fetch, you can either use the async/await syntax, or the .then.
Something cool which I had never thought of before, was to create a variable to store the headers and the acceptation criteria.
This is an example of using fetch with the async/await functionality, arguably a bit more clear and neater.

And this is instead an example using the more basic .then syntax.

See you when I reach 2/5 of the course ❤️🌻😻
Chiara