Skip to content
OverviewSolutions
16
Comments
7
tomas938
@tomas938

All comments

  • PaweΕ‚ Pohlβ€’390
    @Pawel1894Submitted almost 2 years ago

    Hey everyone! 😁

    I did some additional features to this app here they are:

    • Caching searched words for 24hours
    • PWA (you can download it on mobile)
    • Font switcher with localstorage
    • Theme switcher with localstorage
    • Searching words definitions
    • Default theme mode based on user's prefers-color-scheme

    Tech i used for creating this project

    • TailwindCSS
    • React
    • Vite
    • Vitest
    • Testing library
    • TypeScript
    • Local Storage web API
    • Tanstack query
    • Workbox
    • Axios

    If you have any questions for me or found bug don't hesitate writing comment!

    Please leave a like if you find this solution helpful :)

    Cheers

    Dictionary with PWA, caching, react, typescript, tailwindcss, tests

    3
    tomas938β€’385
    @tomas938Posted almost 2 years ago

    I just finish this challenge today and i dive into your code and i feel so bad about my solution :D your code is well written also you added nice features. I can trully see you have more experience than me good job.

    1
  • tomas938β€’385
    @tomas938Posted about 3 years ago

    Hi, congratulations for completing this challenge! Maybe you can change filtering for me it would be nice if I click for-example filter front-end and senior i would get filtered only that card that match the filter maybe u can check my solution to this challenge and you will see what i mean but overwall good job !. ;)

    Marked as helpful
    0
  • spyderβ€’315
    @ratan17Submitted about 3 years ago

    πŸ™‰πŸ’°give feedbacks on my solution and earn guaranteed 5 to 30 points and rank higher up in frontendmentor's worldπŸ™‰πŸ’°

    one thing i learned using flexbox is that it isn't reliable. i thought i understood them but it's complicated.

    to the people who have solved this challenge just using flexbox, open your browser's developer tools , dock it at the bottom and increase the dev-tools size vertically up and you'll see you lose your top content.

    i couldn't understand why this is happening ????

    Order Summary Card using flexbox, and a pinch of Bootstrap 4.5

    2
    tomas938β€’385
    @tomas938Posted about 3 years ago

    Hi, your solution looks good maybe you can add outline:none to button i think it looks better without outline ;)

    1
  • tomas938β€’385
    @tomas938Posted about 3 years ago
    <div id="bottom">
        <p class="storage">You’ve used <span>815 GB</span> of your storage</p>
<div class="data">
          <div class="layover">
            <h1>185</h1>
            <span>GB LEFT</span>
            <div class="triangle"></div>
          </div>
          <div class="full-bar">
            <div id="bar">
              <div id="circle"></div>
            </div>
          </div>
          <div class="para">
            <p>0 GB</p>
            <p>1000 GB</p>
          </div>
        </div>
      </div>
  .layover {
    position: relative;
    transform: translateY(-100px) translateX(325px);
  }
  .triangle {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 90%;
    right: 0;
    border-right: 50px solid white;
    border-bottom: 50px solid transparent;
  }

    this should help little bit

    Marked as helpful
    0
  • tomas938β€’385
    @tomas938Posted about 3 years ago

    Hi, you need put your triangle in your layover div and give it position relative and then absolutly position triangle with top,left,right,bottom values as u need .

    Marked as helpful
    0
  • tomas938β€’385
    @tomas938Posted about 3 years ago

    Hi, congratulations for your solution maybe u can add mathematical sign in calculation to get better user experience.

    1
  • tomas938β€’385
    @tomas938Posted over 3 years ago

    nice job but u have problem with responsivity and you shouldn't alingning items with that huge padding.

    0