Skip to content
OverviewSolutions
2
Comments
7
Cyril
@cyrilsource

All comments

  • Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Hello Wilmer

    Very good job.

    When you create a new todo, is better to clear the input field After tareas.value.push(tarea) you can write this.texto = ''

    cheers,

    1
  • Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Hello Warbaddy

    The design is nice but, it's not dynamic. The purpose of the challenge is using javascript. You must move the input range and change the product and the price.

    good luck !

    0
  • Davi Félix•80
    @davifelix5Submitted almost 4 years ago

    I could not find a way to style the range input for the webkit navigators in the same way as the design preview proposed.

    I also took the liberty of adding a highlight color on the billing method selected, which was not specified on the design preview proposed on the challenge. I hope it was a good idea!

    Any feedbacks are more than welcome!

    Interactive pricing component with pure HTML, CSS and Java Script

    1
    Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Hello Davi,

    Good job ! Congratulations !

    for the input range in chrome, you must use css linear-gradient and javascript
    on codepen good luck !

    1
  • Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Hello Akinkunmi,

    Good job ! Congratulations !

    Just a mistake with the discount: in your case, you have a 75% discount

    for the input range in chrome, you must use css linear-gradient and javascript an example on codepen

    good luck !

    0
  • Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Respect ! good job !

    1
  • Kacper•205
    @gacburSubmitted almost 4 years ago

    Hello everyone, I need some overall feedback if you could tell me what I could have made better :)

    Thank you for taking the time to help me with this!

    React.js, html and css

    1
    Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Hello Kacper

    I don't really know React js. I used Vue js for the exercie but my css for the checkboxes circles [All my code here] (https://github.com/cyrilsource/Frontend-Mentor-Todo-app) and the results

    cheers

    .circle {
  width: 25px;
  height: 25px;
  position: relative;
  margin-right: 1rem;
  border-radius: 50%;
  background: linear-gradient(120deg, #57ddff, #c058f3);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.circle.sun:after {
  border: 1px solid #d2d3db;
  border-radius: inherit;
  background-color: #fafafa;
}
.circle.moon:after,
.circle.sun:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.circle.moon:after {
  border: 1px solid #4d5066;
  border-radius: inherit;
  background-color: #25273c;
}
.circle:hover.circle,
.circle:hover:after {
  border:
 1px solid transparent;
}
    1
  • przbadu•40
    @przbaduSubmitted almost 4 years ago

    I am facing one problem in my solution which is to add a gradient border for the checkboxes when the user hovers in the item. One solution I found was to add a wrapper div with a gradient background, and then only display thin border area of that div, and cover everything else with a checkbox section.

    Is there any straight forward way to solve this problem?

    Todo app with HTML, CSS and React js

    2
    Cyril•125
    @cyrilsourcePosted almost 4 years ago

    Hello Przbadu,

    It was so difficult but I have the solution: I made the challenge You have a circle with the gradient background with no border and :after you have a other circle in position absolute with a background like the main background and with a border gray With :hover you remove the border on circle:after and you see the border gradient

    Maybe is not the best but a solution

    You can have a look on my code here: https://github.com/cyrilsource/Frontend-Mentor-Todo-app and the preview site https://frontend-mentor-todo-app.vercel.app/

    cheers,

    1