All solutions

Hi guys, It's been a while since I've submitted a solution. I've been working on this one for a while, whenever I'm bored and have some spare time.

I've kinda modified this challenge to incorporate the movies/tv shows using the TMDB-api, to fetch the content from a database.

For authentication I've settled for Supabase. You should be able to create an account and log in with that afterwards. I've created a custom profile page to update user information and upload an avatar. Would be nice if you guys could try it out, I suggest using a temp. mail address.

It's still a work in progress, and I plan to continue working on it. Some stuff that still needs to be implemented/improved/enhanced:

• Bookmark functionality
• Some animations would be nice
• Some restructuring / refactoring
• Accessibility friendly html tags

Hoping for some general feedback as well :)

Hi guys, it's been a while since I've submitted a challenge. I've never used a CSS library before, so I went for Tailwind in this one.

Any comments/suggestions is much appreciated :)

Hi guys, hope to get some help. I used react and redux toolkit for this one (an overkill for this challenge but I wanted to practice it).

When i delete one of the filters, the jobs do not appear back. All that remains after I delete them is the last filtered job.

I have my action to handle that in the features folder under jobSlice, specifically the handleDelete action.

const initialState = {
  jobItems: jobs,
  filter: [ ],
};

const jobSlice = createSlice({
  name: "jobs",
  initialState,
  reducers: {
    handleFilter: (state, { payload }) => {
      if (!state.filter.includes(payload)) {
        state.filter = [...state.filter, payload];

        state.jobItems = state.jobItems.filter(job =>
          [...job.languages, ...job.tools, job.level, job.role].includes(
            payload
          )
        );
      }
    },
    handleDelete: (state, { payload }) => {
      const { item, id } = payload;

      state.filter = state.filter.filter((item, idx) => id !== idx);

      state.jobItems = state.jobItems.filter(job =>
        [...job.languages, ...job.tools, job.level, job.role].includes(item)
      );
    },

The destructured const "item" represents the selected filter like "HTML" , "CSS" etc

Hope to hear from you guys. Thanks :)

Hey Guys,

Would appreciate your comments regarding my code. Anything I could have improved or written better?

One thing that doesn't seem to work is the srcset in my hero img. On mobile widths it doesn't change the image to the mobile one. I'm not sure if I have written it correctly, or maybe I'm not understanding it right. Would appreciate some help on this one. Thanks :)

Hi everyone, I'm trying to practice using react more.

Any feedback is welcome, especially on how my code is written or anything that can be improved in general.

Thanks!!

Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.

I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)

Hi guys, I'm currently learning react and this is my first challenge using the framework.

There are some issues, and hope to receive some feedback.

1. When I select one of Tips, the item gets checked (greyish color). However, when I select the custom tip input, I want the checked style to be gone from the previous selected tip. How do I achieve this?

2. I noticed that when I place a tip of zero in the custom field, it doesn't seem to work/calculate properly. How do I fix this?

Happy coding :)

Hi guys,

Hoping to hear some feedback and what I can improve. Thank you!

Happy Coding :)

Hi guys,

Please provide some feedback. :)

The app isnt perfect, I still have some problems to fix:

1. background-image: url("../../../assets/icon-check.svg"); This is my file path for the check mark inside the button. However, github pages isnt displaying it. Isnt that the relative file path to be used if the file is 3 layers deep?

2. The draggable feature works on the todo items that are already there. However, the code breaks once new todos are added? What am I doing wrong?

Thanks guys :)

Hi guys,

Appreciate any feedback, especially on the following:

• the way I wrote my JS. I'm not sure if that is the right way, but since certain elements needed to be changed while others not, I made use of an array and filtered it as well in order to apply classes to certain elements only. Is this the right way? or is it too work-intensive?

• I'm getting an issue when checking the accessibility in the browser devtools. "Clickable events must be focusable and should have interactive semantics" The arrow icon is inside an my button though. How do I fix this?

• HTML5 markup, especially from an accessibility stand point. I feel like I need to still work on that a lot.

Hi guys, this is my solution to the challenge. It was really fun. Hoping to hear feedback regarding anything and everything about my code.

A few questions that I have:

Pertaining JS

1. Is this a good way to write the JS? I feel like I'm doing so many if/else statements to display the intended content. I feel like I can somehow cycle through it, but wasn't sure how to get it done.

2. The page that is loaded onto the website, is suppose to be the "octocat" user. I have manually set the info in my HTML to display it. How can I fetch the data of that user on first load of the website though?

3. When the website gets first loaded it's suppose to detect the color-scheme and adjust the automatically. I feel like it's working in Firefox but not in Chrome. Also If I toggle between light/dark theme in firefox it adjust automatically, not in chrome?

Pertaining to SASS I've been trying to become better in organizing my code through partials, although it's probably too much for this project. But it's just for me to practice.

1. I'm still not sure if I am doing it right? Is this the way?

2. How do you guys go about styling your html when using the partials? I find it a bit difficult if you are used to just working with 1 single sass/css sheet. I feel like I am jumping back & fourth between folders. Any tips on how to be more efficient?

Hi guys, appreciate any comments or suggestions regarding either the HTML/SCSS or JS file. Anything that can be written better/more efficiently?

Also, for some reason if I run the site on Firefox and click the button it doesn't seem to update the advice after clicking the second time. In Chrome I can update it without any problems. Anything I am missing here?

Hope to hear from you. Thanks!! :)

Hi guys, will appreciate any comments and feedback for this project. I'm focusing on javascript now, so I am hoping to get some feedback on that, eventhough the code for this is just tiny.

I added a custom border while user is typing the email, to signal if it is still wrong or if email is in the correct format. :)

For the custom text to appear when user email input is wrong, I used a " form::after " to inject the message into the content. Is this a good way to do it? Or better to create a blank div and update innerHTML? However the div interfered with the grid I had set up, so I thought the former was a better solution.

Hi guys. It has been a while since Ive done a challenge.

First things first..

Can someone help to actually display my page. I get the 404 error. I used SASS partials for this one with Parcel. Parcel created a dist folder for me which I understand is the one that is suppose to be used for final production. However, when I use the url from github pages it displays the error.

Now regarding this challenge...

I used SASS partials for the first time to practice making a better file structure using the 7-1 pattern. Not sure if I over-complicated things for this challenge. But Im wondering if you guys can have a look if I am structuring it right. I feel like I am not haha :)

Also, if you notice that on the desktop version the text "Mechanical Wireless" header is suppose to be inline with the images. It is not. How can I get that component to be in line with the images using Grid? I ran into a few issues with that as I was transitioning to bigger screens and wanted to modify the layout. Because some of my components were in divs that had their own grid system. So another question I have is, how do I move a component that is part of another grid system out of it, like that header? Or is it better to structure my html differently so it makes it easier to move things around later on.

Appreciate all the help, and hopefully someone can tell me how to get my site to actually work haha :)

Hi Guys, I look forward to any comments and suggestions on this challenge. I also added a little animation for the progress-bar just for fun.

I couldn't figure out how to create the tooltip-like edge on the remaining storage box on the desktop version. I'd appreciate some tips on that :)

Happy coding!!

Hi guys, so this is my version of the Huddle Landing page. I really enjoy working on complete page challenges with a header, different sections, and a footer.

2 Questions: In this project I used fluid font-sizes starting on the desktop version like this font-size: calc(2rem + 1v); . Is this common practice or do you just set fixed font-sizes during different media queries?

For the curved edges around some sections, I added 2 img tags before and after the section. One containing the file to the mobile version, the other to the desktop one. In my scss mobile version file I then simply put "display: none" to the desktop version to hide it. Is this a valid approach or is there a better way to hide/display elements during different screen sizes??

Any other feedback/suggestions always welcome :) Happy coding.

This was quite a challenging project to accomplish, although very rewarding once I finished it. It was nice to build a full page with all the components including a realistic footer section.

I'd be happy to hear any feedback and suggestions. I feel that my SCSS is quite messy. Im hoping to improve the way i approach bigger pages like this with a lot of content.

Hoping to once again hear some feedback from the community regarding my solution. :)

Again, I appreciate any general comments and feedback!!

If you notice, there is no hover state on the social media icons. I had trouble with this part. My initial thought was to place the svg code directly into the html, and then edit its fill color in CSS. However it was not working. The code looked like this:

svg:hover { fill: pink; } However, it didn't change it's color. Any help on this is much appreciated :)

Again, I would appreciate any comments or feedback on the structure of the HTML and the way the SASS was written. Could anything be done more efficiently or better?

Thanks :)

Hope to hear some feedback from your guys on this challenge.

Happy New Year and Happy Coding!!

Hey guys, so this is my take on the challenge using SCSS. I once again would love to hear some feedback on anything to could be done better. Whether it is the HTML structure or maybe in terms of styling the component. I also liked practicing more on media queries in this challenge to make the layout different as the viewport increases. :)

Hoping to get some feedback again on the HTML5 structure and maybe on the SASS style sheet. Could it be written in a more efficient way? Any general tips or improvements to be made are always welcomed ;) thanks

So this is my take on the "nft preview component" challenge. I used sass for this one since i wanted to practice using variables and mixins. I tried to make the site as responsive as I could so that it would look good on desktop verions, as well as tablets, and even the small smart phones like the iphone-5.

I'm generally curious what you guys think of the html structure of the page and the way it was styled. Could it be done in a more efficient way? Any feedback is greatly appreciated.

Happy Coding and Happy Christmas :)