All solutions

What are you most proud of, and what would you do differently next time?

I am proud of finally learning how to perform data manipulation, especially in the context of filtering data effectively.

What challenges did you encounter, and how did you overcome them?

One significant challenge I faced during this project was working with the data.json file. Given the data, we needed to create tablets based on role, level, languages, and tools.

While creating and populating tablets, role and level was straightforward, handling languages and tools required additional tweaking. Some listings needed to show tools first, others languages first, or a mix between the two. To address this, I created a function called createTabletOrdering and a helper function called alternateOrderingTablet.

The createTabletOrdering function incorporates the alternateOrderingTablet function to handle the languages and tools arrays, ensuring that the items are added in the correct sequence based on specific requirements for different job listings.

The alternateOrderingTablet function handles cases where one array (either languages or tools) is longer than the other by iterating up to the length of the longer array. It uses a flag, prioritizeTools, to determine whether to prioritize adding tools before languages or vice versa.

This flexibility allowed me to customize the ordering based on specific requirements for different job listings.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

I'm proud of the progress I've made in developing reusable components for this project. Learning to create modular, reusable components has not only enhanced the efficiency of my workflow but also improved the overall maintainability of the codebase.

Additionally, I take pride in successfully implementing both the cart system and different image galleries for various viewports. These components required careful planning and attention to detail to ensure seamless functionality across different devices and screen sizes.

Looking back, one thing I would do differently next time is to approach this project as a full-stack e-commerce web application instead of limiting it to frontend development with JSON file data.

Building a full-stack application would provide valuable experience in integrating backend functionality, such as database management and user authentication, which are essential components of real-world e-commerce platforms.

This approach would offer a more comprehensive learning experience and enable me to develop a deeper understanding of the entire web development process from end to end.

What challenges did you encounter, and how did you overcome them?

This project presented several challenges, particularly in implementing the lightbox gallery functionality and managing data manipulation for the image gallery and cart system.

One significant challenge arose while developing the lightbox gallery for desktop. Initially, the small thumbnail images were not transitioning to the large product image upon clicking, and the previous and next buttons were not functioning as expected. These issues stemmed from using the same component for mobile, tablet, and desktop views.

To address these challenges, I made adjustments to the dataset attributes for the lightbox gallery. By ensuring that each image had unique and standalone dataset attributes, I could easily target them in the DOM traversal process.

Additionally, I implemented event delegation, specifically bubbling up to the parent element, to handle click events more efficiently. This approach allowed me to capture clicks on any image within the gallery and determine the appropriate action based on the clicked element's dataset attributes.

Once I successfully bubbled up to the parent element, I parsed the dataset attributes to identify the relevant information for each image. This included determining the current index of the clicked image within the gallery, enabling smooth transitions between images when navigating using the previous and next buttons.

By addressing these challenges and implementing solutions such as dataset attribute management, event delegation, and DOM traversal techniques, I was able to overcome obstacles and enhance the functionality of the lightbox gallery component.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

In this project, I'm particularly proud of how I implemented DOM manipulation to dynamically update various components.

By leveraging JavaScript, I was able to create a seamless user experience where elements such as pledges, bookmarks, navigations, modals, and progresses could be dynamically rendered and updated based on user actions and data changes with data persistence using Local Storage.

Additionally, I'm proud of how I applied encapsulation principles to organize my code into reusable components. Each component, such as pledges or progresses, encapsulated its functionality, making the codebase more modular, maintainable, and easier to understand.

Looking back, there are a few things I would approach differently in future projects. Firstly, I would pay more attention to optimizing performance, especially when dealing with large datasets or frequent DOM updates. This could involve implementing more efficient algorithms or leveraging libraries/frameworks designed for performance optimization.

Secondly, I would enhance the user interface by focusing more on accessibility. Ensuring that the application is usable by all users, including those with disabilities, and providing a consistent experience across different devices would greatly improve its overall usability and accessibility.

Overall, this project was a valuable learning experience, and I'm excited to apply the lessons learned to future projects to create even more robust and user-friendly applications.

What challenges did you encounter, and how did you overcome them?

One of the key challenges I faced in this project was ensuring that each pledge made by the user accurately updated the progress bar, total money raised, and total backers.

Achieving this required synchronization between the user interface (UI) elements, specifically the input fields for pledges and the corresponding radio buttons.

Initially, I attempted to address this challenge by assigning unique IDs to each input field of type number. However, I also needed a mechanism to link these input fields with their corresponding radio buttons, ensuring that the selected radio button represented the same pledge amount entered by the user.

To solve this, I utilized the concept of datasets, assigning the same unique ID to both the radio button and its associated input field of type number.

This approach enabled seamless communication between the UI elements, allowing me to retrieve each pledge's value accurately and update it in local storage.

As a result, the data could be dynamically rendered, reflecting the user's actions in real-time.

By leveraging datasets and maintaining consistency in ID assignments, I successfully overcame the challenge of synchronizing user inputs with the UI elements, ensuring accurate and dynamic updates to the progress bar, total money raised, and total backers.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

I am proud to only use SCSS to combine :checked pseudo-class with input checkboxes and General Sibling Combinator (~) to create a pricing component with toggle

What challenges did you encounter, and how did you overcome them?

A challenge I came across was using General Sibling Combinator.

It wasn't working as expected because General Sibling Combinator can only be used to select elements that share the same parent.

Thus, I had to refactored my HTML layout to fit this mandatory requirement

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

I am proud to utilize encapsulation and closures to make a notifications page with persistent data using localStorage

Encapsulation:

notificationsLogic encapsulates the data handling and processing logic.

notificationsUI encapsulates the presentation and HTML content manipulation logic.

Closures:

Closures aren't explicitly shown in this code, but they occur implicitly when functions access variables from their containing scope (e.g., fetchNotificationData accessing this.checkLocalData). LocalStorage Handling:

localStorage

checkLocalData and updateLocalData methods are used to interact with localStorage.

What challenges did you encounter, and how did you overcome them?

Deploying this site to Netlify was a little bit tricky as I am using Vite. The starter file images were stored in assets/images file path, but when deployed to Netlify, the images were not dispalying at all

That is because for Vite, we needed to store it in the root file path or a folder called public which acts as the root

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

For this challenge, instead of creating HTML layout inside .html, I have stored all the accordion data using json file.

I then fetched it and dynamically populated and created elements using JavaScript.

This approach is much better than writing out 4 accordions using html when I can write once and use for loop to populate all accordions at once

What challenges did you encounter, and how did you overcome them?

One challenge was when I tried to use height to perform transition effects when accordion is being expanded and collapsed

However, the height property, when transitioning from auto (which is often the initial value for height) to a specific height, can't be transitioned directly because the browser doesn't know the final height in advance.

Therefore, I used max-height because it has a finite value that the transition can interpolate between.

However, instead of hard-coding the max-height in css , I dynamically checked the scrollHeight of each accordion, ensuring that the max height of each accordion is `dynamically calculated.

Here is the code snippet:

// Calculate the height based on the content's scroll height
const contentHeight = isExpanded ? accordion.scrollHeight + "px" : "0";

// Apply the height as max-height to enable transition
accordion.style.maxHeight = contentHeight;

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

Proud to learn how to implement the dropdown functionality for desktop and mobile

What challenges did you encounter, and how did you overcome them?

When implementing a dropdown menu for desktop, I faced issues with the hover state not working as expected.

Specifically, the dropdown menu would close as soon as the mouse left the button that opens the dropdown, preventing interaction with the menu items.

To resolve this, I created a function startCollapseTimeout that manages the dropdown menu's visibility based on mouse events.

Here’s how it works:

Mouseenter Event:

• When the mouse enters the button or menu, it clears any existing timeout to keep the menu open.

Mouseleave Event:

• When the mouse leaves the button or menu, it starts a timeout to collapse the menu after a short delay.

• This allows the user to move the mouse from the button to the menu without it closing.

The key part of the solution was to check if the relatedTarget (the element that the mouse is moving to) was either inside the menu (in case of mouseenter) or outside the menu (in case of mouseleave).

This check ensures that the menu only collapses when the mouse is completely outside both the button and the menu, thereby allowing the user to interact with the dropdown menu.

Thus, using relatedTarget helped manage the dropdown menu's behavior by ensuring that the menu only hides when the mouse is not moving between related elements (button and menu), providing a smoother and more intuitive user experience.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using simple grid then transitioned to desktop suign nested grid. If I were to do this project again, I would use flexbox instead of grid.

What challenges did you encounter, and how did you overcome them?

For this project, I was trying to create a sliding right transition for mobile nav menu.

However, I found out that transition property doesn't work with display: block and display: none. CSS transitions cannot animate changes between these two states.

Instead of using display, I controlled the visibility of the menu with properties that can be animated, like opacity and transform.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using Flexbox and then transitioned into desktop with Flexbox.

If I were to do this project again, I would use Grid instead of Flexbox.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using Grid with rows and transitioned to desktop using grid-template-areas for desktop layout

If I were to do this project again, I would use Flexbox instead of Grid.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using Grid with a two row / a single column and transitioned to desktop with a single row and two columns

If I were to do this project again, I would use Flexbox instead of Grid.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using Grid with row and transitioned to desktop with one row and three columns

If I were to do this project again, I would use Flexbox instead of Grid.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using Grid with rows and transitioned to desktop with two rows and columns

If I were to do this project again, I would use Flexbox instead of Grid.

What are you most proud of, and what would you do differently next time?

I did mobile-first approach using Flexbox then transitioned into Grid layout in desktop. If I were to do this project again, I would do desktop-first approach and only use Flexbox

What challenges did you encounter, and how did you overcome them?

Applying grid rows and columns can be a hassle as sometimes I need to trial and error but eventually it will always work out.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

Proud to learn grid layout with hands on experience creating cards using grid

What challenges did you encounter, and how did you overcome them?

Placing items using grid-area was the hardest part. Nonetheless, it was accomplished with some bit of research.

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

This project helped me tackled the usage of mixins for different borders

I would learn how to use other SCSS styling

What challenges did you encounter, and how did you overcome them?

It took me some time to get used to learning SCSS as this was my second time using it. However, for the mixins, I had to read the SASS documentations to understand what was needed to be done.

Once I read the documentation, it was straightforward on how to implement it.

For those of you, who is curious on how it was done, here is the code snippet:

@mixin cardContainerBorder($color) {
  &::before {
    content: "";
    display: block;
    border-top: 4px solid $color;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
// then use it like so
    &.supervisor {
      @include cardContainerBorder(var(--cyan));
    }
    &.team-builder {
      @include cardContainerBorder(var(--red));
    }
    &.karma {
      @include cardContainerBorder(var(--orange));
    }
    &.calculator {
      @include cardContainerBorder(var(--blue));
    }

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

I am proud to use SASS / SCSS for this project and develop this Product Preview Card using mobile first approach

Things I would do differently:

1. Use CSS frameworks
2. Develop using desktop first approach

What challenges did you encounter, and how did you overcome them?

When writing my styling, I forgot I was using scss, so I simply just wrote css. However, once I finished the project, I refactored my stylesheet with scss

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

Creating this recipe page allowed me to understand the appropriate HTML elements to use to structure the page based on the following design

Styling the page allowed me deep dive the fundamentals of flexbox, media queries and CSS specificity

If I were to rebuild this recipe page again, I would use CSS Grid to practice using the grid system to layout the page instead of flex box

What challenges did you encounter, and how did you overcome them?

One challenge I encountered was with the nutrition section, styling the table content.

For the th and td content, I was unsure how to push the th to the far left and td elements to the far right as much as possible .

Using MDN Web Docs, I figured out the best way to do this is to use flex-basis to grow the content as much as possible so I set flex to 1 for th and td to grow them evenly

What specific areas of your project would you like help with?

At the moment, none.

What are you most proud of, and what would you do differently next time?

Creating this social card was a great experience, and a very fun project. It helped me deep dive the fundamentals of flexbox and CSS transitions.

I would probably choose a different coloring scheme, so I can practice on color pairing as much as I can.

What challenges did you encounter, and how did you overcome them?

While I was creating my hover effect to display my social icons, there was an issue where the horizontal scroll bar would appear because I have set my icons position to right: -100% .

Setting my icons position to right: -100% triggered content the my overflowing the horizontal axis of its container (.card-content .card-content-button).

To fix this issue, I simply used overflow-x:hidden to hide any any content that overflows the container horizontally will be clipped and hidden from view. Thus, fixing my scrollbar issue.

What specific areas of your project would you like help with?

Since, I used abbr tag with a title, the text is presented by browsers as a tooltip when the mouse cursor is hovered over the element.

Without using Vanilla JavaScript, how can I style this default tooltip using only CSS?

What are you most proud of, and what would you do differently next time?

Creating this blog card was a great experience. It helped me deep dive the fundamentals of flexbox and simple animations. I would probably choose my own coloring scheme, so I can practice on color pairing.

What challenges did you encounter, and how did you overcome them?

Since, we were giving assets of the Figtree font, I wanted to use @font-face rule to load the font. However, there was issues of not loading the fonts correctly.

To fix this, I went to Google Fonts and simply copy and paste @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"); onto my stylesheet and it worked!

What specific areas of your project would you like help with?

I wanted to know why @font-face rule didn't load correctly. Here is the code snippet:

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype'),
         url('/assets/fonts/static/Figtree-SemiBold.ttf') format('truetype'),
         url('/assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype'),
         url('/assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
}

What are you most proud of, and what would you do differently next time?

I am proud to learn how to center elements using margin: 0 auto Instead of using margin:0 auto, I would use flex box to center elements

What challenges did you encounter, and how did you overcome them?

Issue I came across is when using margin: 0 auto to horizontally center an element, it requires a specified width for the element to work as intended.

The margin: 0 auto rule sets the top and bottom margins to 0, and the left and right margins to auto. This automatically centers the element horizontally within its containing element, but it requires the element to have a specified width.

If the width of the element isn't specified, the browser doesn't know how wide the element should be, so it can't calculate how much space should be allocated to the left and right margins to center it.

In such cases, the element will simply take up the entire available width of its containing element, and margin: 0 auto; won't have any effect on centering it.

What specific areas of your project would you like help with?

I would like some feedback's on my CSS code and in what way, can I have written it differently to yield the same result: CSS Code