interface Window {
API_KEY: string;
}
const API_KEY = window.API_KEY ?? process.env.NEXT_PUBLIC_API_KEY ;
being able to export apikey and with out having a backend server being able to use .env files in front frontend projects
the button on the md and large screen size is overflowing and not responding styles pls will be happy to apply any correction on both the typescript and css
I will be needing help success card and other reviews of other section and components will be appreciated
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
the user has deleted github repository of this project.
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!
you can use get the form element and use the reset() method to clear all the values
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
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.
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?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
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 😊
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.
please your comments are required for self improvement and correct.
