Skip to content
OverviewSolutions
29
Comments
6
Ibeaka Godson
@Warmarth

All comments

  • CoreyWithTheSkills•280
    @CoreyWithTheSkills
    What are you most proud of, and what would you do differently next time?

    test

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

    test

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

    test

    Time Tracking Dashboard

    #accessibility
    1
    Ibeaka Godson•470
    @Warmarth

    the user has deleted github repository of this project.

  • Chrision Wynaar•340
    @Clipzorama
    What are you most proud of, and what would you do differently next time?

    I am very proud that I was able to finish this design. It took me a while but I was also working on another project as well. For next time, I'd probably implement more semantic tags for readability purposes.

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

    One of the main challenges that I had was handling the logic for the input fields. Because I used type text, I couldnt just use checkValidity().

    // Validate Mortgage Term
    if (!mortgageTerm.value.trim() || isNaN(parseInt(termValue)) || termValue 

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

    clearBtn.addEventListener("click", () => {

    // redefining due to scoping. Global placement didnt reference these variables

let amountError = document.querySelector(".amount-error");
let mortgageAmount = document.getElementById("mortgage-amount");
let poundSign = document.querySelector(".input-text-m");

let termError = document.querySelector(".error-term");
let mortgageTerm = document.getElementById("mortgage-term");
let yearSign = document.querySelector(".input-year");

let interestError = document.querySelector(".error-rate");
let interestField = document.getElementById("interest-rate");
let percentSign = document.querySelector(".input-percent");

let radioError = document.querySelector(".error-radio");

const resultDiv = document.querySelector(".result-container");
const resultPending = document.querySelector(".potential-results");
const monthPlan = document.querySelector(".month-plan");
const overTerm = document.querySelector(".over-term");

// referencing the form to clear it.
document.getElementById("mortgager").reset();
resultDiv.style.display = "none";
resultPending.style.display = "flex";
monthPlan.textContent = "";
overTerm.textContent = "";

amountError.style.display = "none";
mortgageAmount.classList.remove("error-input");
poundSign.classList.remove("error-span");


termError.style.display = "none";
mortgageTerm.classList.remove("error-input");
yearSign.classList.remove("error-span");

interestError.style.display = "none";
interestField.classList.remove("error-input");
percentSign.classList.remove("error-span");

radioError.style.display = "none";

document.getElementById("repayment").checked = false;
document.getElementById("interestO").checked = false;

    });

    

If anyone has spare time, I need some assistance on how to **not** reference the inputs again when handling the clear button on all input fields. I tried putting all references inside of the global scope but then it started to affect the calculations for the main card. I referenced the variables again and it worked but I know this is not the most efficient thing to do.

Thank you for your time!

    Mortgage Repayment Calculator Solution

    2
    Ibeaka Godson•470
    @Warmarth

    you can use get the form element and use the reset() method to clear all the values

  • CoreyWithTheSkills•280
    @CoreyWithTheSkills
    What are you most proud of, and what would you do differently next time?

    test

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

    test

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

    test

    Newsletter

    #accessibility
    1
    Ibeaka Godson•470
    @Warmarth
    • get the repository for your project so I can make a proper review of your codes
    • your layout is good, I believe the challenge may be on rendering the error text if input false validation
    • you can introduce regex or validate the values together so any mistake will prevent submission
  • roswell•520
    @welpmoz
    What are you most proud of, and what would you do differently next time?

    For face the next projects I will modularize more the styles for made changes in an easy way.

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

    I am new using javascript, I suffer trying add interactivity to the share button. I spend some time investigating and exploring the manner javascript made changes in the DOM.

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

    I need help in responsive image management. My solution in this topic is not elegant and maybe not optimal.

    Beatiful Article Preview with Social Links Share

    #accessibility#pure-css#web-components#progressive-enhancement
    1
    Ibeaka Godson•470
    @Warmarth

    Does the solution include semantic HTML? In your html, you use h2 directly under h1. I the best tags to use is p tag and all text content of that card should be wrapped in an article tag

    Is it accessible, and what improvements could be made? Your social icons display is working properly but the icons in the component are compressed maybe a result of enforcing width on the individual icons And also using SVG in image tag works different

    Does the layout look good on a range of screen sizes? I think your grid layout was perfect as

    Is the code well-structured, readable, and reusable? Your js function with set-attribute was good

    Does the solution differ considerably from the design?

    Marked as helpful
  • P
    Daniel 🛸•44,790
    @danielmrz-dev
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • Angular 🅰️
    • SASS 🎨
    • Typescript 🤖
    • BEM Notation 🅱️
    • Template Driven Forms approach 🧾
    • Validations using Angular Directives ✅
    • Mobile first workflow approach 📲

    It took me a few days to finish this one. I wasn't sure if my current knowledge about Angular would be enough to finish this project, but I tried anyway and I'm very glad I did. As always, I ended up learning a lot during the process and I'm much more comfortable using Angular.

    Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

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

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Multistep Form built w/ Angular 🅰️

    #angular#sass/scss#typescript#bem
    2
    Ibeaka Godson•470
    @Warmarth

    good day sir, l love you solution as always resemble the design image, is this their a way to know the actual width and height of the pages in respect to the design image prior to submission?

    your codes are well structure and arranged, can be easily understood, maybe because of the naming style.

  • Ibeaka Godson•470
    @Warmarth

    please your comments are required for self improvement and correct.