Skip to content
Submitted about 2 years ago

Age Calculator with VueJS

vue
Jasser Gharb•20
@G-Jasser
A solution to the Age calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey there, thank you for checking out my solution. This is my first time using this platform and I am somewhat new to Web Development. I have a few questions I'd like to ask:

  • What would a proper VueJS Web application look like? As in the file structure, code structure, ect..
  • How can one effectively approach project planning?
  • Also I have an issue with the button not changing color when hovering it, any clue on why?
.calculator-submit button{
border-radius: 100px;
border: 0;
background-color: hsl(259, 100%, 65%);
.
.
.
}
.calculator-submit button:hover{
background-color: hsl(0, 0, 8%);
cursor: pointer;
}

Thank you in advance.

Code

Please log in to post a comment

Log in

Community feedback

  • web weaver•310
    @servant-of-Allah

    Great job on your solution! It's wonderful to see your enthusiasm for web development and your willingness to learn. I'll address your questions:

    • Proper VueJS Web Application: A proper VueJS web application typically follows a specific file and code structure. It's recommended to organize your files into components, views, and other relevant directories. Maintain a clear separation of concerns, with components handling specific functionalities and views serving as the main pages. Also, make sure to leverage Vue's reactive data system and utilize features like computed properties and lifecycle hooks.

    • Effective project planning: Project planning is crucial for successful development. Start by defining clear goals and requirements. Break down the project into smaller tasks, create a timeline, and allocate resources accordingly. Additionally, consider using project management tools, establishing regular communication channels, and conducting periodic reviews to track progress effectively.

    • Button color change issue: The code you provided looks fine, and the button should change color when hovered. However, ensure that there are no conflicting styles overriding the background-color property for the button in other CSS rules. Additionally, check if there are any errors in the browser console that might be affecting the button's behavior.

    Keep up the great work, and don't hesitate to ask any further questions you may have. Happy learning and coding!

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