Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
6

Ibeaka Godson

@WarmarthNigeria470 points

I am a full stack programmer enthusiast. Presently, learning with ALX.

Latest solutions

  • A responsive Time Tracking Dashboard built with HTML,CSS & TYPESCRIPT

    #accessibility#typescript

    Ibeaka Godson•470
    Submitted 7 months ago

    1 comment
  • Advice generator app solution built with HTML,CSS & TYPESCRIPT

    #accessibility#airtable#animation

    Ibeaka Godson•470
    Submitted 7 months ago
    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


    0 comments
  • An Interactive social link profile card HTML ,CSS and JavaScript

    #accessibility#animation#typescript

    Ibeaka Godson•470
    Submitted 7 months ago

    0 comments
  • Responsive Contact form buillt with TYPESCRIPT,VANILLA CSS & HTML

    #accessibility#typescript

    Ibeaka Godson•470
    Submitted 8 months ago

    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


    0 comments
  • Responsive Newsletter sign up page built with TYPESCRIPT,CSS & HTML

    #accessibility#typescript

    Ibeaka Godson•470
    Submitted 8 months ago

    I will be needing help success card and other reviews of other section and components will be appreciated


    1 comment
  • A Responsive Article-preview-component-master html5, css3 & typescript

    #accessibility#typescript

    Ibeaka Godson•470
    Submitted 8 months ago

    1 comment
View more solutions

Latest comments

  • CoreyWithTheSkills•280
    @CoreyWithTheSkills
    Submitted 8 months ago
    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
    Posted 7 months ago

    the user has deleted github repository of this project.

  • Chrision Wynaar•340
    @Clipzorama
    Submitted 7 months ago
    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
    Posted 7 months ago

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

  • CoreyWithTheSkills•280
    @CoreyWithTheSkills
    Submitted 8 months ago
    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
    Posted 8 months ago
    • 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
  • P
    roswell•520
    @welpmoz
    Submitted 8 months ago
    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
    Posted 8 months ago

    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,810
    @danielmrz-dev
    Submitted 8 months ago
    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
    Posted 8 months ago

    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
    Submitted almost 2 years ago

    CSS GRID AND FLEX-BOX

    1
    Ibeaka Godson•470
    @Warmarth
    Posted almost 2 years ago

    please your comments are required for self improvement and correct.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub