Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Age Calculator App including Responsive From

Lillian 20

@lillianedwards

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I felt pretty good about this challenge although I would like to know:

  1. the best way to add horizontal lines. I did not end up figuring out how to implement the horizontal line that runs into the button. I've struggled with this element on other projects as well.

  2. the arrow image did not deploy to my Netlify site, is there something wrong with my file structure/React shell?

Community feedback

Thales 150

@thales91

Posted

Hello, another way to add the horizontal line and place a border-bottom of the color you need, then on the button you can place it with position relative and calibrate the top: -10px for example the element will go on top of the line covering the line hope I helped

ref https://developer.mozilla.org/en-US/docs/Web/CSS/position

0

@amirhossein-peyvand

Posted

Hey, well done :) You can use <hr> tag for horizontal line in your code. And there is an issue with your src address. You have to IMPORT your arrow image in your CalcForm.jsx component. Write this code at the top of your CalcForm.jsx file -> import arrowImage from '../assets/images/icon-arrow.svg Then you can use it in your img tag -> <img src={arrowImage}/> I hope you can fix your code :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord