Skip to content
OverviewSolutions
14
Comments
14

dolapobj

@dolapobj310 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Ejiofor John•490
    @echocode1
    What are you most proud of, and what would you do differently next time?

    i completted it thought with alot of flaws.

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

    simplifying and writing reusable code . writting lesser javascript code.witting a lesser code has always been my plan before any project but trying to bring functionality to the arrow up and down was not difficult but space consuming and i would have love learning an even more shorter reusable code.

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

    please practical input is welcome on how to write simple reusable code. aside input and review are welcome on this challenge as it is my first attempt

    contact-form main

    2
    dolapobj•310
    @dolapobj

    Design looks great, you nailed it.

    Looking at your JS some suggestions

    1. Use a CSS class for changing the color/border when displaying error messages. You can add this class to the element.
    2. Although it is clear (because I just completed my version of the project) it might be helpful to break your appendForm function down with helper functions that validate each section.
    Marked as helpful
  • dolapobj•310
    @dolapobj

    Looks good. Only suggestion would be to add the dividers in the design using the <hr> element.

    Unfortunately, I have not yet learned React, so I can not give any suggestions on the code.

  • dolapobj•310
    @dolapobj

    Well done, looks great! A few tips:

    1. Instead of writing out event listeners for each button, like this:
    numberOne.addEventListener("click",function(){
    selected = this.value;
    numberTwo.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberThree.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFour.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFive.style.backgroundColor = "hsl(213, 19%, 18%)";
    this.style.backgroundColor = "hsl(217, 12%, 63%)";
    
})

numberTwo.addEventListener("click",function(){
    selected = this.value;
    numberOne.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberThree.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFour.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFive.style.backgroundColor = "hsl(213, 19%, 18%)";
    this.style.backgroundColor = "hsl(217, 12%, 63%)";
})

    you could instead apply a single function to all the buttons at once. This would handle changing the colors. For example, I had a class in my CSS that was "clicked". I had an event listener that I applied to all buttons, that applied an styleButton function, which added the "clicked" class to the selected button, and removed it from all other buttons. This way, you can make the code more reusable. Hope this helps!

    Marked as helpful
  • Murilo Matt•200
    @MuliroMatt
    What are you most proud of, and what would you do differently next time?

    I'm proud that I created more functions

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

    I didn't encouter any challenge

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

    I'm up to any suggestions

    Tip Calculator using SASS and JS

    #sass/scss
    1
    dolapobj•310
    @dolapobj

    Honestly, not much feedback to give. Your HTML is very clean, and you use semantics and reusable classes well.

    In terms of your Javascript, it is very well organized, and I like how you had separate sections for event listeners, functions, variables etc. It is very easy to follow.

    You use clear naming conventions, the code is organized logically, you use modular functions, and use validations and format checking.

    Awesome job!

    Marked as helpful
  • ijohnst•230
    @ijohnst
    What are you most proud of, and what would you do differently next time?

    Getting this done. It started easy but then I ran into a bunch of challenges with the desktop design and some of the JS -- but I got through it all. I also learned some new JS things and about the HTML `` tag which I found handy for this project

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

    I overcomplicated how to create the background and images above the card. A little internet research fixed the problem for me.

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

    I think I understand why frameworks make things easier. Doing this vanilla took a bit of work but I got there. Really the only thing I need help with is simplifying things in the future especially with the JS

    Time Tracking Dashboard - Vanilla HTML/CSS/JS

    2
    dolapobj•310
    @dolapobj

    I really like how you used the <template> tag to dynamically render the different cards. I used a different approach and had to write out all the HTML for each card in my js script.

    The only thing that really stood out to me to be improved is in how you define your grid.

    @media screen and (min-width: 56em) { .grid-container { grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(2, 1fr); grid-template-areas: "profile work play study" "profile work play study" "profile exercise social self-care"; } }

    Here you define two rows but in the template you have three? I think it was just a small typo.

    Othwerwise, incredible job! Well done!

    Marked as helpful
  • Maximilian Dybvik•200
    @RegexRiddler
    What are you most proud of, and what would you do differently next time?

    I'm pleased with the outcome, and how close it it is to the design.

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

    Setting a background color on the input field seems to place the background over the placeholder text. Had to make background color somewhat transparent instead.

    When adding the error class to my input field based on validation outcome, the field still inherited border color so I had to use !important, which I would prefer not to do.

    .error {
  border-color: var(--tomato) !important;
  background-color: var(--tomato-transparent);
  color: var(--tomato);

  &:active, &:focus, &:target {
    border: 1.5px solid var(--dark-slate-grey) !important;
  }

  &::placeholder {
    color: var(--tomato);
    opacity: 1;
  }
}
    What specific areas of your project would you like help with?

    Any feedback is appreciated 😁

    I added "autocomplete="email" autofocus" to my input field and I am not sure if this is bad practice, both for security reasons and for accessibility.

    Secondly, whenever you type in an invalid email and try to submit, the button state gets "stuck" as active or focused, and I dont know how to prevent this.

    Newsletter Sign-Up

    #sass/scss
    1
    dolapobj•310
    @dolapobj

    Hi Maximilian. Thank you for your solution -- it looks great! Actually, looking through your code, is really inspiring me as someone who is just getting started in front-end dev. You also have a great eye for following the designs, which makes me want to follow them more precisely for my next project.

    Specifically, I like how you:

    • used the aside HTML tag for the success element
    • separated your Sass styling by color, typography,
    • used the destyle stylesheet for a clean reset

    I couldn't follow all the Sass notation as it seems quite, intricate, but your code is clearly commented and easy to follow. Your semantic HTML was also cleaner than mine -- I realize I had redundant containers. I will try to emulate your approach going forward.

View more comments