Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
5

Christina

@codercreative240 points

Front-end developer proficient in HTML, CSS, JavaScript, and React. Currently advancing through the JavaScript Learning Path, with a recent achievement of 190 points on my Talent Profile 🥳. Excited to explore part-time, freelance, contract, internship, or apprenticeship opportunities.

Latest solutions

  • Password Generator App built with HTML, CSS, JavaScript

    #accessibility

    Christina•240
    Submitted 8 months ago

    I’m open to any helpful feedback, particularly in areas like improving my JavaScript logic or optimizing the code for better performance.


    1 comment
  • Tip Calculator App built with HTML, CSS, JavaScript


    Christina•240
    Submitted 9 months ago

    I am grateful for any helpful tips! 🙏


    1 comment
  • Time Tracking Dashboard built with HTML, CSS, JavaScript


    Christina•240
    Submitted 10 months ago

    I am open to any and all feedback! Thank you!


    1 comment
  • Newsletter sign-up with success message built with HTML/CSS/JavaScript


    Christina•240
    Submitted 12 months ago

    ANY and all help very much appreciated!


    2 comments
  • Article Proview Component built with HTML, CSS, JavaScript


    Christina•240
    Submitted 12 months ago

    I am happy to hear ANY feedback for improvement. Thank you in advance!


    2 comments
  • Profile Card Component using HTML, CSS and Flexbox


    Christina•240
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • P
    JJorgeMS13•440
    @JJorgeMS13
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Me encanto poder darle estilos muy diferentes a los que se tienen por defecto.

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

    me costo un poco ls creacion de la password pero al final lo logre creando un solo array e ir metiendo de poco en poco.

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

    Me encataria que me dijeran que mas puedo cambiar

    Pagina responsiva creada con html, css y javaScript

    #accessibility#bem
    1
    Christina•240
    @codercreative
    Posted 8 months ago

    Hola @JJorgeMS13,

    I love your solution! 🥳🥳🥳

    The only thing, I would change is to show a confirmation message "Copied!" next to the copy icon or in the password field instead of showing an alert. This will help enhance the user experience.

    Just as an example, this is how I solved it:

    // COPY PASSWORD FUNCTION

    copyIcon.addEventListener("click", copyPassword);

    function copyPassword() { const passwordText = generatedPassword.textContent; console.log(passwordText);

    if (passwordText === "P4$5W0rD!" || passwordText === "Tick at least 1 box") { return; }

    navigator.clipboard .writeText(passwordText) .then(() => { const originalText = generatedPassword.textContent; generatedPassword.textContent = "Copied!"; generatedPassword.classList.add("copied");

      setTimeout(() => {
        generatedPassword.textContent = originalText;
        generatedPassword.classList.remove("copied");
      }, 2000);
    })
    .catch((err) => {
      console.log("Failed to copy: ", err);
    });
    

    }

    Happy Coding!

    Marked as helpful
  • amutsamoses•200
    @amutsamoses
    Submitted 9 months ago

    Tip Calculator App

    2
    Christina•240
    @codercreative
    Posted 9 months ago

    Hi @amutsamoses,

    Your Tip Calculator looks awesome!

    I just have a few suggestions:

    Hover State:

    • Add a hover state (lighter green) for the tip buttons and the custom tip button

    Error message for input validation:

    • Even though the design did not specify it, perhaps add an error message if the user does not enter an amount in the bill input field.

    Reset button color:

    • My personal preference: I would either have the reset button be a light cyan color from the get-go -- or make it turn into a light cyan when the user enters data into the input fields for greater user experience.

    Accessibility with fieldset:

    • Also for accessibility, you may consider using fieldset to group related inputs together (I just learned about this myself today)

    Happy Coding!

  • Rabel•190
    @Rabelahmed
    Submitted 10 months ago

    responsive time tracking dashboard

    1
    Christina•240
    @codercreative
    Posted 10 months ago

    Hi Rabel,

    I love your solution! 💫

    Perhaps consider...

    -- using switch statements to replace your if statements for better clarity and efficiency.

    -- using template literals to conditionally add an "s" to hrs when the value is not equal to 1.

    -- adding comments in your code and ensuring consistent indentation and formatting for better readability.

    Happy Coding! 🥳

    Marked as helpful
  • Paul Olynek•330
    @ePaulo
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Mobile-first design with extra time spent trying to match all the interactive design notes.

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

    Had to learn how to open and close dialog modals. Added code reset the form and modal after each useage.

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

    I think I got fairly close to the design expectations... other than my decision to place the desktop modal visibly over the Newsletter, ie. instead of placing the modal over a dark-color background (visually by itself).

    Newsletter sign-up form with JS error checking & modal success message

    2
    Christina•240
    @codercreative
    Posted 12 months ago

    Hi Paul,

    Christina here from Scrimba -- I am going through the JavaScript Path and your code came up for peer review on my path 😄

    I love your take on the solution, especially how your JavaScript is short, to the point, and very readable.

    Best, Christina

  • Annas-khan•120
    @Annas-khan
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    got a little hang of JS

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

    JS part, got help by alex the moderator

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

    JS and media query

    article-preview

    1
    Christina•240
    @codercreative
    Posted 12 months ago

    Good job! 🎉 With the following small fixes you can convert your project to mobile first and make it responsive: So for example in the class .main-content, add flex-direction: column and then play around with the max-width (e.g. 20rem) in both main and .product-image. Then, add a media query for desktop: @media (min-width: 1024px) { .main-content { flex-direction: row; } main { max-width: 57rem; } .product-image { max-width: 57rem; } } Of course you may need/want to fine-tune further, but hopefully, the small adjustments above will be helpful to you. All the best, Christina

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