All solutions

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

This was a fun project, I had to learn how to divide a large task into smaller components

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

The header and lightbox were a bit of a challenge, but I persevered through.

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

Any feedback is welcome!!!

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

Nothing of note

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

none

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

Any feedback is welcome

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

The header of the home page was a pain

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

updating the grid at each breakpoint was not fun

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

Any advice regarding the header is welcome

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

:) Another deceptively simple project, I am proud of sticking to accessibility principles and limiting myself to as few aria- attributes as possible. I stuck to aria-invalid and aria-describeby for the error messages so that screen readers can read with the proper context.

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

Sticking with accessibility was a pain but I persevered

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

My js file might be a little cluttered, any help there is welcome!!! also any feedback on any other section is helpful!!!

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

Beginning the project with accessibility in mind introduced me to the details and summary tag which made the whole project easier

proud of this html for a single accordion

        
          What is Frontend Mentor, and how will it help me?
          
        
        
          Frontend Mentor offers realistic coding challenges to help developers improve their 
          frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for 
          all levels and ideal for portfolio building.
        

and the associated css

details > summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--summary-size);
    font-weight: 600;
    color: var(--heading-color);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
details > summary:hover {
    color: var(--summay-hover-color);
}
.summary-icon {
    width: var(--summary-icon-dimension);
    height: var(--summary-icon-dimension);
    background-image: url(./assets/images/icon-plus.svg);
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}
details[open] > summary .summary-icon {
    background-image: url(./assets/images/icon-minus.svg);
}
details > p {
    margin-top: 1.5rem;
    font-size: var(--details-size);
    color: var(--details-color);
    line-height: var(--details-line-height);
}

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

Nothing much

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

Any feedback is welcome!!!

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

This was a fun one, tried to focus on making it accessibility driven patterns, primarily focusing on using semantic HTML

proud of the ratings implementation in particular,

    
    1

    
    2

    
    3

    
    4

    
    5

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

actively sticking to semantic tags was quite the effort.

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

Any feedback is welcome!!!

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

A pretty fun project, proud of my class namings.

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

Knowing what class names to give, I was looking at it from the point of view of receiving data from the server

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

Any feedback is welcome!!!

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

very proud of acheiving the layout, It looked deceptively simple at first.

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

I was forced to understand flexbox properties, especially the 'flex-shrink'

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

Any feedback is welcome!!!!

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

Nothing in particular, I am proud of it all

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

I need to study up on transitions and transforms to know how to apply them effectively.

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

Any feedback is welcome!!!

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

Whewww!!! . . . . This looked deceptively simple at first, definitely worthy of being an intermediate ranked project!!!

getting the strength display was fun and is what I am most proud of.

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

A lot like figuring out how copying to the clipboard works, determining the strength of a password using regex and the css tricks involves, and also overriding the default styling for html input elements.

loads of googling and chatgpt helped.

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

nothing for now!!!

Any tips to improve is welcome

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

I am super proud of the whole app, particularly the javaScript section where I had to do some validation to ensure only numbers are accepted and making them not to be more than 2 decimal places as most currencies are

Heres my js validator

const inputChecker = el => {
    el.addEventListener('input', function() {
        const twoDecimalPlaces = /^\d*\.?\d{0,2}$/;

        if (!twoDecimalPlaces.test(this.value)) {
            this.value = this.value.length > 1 ? this.value.slice(0, this.value.length - 1) : '';
        }
    });
}

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

Working with regex was unfamiliar but google and gpt helped, also making the code DRY was a little bit of a challenge.

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

None, but any feedback is welcome!!!

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

proud of how I utilized the 'data-' attribute

in CSS =>

#main .daily,
#main .weekly,
#main .monthly {
    display: none;
}
#main[data-theme='daily'] .daily,
#main[data-theme='weekly'] .weekly,
#main[data-theme='monthly'] .monthly{
    display: flex;
}

in javascript =>

function changeToTheme(btn) {
    const btns = [dayBtn, weekBtn, monthBtn];

    for (const btn of btns) { 
        btn.classList.remove('active');
    }

    btn.classList.add('active');
    main.dataset.theme = btn.id;
}

dayBtn.addEventListener('click', () => { 
    changeToTheme(dayBtn);
});

weekBtn.addEventListener('click', () => { 
    changeToTheme(weekBtn);
});

monthBtn.addEventListener('click', () => {
    changeToTheme(monthBtn);
 });

in HTML

               
                    ${item.timeframes.weekly.current}hrs
                    Last Week - ${item.timeframes.weekly.previous}hrs
                
                
                    ${item.timeframes.daily.current}hrs
                    Yesterday - ${item.timeframes.daily.previous}hrs
                
                
                    ${item.timeframes.monthly.current}hrs
                    Last Month - ${item.timeframes.monthly.previous}hrs
                

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

working with the 'data-' attributes was a little confusing, loads of googling helped

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

None for now. But any feedback is welcome, Thanks!!!!

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

During this project, I learned about form validations and handling form data. Here's a snippet of the JavaScript code I used for email validation:

const validateEmail = (email) => {
    const re = /\S+@\S+\.\S+/;
    return re.test(email) && email.length > 0;
};

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

Nothing major.

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

Nothing for now, any tips on how to improve are welcome!!!

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

Getting the mobile and desktop switch right was fun.

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

Figuring out how to handle the tooltip and changing the footer was a bit challenging. Created two different footers to handle the mobile state and also created a seperate tooltip component.

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

Nothing for now.

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

Getting it responsive was not fun, tried following some of Andy Bell's 'every layout' principles.

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

Had to learn more about the CSS clamp function.

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

I just need to practice more.

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

Proud of using CSS GRID for the general layout.

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

Understanding values for grid row.

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

nothing, just got to practice more.

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

First time trying out grid

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

Have to learn how to adjust lengths smoothly

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

Any tips on CSS clamp() would be welcome.

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

Great intro to responsive design

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

Getting the breakpoints.

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

None

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

Breaking down the design in subsections and handling them. Need to pay attention to semantic tags.

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

Finding the right semantic tag, always tempting to just go with div.

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

Nothing

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

Have to learn the box model more intuitively.

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

knowing what tag to wrap within the other.

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

Nothing.

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

Just found out about CSS clamp().

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

None

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

None

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

This was a review of basic htm/css principles

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

None

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

None