Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
2

Thomas Kressman

@tkressmaYonkers, NY110 points

SUNY Oswego Graduate. Front End Web Developer.

I’m currently learning...

I am currently working on my ReactJS knowledge and improving accessibility and responsiveness in my design implementations.

Latest solutions

  • Responsive App w/ React, React Router, and CSS Modules

    #accessibility#react#react-router#fetch

    Thomas Kressman•110
    Submitted over 3 years ago

    3 comments
  • Mobile-first responsive landing page built with React

    #accessibility#react

    Thomas Kressman•110
    Submitted over 3 years ago

    1 comment
  • Responsive Landing Page w/ React

    #accessibility#react

    Thomas Kressman•110
    Submitted over 3 years ago

    0 comments
  • Responsive Tip Calculator using React and Mobile-First design

    #accessibility#react

    Thomas Kressman•110
    Submitted over 3 years ago

    0 comments

Latest comments

  • tarik310•230
    @tarik310
    Submitted over 3 years ago

    HTML,CSS and Javascript

    3
    Thomas Kressman•110
    @tkressma
    Posted over 3 years ago

    Hey there! Great solution - it works as it should. The web app is very responsive as well!

    I have one general tip for you. In JavaScript, there is a concept called Event delegation.

    Consider your code: on lines 52,56, 94-98 and 183-187, you create many separate event listeners to perform the same event upon being clicked: ActivatingReset(), erasevalueoncustom(), makeCalculations().

    Using Event delegation, you can apply a single event listener to the parent container (class="percent") and have whatever child you click on "bubble" up towards the event listener. This will allow your code to follow the D.R.Y. principle.

    For example, you can replace all of those repetitive lines of code with this:

    document.querySelector(".percent") .addEventListener('click', event => { if (event.target.className === 'percentBtn') { //Assign inputs a class of "percentBtn" makecalculations(); } });

    You can read more here: https://dmitripavlutin.com/javascript-event-delegation/, but certaintly watch some YouTube videos on this powerful concept. Happy coding!

  • JesseStone•370
    @jesseburn
    Submitted over 3 years ago

    Shortly URL shortener using TailwindCSS and jQuery

    #tailwind-css#jquery
    2
    Thomas Kressman•110
    @tkressma
    Posted over 3 years ago

    Hey Jesse, good job.

    I HIGHLY recommend you put your script in a seperate file (E.G. script.js) then import it at the end of your body - or, at the very beginning of the body tag using defer.

    Similar to what Haybuka said, you first need to "fill" your localStorage with an item before trying to access it. You would want to do this upon successfully fetching some data from the API. You can do this by writing localStorage.setItem('<some name resembling the url data>', <the object recieved from the api call>). Then, when you want to retrieve the localStorage data, you would write localStorage.getItem('<name you decided on calling the item'>).

    Check out more about localStorage on the docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

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