caldane Comments - Answer Overflow

caldane

•Created by Jonah on 10/1/2024 in #front-end

Problem with the container background

you are still trying to pass isQuizCompleted into main but it looks like it should be a use state var, like in my example above

19 replies

KPCKevin Powell - Community

•Created by Jonah on 10/1/2024 in #front-end

Problem with the container background

isQuizCompleted will always be undefined in his example

19 replies

KPCKevin Powell - Community

•Created by Jonah on 10/1/2024 in #front-end

Problem with the container background

root.render(
  <React.StrictMode>
    <Main />
  </React.StrictMode>
);

root.render(
  <React.StrictMode>
    <Main />
  </React.StrictMode>
);

export default function Main() {
  const [isQuizCompleted, setIsQuizCompleted] = React.useState(false);
  console.log("isQuizCompleted:", isQuizCompleted); // Check the state here

  return (
    <div
      className={`container ${
        isQuizCompleted ? "quiz-completed" : "quiz-in-progress"
      }`}
    >
      {/* Render Questions only if the quiz is not completed */}
      {!isQuizCompleted && <Questions isQuizCompleted={isQuizCompleted} setIsQuizCompleted={setIsQuizCompleted} />}

      {/* Render QuizResults when the quiz is completed */}
      {isQuizCompleted && <QuizResults />}
    </div>
  );
}

export default function Main() {
  const [isQuizCompleted, setIsQuizCompleted] = React.useState(false);
  console.log("isQuizCompleted:", isQuizCompleted); // Check the state here

  return (
    <div
      className={`container ${
        isQuizCompleted ? "quiz-completed" : "quiz-in-progress"
      }`}
    >
      {/* Render Questions only if the quiz is not completed */}
      {!isQuizCompleted && <Questions isQuizCompleted={isQuizCompleted} setIsQuizCompleted={setIsQuizCompleted} />}

      {/* Render QuizResults when the quiz is completed */}
      {isQuizCompleted && <QuizResults />}
    </div>
  );
}

But I am also confused because you are not exporting Questions but rather Quiz from Questions.

19 replies

KPCKevin Powell - Community

•Created by Jonah on 10/1/2024 in #front-end

Problem with the container background

You are never passing isQuizCompleted into Main

19 replies

KPCKevin Powell - Community

•Created by Jonah on 10/1/2024 in #front-end

Problem with the container background

I cannot load that link, it says I do not have access.

19 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

@Jochem font-size: 0 works well. Just tested in a code pen https://codepen.io/caldane/pen/XWvXLob

<span data-icon="💡"><span>Idea</span></span>

<span data-icon="💡"><span>Idea</span></span>

The nested spans are still necessary to so you don't end up targeting the emoji with the first-letter selector. @Chris solved this by making it position absolute, but then you have to position the emoji (which was possible with right: 100%). This way doesn't require jumping out of the stacking context, which has some value.

span[data-icon] {
  display: flex;
  align-items: end;
  
  span {
    line-height: 0.9;
    &::first-letter {
      font-size: 0px;
    }
  }
  
  &::before {
    content: attr(data-icon);
  }
}

span[data-icon] {
  display: flex;
  align-items: end;
  
  span {
    line-height: 0.9;
    &::first-letter {
      font-size: 0px;
    }
  }
  
  &::before {
    content: attr(data-icon);
  }
}

The display flex and align-items is to force the text and emoji to have the same lower bounds. The line height is a bit of a hack but it allows for the emoji to look like it is on the same baseline as the text. With everyone's suggestion implemented in this version I find it to be a rather elegant solution to an interesting problem.

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

I do not disagree but it may be a better use case for attr than a custom property

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

Yes with the caveat that nested components (which is super unlikely) would still have --content set.

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

You would have to be careful with nested spans and also you do not have a way to "eat" the first character if you put the emoji in the span.

25 replies

KPCKevin Powell - Community

•Created by Lofty! on 10/1/2024 in #front-end

How do you makes "emoji as a letter" accessible?

This is a little fiddley. It is consistent across a single font-family, but if you changed the font-family you would need to change the ch value. The advantage of this method would be that a screen reader would read the word properly.

<p class="inline">
  💡<span class="bulb">Idea</span>
</p>

<p class="inline">
  💡<span class="bulb">Idea</span>
</p>

p.inline {
  display: flex;
  align-items: end;
  font-size: 1.3rem;
}

span.bulb {
  display: flex;
  justify-content: end;
  width: 2.8ch;
  overflow: hidden;
}

p.inline {
  display: flex;
  align-items: end;
  font-size: 1.3rem;
}

span.bulb {
  display: flex;
  justify-content: end;
  width: 2.8ch;
  overflow: hidden;
}

Also if you didn't want the screen reader to read the emoji you could put it in a before element instead.

<p class="inline">
  <span class="bulb">Idea</span>
</p>

<p class="inline">
  <span class="bulb">Idea</span>
</p>

p.inline {
  display: flex;
  align-items: end;
  font-size: 1.3rem;
  
  &::before {
    content: "💡"
  }
}

span.bulb {
  display: flex;
  justify-content: end;
  width: 2.8ch;
  overflow: hidden;
}

p.inline {
  display: flex;
  align-items: end;
  font-size: 1.3rem;
  
  &::before {
    content: "💡"
  }
}

span.bulb {
  display: flex;
  justify-content: end;
  width: 2.8ch;
  overflow: hidden;
}

25 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

This is why I proposed:

const randomNum = Math.random();
const compMove = (randomNum < 1/3 && 'Rock') || (randomNum < 2/3 && 'Paper') || 'Scissors';
//  {{varname}} = {{value}}                  or {{otherValue}}               or {{thirdValue}};

const randomNum = Math.random();
const compMove = (randomNum < 1/3 && 'Rock') || (randomNum < 2/3 && 'Paper') || 'Scissors';
//  {{varname}} = {{value}}                  or {{otherValue}}               or {{thirdValue}};

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

Assignment has to follow {{varname}} = {{value}} so you cannot do {{value}} {{operator}} {{varname}} = {{otherValue}}

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

no problem, I have seen many people help out on this discord and I believe most people see this as a way to learn and teach. When you are further down your coding journey then it will be your time to teach, but for now just keep trying to learn 🙂

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

So in your code sample from above what would this do:

compMove = false && 'Rock'
compMove = true && 'Paper'
compMove = false && 'Scissors'

compMove = false && 'Rock'
compMove = true && 'Paper'
compMove = false && 'Scissors'

compMove will be set to false; compMove will be set to 'Paper'; compMove will be set to false; Therefore trampling 'Paper'

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

So if that is the case then the following will also never return 'Rock'

compMove = false && 'Rock'

compMove = false && 'Rock'

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

More accurately the following statement when true will return 'Rock'

(randomNum >= 0 && randomNum < 1/3) && 'Rock'

(randomNum >= 0 && randomNum < 1/3) && 'Rock'

More simply put:

//The following will never evaluate the true part because the false will shortcut it
compMove = false && true

//The following will never evaluate the true part because the false will shortcut it
compMove = false && true

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

There is value in that, pushing a code to its limits has merit in learning. If this were production code, it would be inadvisable, if this is just for learning, and I suspct it is since it is Rock, Paper, Scissors, then this is perfectly fine.

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

You do not need to read this you are wasting your own time, don't blame others for your decisions. This is a forum for help, if you have no intention in being helpful your input is not welcome.

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

This isn't helpful, many times I have written esoteric code to understand the code better. This could very well be this person path to understanding basic code flow.

102 replies

KPCKevin Powell - Community

•Created by Vandana on 8/9/2024 in #front-end

JS Shorthand

Because the syntax you are using is boolean && string.
The boolean is for shortcutting the rest of the logic, if the first part is false then stop executing logic on the and as no further values matter. If the value is true check to see if the next value is true. So that means if the first part evaluates to false the assignment will be false, it will not even attempt to look at the string. However if it is true then further evaluation need to be had. Non-empty string are true in js but the do not return the value true but rather the value of the string. Therefore those assignment statements must return your string literal or false

102 replies

Gaming

Programming