Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
14
P
kephalosk
@kephalosk

All comments

  • P
    Emmanuel Lopez•530
    @EmLopezDev
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that I didn't give up and pushed through finishing the challenge even in moments were I felt it sucked. There were moments were in trying to fix one issue or add a functionality I broke something that was working. Working through those moments were hard but at the same time satisfying because it thought me how things are working and how to prevent this from happening in the future. Learning how to make JS modular was interesting I still don't fully get it but I will look more into it. Creating a toggle switch was fun and also adding light/dark theme. One thing I would do differently is planning a little more ahead of time before even starting to code. I find myself sometimes fumbling certain things because I wasn't prepared for it, like light/dark theme. I wasn't sure if I was going to add it until well after I created a bunch of components. I then had to go back and make adjustments to fit the addition of light/dark theme.

    What challenges did you encounter, and how did you overcome them?
    • Creating a toggle switch was bit of a challenge but I watched a few tutorials and was able to get it to work.
    • Setting up light/dark theme was only a challenge because I added it after creating some of the component which then required me to update some of them to get it to work. Now I know to plan for it better from the beginning.
    • Handling so much DOM manipulations became challenging at times because getting one thing to work would sometime break something that was already working. Slowing down and going line by line and diving deep into debugging helped a lot to understand what was going on and how to avoid it for next time.
    What specific areas of your project would you like help with?

    The three JavaScript files:

    • Was the way I handled all the JS a good approach? What could have made it better?
    • Is there a better way to fetch data and pass it along?
    • Is there a better way to handle a light/dark theme?
    • In general what isn't good and how can I make it better?

    Frontend Quiz

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted about 2 months ago

    Solid Solution.

    Was the way I handled all the JS a good approach? What could have made it better? --> In general: yes. clean code structure, consts at top, logic below, whitespaces to separate logic, semantic function names.

    Is there a better way to fetch data and pass it along? --> using the fetch-API is totally fine imho.

    Is there a better way to handle a light/dark theme? --> its the common solution to save darkMode state in localSorage and read it where needed

    In general what isn't good and how can I make it better? --> minor things. for example extract logic/code in distributed files, but as soon as you start with frameworks like react you'll do that one day automatically.

    Keep up the good work :)

    Marked as helpful
  • P
    Coder-Liz•610
    @Coder-Liz
    Submitted 4 months ago

    Password Generator App

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 2 months ago

    Solid Solution. :)

    I had a look at your code and noticed one thing. You change the styling of your elements in-line like here:

    // Apply styling to strength bars
    const styleBars = (bars, color) => {
      bars.forEach((bar) => {
        bar.style.backgroundColor = color;
        bar.style.borderColor = color;
      });
    };
    

    This can lead to conflicts with s/css sheets. A more resilient way is to use css classes in javascript to change the styling.

    // Apply styling to strength bars
    const styleBars = (bars, color) => {
      bars.forEach((bar) => {
        bar.classlist.add(`${color}`)
        bar.classlist.add(`${color}`)
      });
    };
    

    and if color is a defined string (e.g. green) you would have corresponding in s/css:

    .green {
      border-color: hsl(127, 100%, 82%);
      background-color: hsl(127, 100%, 82%);
    }
    

    This way, the styling is only manipulated by s/css and there are no possible conflicts between javascript and s/css anymore.

    Keep up the good work. :)

    Marked as helpful
  • sherimin•380
    @sherimin
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    In this application, I refreshed my knowledge of React hooks to create this tip calculator. The tip amount is calculated simultaneously as the user inputs the total bill, tip percentage, and number of people, providing instant feedback. I also enhanced my understanding of adding active or error stylings to elements, for better user experience through intuitive form validation.

    I think for next time, I would refactor the code with a useReducer hook for cleaner code structure when dealing with multiple state variables

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

    None that I can think of, but any input or advice is welcome!

    Tip calculator app - React

    #react
    1
    P
    kephalosk•400
    @kephalosk
    Posted 3 months ago

    Nice solution. I like the counters that you used in the input fields. I also had a look at your code. I noticed that you coded everything in one god component. That's ok in the beginning to get familiar with React. As you make more progress you could think of breaking your code down into atom components with single responsibilities. In your given example: 3 separate custom hooks for useTipCalculation, useInputHandling and useResetInput. From your html-template you could extract components like BillInput, TipInput, PeopleInput and Result and use App as a container for these. Modular structures like this make your code easier to read, to understand and to maintain. A second hint I can give you is to use useMemo, useCallback and React.memo to optimize the performance of React. E.g.you have the function tipCalculation(). At this moment this functions is redefined with every new render which costs valuable performance and makes this function unstable. I guess that could be a reason why you don't include tipCalculation in the dependency Array of your useEffect(), because with unstable dependent functions useEffect gets triggered with every render. with useCallback() you can prevent React from doing that if no dependent value has changed:

    const tipCalculation = useCallback(() => {
        let tipDecimal = 0
        if (Number(numOfPeople) > 0) {
          if (customTip) {
            tipDecimal = customTip / 100;
          } else {
            tipDecimal = tipPercentage / 100;
          }
          
          const totalTip = billAmount * tipDecimal;
          const totalAmountWithTip = billAmount + totalTip;
    
          setTotalPerPerson((totalAmountWithTip / Number(numOfPeople)).toFixed(2));
          setTipPerPerson((totalTip / Number(numOfPeople)).toFixed(2));
          setError(false);
        }
      },[billAmount, numOfPeople, tipPercentage, customTip]);
    

    Now you have a stable function that is only recalculated if billAmount, numOfPeople, tipPercentage or customTip change. All over a compact solution. Keep up the good work :)

    Marked as helpful
  • P
    Valeria Montoya•450
    @ValeriaMontoya
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    It was an exciting opportunity to apply my knowledge of JavaScript and asynchronism. Additionally, it marked my first experience working with JSON files, which added an extra layer of learning and growth.

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

    Writing readable asynchronous JavaScript was challenging, so I ended up using the async/await syntax.

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

    I'd love to hear your feedback on JavaScript 🤓

    Responsive time tracking dashboard

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    Nice solution :) I had a look at your js-script. I noticed you used defer in your index.html and document.addEventListener('DOMContentLoaded',...) in your script.That is obsolete/redundant. e.g. at top of the script you load the buttons. that is only possible because the DOM is already loaded at this point. If you want that defaultButton-click happens at last you could pack it into a function and wait for the others before. You could also improve the structure of your js-code by leading the reader through the code semantic and chronological. You could start with some kind of Entrypoint at the top and giving clear steps from there for a cleaner structure, e.g. here is the exact same code you wrote, just in a chronological order and semantically structured. :

    await initializeApp();
    
    async function initializeApp() {
        await addEventListenersToButtons();
        initializeStatsWithWeeklyValues();
    }
    
    async function addEventListenersToButtons() {
        const buttons = document.querySelectorAll('.profile__button');
    
        buttons.forEach((button) => {
            button.addEventListener('click', async (event) => {
                await handleButtonClick(buttons, event);
            });
        });
    }
    
    async function handleButtonClick(buttons, event) {
        const clickedButton = event.target;
        const period = clickedButton.id;
    
        buttons.forEach((button) =>
            button === clickedButton
                ? button.classList.add('profile__button--active')
                : button.classList.remove('profile__button--active')
        );
    
        await updateStatsByPeriod(period);
    }
    
    async function updateStatsByPeriod(period) {
        switch (period) {
            case 'daily':
                await updateStats(period, 'Yesterday');
                break;
            case 'weekly':
                await updateStats(period, 'Last Week');
                break;
            case 'monthly':
                await updateStats(period, 'Last Month');
                break;
        }
    }
    
    async function updateStats(period, periodLabel) {
        const currentTimeValues = document.querySelectorAll('.stats__current');
        const customPeriod = document.querySelectorAll('.stats__period');
        const previousTimeValues = document.querySelectorAll('.stats__value');
        const data = await fetchData();
    
        data.forEach((element, i) => {
            currentTimeValues[i].textContent = `${element.timeframes[period].current}`;
            customPeriod[i].textContent = periodLabel;
            previousTimeValues[i].textContent = `${element.timeframes[period].previous}`;
        });
    }
    
    async function fetchData() {
        try {
            const response = await fetch('/data.json');
            return response.json();
        } catch (error) {
            console.error(`Could not get data: ${error}`);
        }
    }
    
    function initializeStatsWithWeeklyValues() {
        const defaultButton = document.getElementById('weekly');
    
        if (defaultButton) {
            defaultButton.click();
        }
    }
    

    As a rule of thumb you can ask, if a code-block is greater than 20 lines if it would be better to split it down in functions with meaningful names. if you start to code like this you don't even need a documentation because then your code is the documentation. Keep up the good work :)

    Marked as helpful
  • daniel•205
    @danielashjari
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    the things I'm most proud of:

    • readable clean code
    • the time took me to do this project
    • a good validation code (with the help of kiara523)

    things I'd do differently next time:

    • use a framework for validation
    • use a different approach to toggle elements
    What specific areas of your project would you like help with?

    i've put the element in the center but its not like that in the screenshots, how should i fix it

    • how to toggle elements using
    element.style.display='none';
    element.style.display='flex';
    
    • how to choose an img that wouldn't have problem when published in github pages

    Newsletter sign up with success message

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    Hi, solid solution :) I see you are using 2 css classes to toggle visibility. That is a bit redundant and leaves room for bugs, because you have 4 possible states instead of 2 (hidden/flex/noHiddenNoFlex/hidden+flex)

    messageHolder.classList.toggle('hidden');
    messageHolder.classList.toggle('flex');
    

    A better approach is to set your component to display: none; and add 1 toggle-class to set it to flex, e.g.:

    messageHolder {
      display: none;
    
      &.active {
        display: flex;
      }
    }
    

    now just can just do only 1 toggle and your component is more stable because it now has only 2 states (display-none/display-flex)

    messageHolder.classList.toggle('active');
    

    And I saw in-code-styling in your code:

    email.style.backgroundColor = "rgba(255, 98, 87, 0.17)";
    

    It's better to avoid in-code-styling and do it the same way like you did with the toggle-class. In-code-styling can get in conflicts with css-files. So it's better to control the styling only via css-files/css-classes. Keep up the good work :)

    Marked as helpful
  • LincolnBollschweiler•350
    @LincolnBollschweiler
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Figuring out Github Pages for a vite.js build, deploy workflow, and yaml was the biggest challenge.

    Also happy that I saved off a copy of my base setup for use in upcoming projects.

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

    The biggest hurdle was figuring out that Vite's documentation, suggesting that a default vite.config.js would work, was incorrect. The packaged css and js need to be accessed from the dist root with base: "./", NOT with base: "/" (which comes free, no config).

    I tried to change the raw html <head> tag to point to "./" for the assets files, but it just resets on refresh.

    In the end, I made a best guess in updating vite.config.js and it worked.

    Responsive card w/ javaScript

    #jquery#vite#sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    nice solution :) I noticed your deep nested s/css structure:

    ...
                &::after {
                  content: "";
                  position: absolute;
                  top: 100%;
                  left: 50%;
                  transform: translateX(-50%);
                  border: 0.5rem solid transparent;
                  border-top-color: var(--darkGrayishBlue);
                }
              }
            }
          }
        }
      }
    }
    

    It's better to flatten the hierarchy. That looks cleaner and improves readability.

  • P
    Matthieu Bonjour•270
    @Matthieu83600
    Submitted 5 months ago

    Meet Landing Page using HTML SASS

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    nice solution :) I went through your s/css code and noticed some deep-nested elements:

    .hero {
        &__img {
          margin-block-end: 4.5rem;
        }
        &__app {
          margin-inline: 7.2406em;
          &-title {
            font-size: base.$fs-48;
          }
          &-button {
            flex-direction: row;
            gap: 17px;
          }
        }
      }
    

    That is problematic because other devs could think that e.g. hero__app-button would inherit the properties from his parent element hero__app, but that is not true. You have there 2 different css classes that are not related too each other. So, it is better to separate them. That gives your css code a cleaner look and improves readability, e.g.:

    .hero {
    ...
    }
    
    hero__app {
      margin-inline: 7.2406em;
    }
    
    hero__app-button {
      flex-direction: row;
      gap: 17px;
    }
    
    hero__app-title {
      font-size: base.$fs-48;
    }
    
    hero__img {
      margin-block-end: 4.5rem;
    }
    
  • Gabriel Barimboim•210
    @Gbw699
    Submitted 5 months ago

    Responsive grid section created with Angular 18, Sass and SEO

    #angular#sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    Nice solution :) I had a look at your card.component.scss and noticed the deep nested structures:

    .container {
    ...
      header {
    ...
    
        .name-container {
          p {
            margin: 0;
          }
    ...
        }
      }
    ...
    }
    

    In S/CSS it's best practice to avoid deep nesting of elements. A flatten hierarchy improves the readability of your code, e.g.:

    .container {
      padding: 1.15rem 2.3rem;
      border-radius: 10px;
      background-repeat: no-repeat;
      background-position: right 2rem top 0;
      background-size: 100px;
    
      @media (min-width: 1200px) {
        background-position: right 6rem top 0;
      }
    }
    
    .name-container {
    ...
    }
    
    header {
      display: flex;
      align-items: center;
      gap: 2rem;
    }
    
    p {
      margin: 0;
    }
    
    Marked as helpful
  • Mohamed Badr•80
    @Mohamed-Badr-Saad
    Submitted 6 months ago

    Responsive 4 cards page using CSS Grid, Flexbox ,HTML5

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    solid solution :) I had a look at your s/css files and saw this:

    main {
        header {
            article {
                width: 100%;
                p {
                    width: 60%;
                }
            }
        }
    }
    

    That's an over-nested structure. Avoid deep nesting in s/css. It makes the code harder to read and maintain. Better approach is to flatten the structure. This improves readability:

    article {
        width: 100%;
    }
    
    article p {
        width: 60%;
    }
    
  • Mouad•110
    @mouadbimk
    Submitted 5 months ago

    https://mouadbimk.github.io/product-preview-card-component-main/

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    solid solution :) In Desktop-View you have a little gap at the bottom fo your product__content-div. That makes it look a bit unaesthetic. I struggeled with the same. One way to improve it could be to use flex-end, e.g.:

    .product__content {
      flex: 1;
      width: 50%;
      background-color: hsl(0, 0%, 100%);
      height: 100%;
      padding: 1.875rem;
      display: flex; /*enable justify-content: flex-end;*/
      flex-direction: column; /*place content vertically*/
      justify-content: flex-end; /*align content to end of column*/
    }
    

    With this the gap is still there, but it's now at the top where it is less visible.

  • P
    Scott•310
    @ldg
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy with my use of mixins in this challenge. I wanted a simple way to add all the text styles from the project's style guide as a single property. The mixins did just that, I was able to add all the text preset styles to a mixin an call them with an @include mixin-name to my stylesheets.

    If I was to do it again, I think I'd try to add an arguement to the mixins, so I could specify whether the font-weight was regular or bold. I notice that there are instances where I have mixins that are duplicate, with the exception of the font-weignt. I think that would make the Sass a bit more efficient.

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

    I haven't really worked with html tables all that much, so I had to do some reading on MDN to understand how to use them.

    Sass, mobile first, Recipe Challenge

    #sass/scss#accessibility
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    Looks nice :) On this challenge I tried to create a to-rem()-function on my own. So, I had a look at yours. I see you returning an error when units are used in your rem()-function.

    @use 'sass:math';
    
    //convert pixel to rem
    @function rem($pixel) {
    	//test to see if a unit is accidentally included as part of the $pixel parameter. $pixel can ONLY be a number
    	@if math.is-unitless($pixel) {
    		//divide $pixel by 16 to return value, concatenate "rem" to set unit of measurment as rems
    		@return math.div($pixel, 16) + rem;
    	} @else {
    		@error 'Don\'t use units when using the rem() function; only numbers';
    	}
    }
    

    You could improve the usability of the function for others by allowing at least px, maybe even % or rem itself. Plus your rem() could get even more stable if you catch non-allowed types like strings in an early return at the beginning, e.g.:

    @use "sass:math";
    @use "sass:meta";
    
    //convert pixel to rem
    @function rem($value) {
      @if meta.type-of($value) != "number" {
        @error "NaN: #{type-of($value)}.";
        @return null;
      }
    
      //test to see if a unit is accidentally included as part of the $pixel parameter. $pixel can ONLY be a number
      @if math.is-unitless($value) {
        //divide $pixel by 16 to return value, concatenate "rem" to set unit of measurment as rems
        @return math.div($value, 16) + rem;
      }
    
      $unit: math.unit($value);
    
      @if $unit == "px" {
        @return math.div($value, 16px) * 1rem;
      }
    
      @if $unit == "%" {
        @return math.div($value, 100%) * 1rem;
      }
    
      @if $unit == "rem" {
        @return $value;
      }
    
      @error "Invalid unit: #{$unit}.";
      @return null;
    }
    

    The same things could of course also be transferred to your em()-function.

    Marked as helpful
  • P
    Scott•310
    @ldg
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I feel like I'm getting better at setting up Sass and working with it.

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

    When starting this project I used the Figma style guide to set up css custom properties based on the style guide. This worked great, but I found trying to set up falues to use for the font shorthand didn't seem to work. I'm not sure why, I thought initially that I had set the font shorthand properties in the wrong order, with the font family first. However even after correcting the order of the properties it still didn't work.

    I eventually just wrote the font styles the long way, listing each separate property / value in the declaration.

    Sass Social Links Card

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    solid solution. :) You can improve your s/css-styling by avoiding nested css-classes.

    .soc-card {
    	background-color: var(--grey-800);
    	color: var(--white);
    	text-align: center;
    	width: u.rem(327);
    	border-radius: 12px;
    
    	&__avatar {
    		width: u.rem(88);
    		height: u.rem(88);
    		border-radius: 50%;
    		margin-top: var(--space-300);
    	}
    ...
    }
    

    With your code, you are implying that soc-card__avatar inherits the properties from soc-card, but that is not true. Your Code gets cleaner and more readable if you separate them, e.g.:

    .soc-card {
    	background-color: var(--grey-800);
    	color: var(--white);
    	text-align: center;
    	width: u.rem(327);
    	border-radius: 12px;
    }
    
    .soc-card__avatar {
    	width: u.rem(88);
    	height: u.rem(88);
    	border-radius: 50%;
    	margin-top: var(--space-300);
    }
    
    Marked as helpful
  • Mouad•110
    @mouadbimk
    Submitted 6 months ago

    Blog Card Preview

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 5 months ago

    nice solution :)

    Marked as helpful
  • Simamkele Ndabeni•30
    @VernonVerns
    Submitted almost 2 years ago

    Responsive QR-Code scanner with HTML and Sass

    #sass/scss
    1
    P
    kephalosk•400
    @kephalosk
    Posted 6 months ago

    nice solution

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub