All solutions

Another project done with React, Tailwind CSS and TypeScript. I added an intermediate layout for tablets and an error message if the link is invalid. When resizing the screen, I made the mobile menu close, and saw that the eventListener was being called multiple times as I resized the screen. To solve that, whenever I resize the screen, the mobile menu closes and the eventListener is removed. If I open the mobile menu again, the eventListener is added again. Feedback is welcome!

Project done with React and Tailwind CSS, using the API's recommended on the project page. I added an error message when the user types an invalid IP Address. Feedback is welcome!

Project done using React. Feedback is welcome!

Learning React, so I used it for this project. Feedback is welcome!

Second version of the project using React and Tailwind CSS

For this project, I used a display:flex on the html element in the CSS stylesheet, so that the site wouldn't break when stretching across multiple monitors for example. Feedback is welcome!

For this project, the countdown will always start at 14 days no matter what time it is when the user opens the page, just for demonstration purposes. I still haven't done the flipping animation part, but plan on studying how to do it to complete the bonus objective. Feedback is welcome!

Feedback is welcome!

For this project, one problem I encountered is that by using the api link provided in the website, the quote was staying the same even if I reloaded the page or clicked on the dice icon. To solve this, I used the link where the user can input a number ID and it returns the corresponding code. So I added a random number generator on the beginning of the code to generate a number between 1 and 220 (which seems to be the highest number the site accepts) and added this number to the link so that now the quote changes every time the user clicks on the button. Feedback is welcome!

For this project, I uploaded the JSON file to a website and fetched it from there, using an asyncronous function and async / await. Feedback is welcome!

For this project I used an async function with await and fetch to retrieve the data from the JSON file hosted online and input it dynamically to create the expense bars for each day of the week.

First project using a JSON file to add the data dinamically. Feedback is welcome!

** Update **: changed the script to use async / await keywords and fetch to retrieve the data from the JSON file instead of copying / pasting the JSON object into the script

This project has a lot of things happening when choosing the rewards, so it was a good practice of JavaScript. I added lines of code to change the total backed value, number of backers, size of the progress bar, pledges left. The user can choose a default pledge value or input a value of his / her choice. Whenever the number of pledges left reaches zero, the corresponding divs become unavailable for the user to choose. One problem I had earlier on my code was when I was trying to remove the click event listener when a pledge became unavailable. At first, I was trying to invoke an anonymous function that in turn would call the function to display the correct page. Later, I couldn't remove the event listener because a new anonymous function was being created everytime I clicked on the button and because of that I could't target it for removal. I solved this issue by associating the event listener function with the .available_button and .unavailable_button classes instead of the button index. I created a function that would check which buttons were available and asign click events to them only. This function is called everytime one of the continue buttons is pressed to make sure the unavailable buttons are not clickable anymore.

For this project the user can click on each unread message individually (the individual notification will go through the appropriate style changes and the notifications number will change accordingly) or click on the Mark all read button (then all the changes will happen simultaneously). Any feedback is welcome!

Another project using Talwind CSS. For this one, I learned about using .target in my JavaScript to be able to create a variable that keeps track of which button was clicked. I also made the code in a way the only one of the arrows can be clicked at a certain time. The clicked arrow becomes light gray and no longer has cursor:pointer, to show the moment it becomes unavailable. Feedback is welcome!

This was my first project using tailwind css. Still getting used how to use this framework, but I found it very good to style the components and it caused way less things to break in the page because each component has its own classes with the styling parameters, making it easy to spot errors. I tried to use mostly classList.toggle to add and remove the tailwind classes and therefore reducing the number of if...else statements necessary in the code. Also, I added some error messages that were not in the original project to make the form validation more complete (like checking if the card number, month, year and CVC have an appropriate value and the correct number of digits). Feedback is welcome!

Feedback is welcome!

Feedback is welcome!

For this project I used Pixel Perfect Pro browser extension. It allows me to overlay the design images, helping to better position the page elements and saving time in the process. In the JS code, i used a window resize event listener to make sure that if the user leaves the mobile menu open when resizing the screen, it will close and not break the site styling.

For this project, I used a classList.toggle with a condition after the class I desire to toggle on or off (the error message for the e-mail form in this case). Any feedback is welcome!

Used a toggle template from w3schools and adapted it to this project. On the javaScript part, I used the ternary operator instead of using if...else statements.

Feedback is welcome!

For this project I learned about the classList function, that is able to toggle a class on and off from a HTML element. Using it, I don't need to write if...else statements adding and removing properties, and it is able to save a lot of lines of codes.

Feedback is welcome! This challenge is similar to others with the desktop dropdown menu, so I used what I learned on the previous challenges and tried to improve some of the code.