Advice generator - CSS Grid, Vanilla JS

Community feedback

• 

  Taner•190

  @tanererenPosted about 2 years ago

  Hey!

  An improvement that you can make is your .theme-toggler button has uneven padding which makes clicking on it quite awkward

  .theme-toggler {
      border: none;
      background-color: inherit;
      color: var(--primary-300);
      display: flex;
      align-items: center;
      gap: 0.5em;
      font-weight: 700;
      padding: 2em 1.5em 0 0; <-- change this to 2em only
      cursor: pointer;
  

  Also when you click the dice button the words aren't being rendered correctly - they're illegible so you may want to check the function - the typewriter effect is good idea though!

  Let me know how you get on

  Marked as helpful

  0

  ---

  

  Cristina•360

  @cr1deg0Posted about 2 years ago

  Hi @tanereren, thanks for pointing this out. After some digging it seems the problem with the words not being rendered correctly was happening when a new advice was requested before the previous one had finished rendering, as both function calls would be added to the event loop. To avoid this I've disabled the button while the message is rendering. Cheers

  1

  

  Taner•190

  @tanererenPosted about 2 years ago

  @cr1deg0 Ah interesting!

  Maybe a fun task could be adding a function that speeds up the typewriter effect when the box is clicked so you don't have to wait to randomise the advice

  0