All solutions

Frontend Mentor - Interactive card details form solution

This is a solution to the Interactive card details form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Installation Guide
• Overview
• The challenge
• Screenshot
• Links
• My process
• Built with
• What I learned
• Useful resources
• Author

Installation Guide

1. Clone the repository in your local IDE using this code in your terminal :

git clone https://github.com/TheRedBandiCoot/Interactive-card-details-form.git

1. After successfully get the files in your local IDE go to the new directory Interactive-card-details-form

• cd Interactive-card-details-form

1. Now run this code for install dependencies and running the app at the same time.

• npm install && npm run dev
• In case if you got some error for installation or run it, you can run npm install and npm run dev separately

1. Now click the link which is provided in your terminal or you can write the url manually in your browser

• LocalHost-(url)
• You can also press o in your in the terminal for open the url automatically in your browser.

1. Press ctrl + c or q in your terminal to close the server.

2. You can also change the server port configuration

• Open vite-config.js
• Right after the plugin, add another obj called server
• Create a property called port in your server & add value for your port.

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 5000,
},
});

• Make sure to restart the server by pressing r in your terminal for new changes.

Overview

The challenge

Users should be able to:

• Fill in the form and see the card details update in real-time
• Receive error messages when the form is submitted if:
• Any input field is empty
• The card number, expiry date, or CVC fields are in the wrong format
• View the optimal layout depending on their device's screen size
• See hover, active, and focus states for interactive elements on the page

Screenshot

Interactive-card-details-form

Links

• Solution URL: check here🔗
• Live Site URL: check here🔗

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• vite
• Vite.js is a development tool that comes with a dev server and is used for modern web applications.
• It offers a faster and smoother workflow in terms of development.

What I learned

• Tried to create a input box for credit card entering feature. How hard that can be if you know regex (honestly it took some minutes with regex) but with normal JS to create that feature you have to put way more logic than you thought. Yes there so many react provided library also there to help you out for solving the issue.
• Using “min” “max” in Input box in html.
• Use the onFocus and onBlur events in React to handle focus and blur events on elements.
• Also learned that these events are equivalent to the native focusin and focusout events, but they are normalized to bubble in React.
• A ternary operator inside the style prop of an element to conditionally apply inline styles.
• Learned that an empty object in the style prop means no inline styles are applied to the element.
• How to style the placeholder text in an input box using CSS.
• Learned that I can use the ::placeholder pseudo-element selector to apply different styles to the placeholder text than the input text.
• Also learned how to create a floating label effect for my input box, where the placeholder text moves above the input field on focus.
• How to use an input box followed by a label element, and use the adjacent element selector (+) to style the label based on the input state.
• Responsiveness design.

Useful resources

• Regular expressions - JavaScript | MDN
• HTML input min-max Attribute
• React hook - onFocus and onBlur
• Bing AI ChatBot
• Custom-Hooks
• React-Spring
• React 18 Tutorials By Codding Addict

Author

• Github - TheRedBandiCoot
• Frontend Mentor - @TheRedBandiCoot
• Twitter - @subho19996

Frontend Mentor - Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help me improve your coding skills by building realistic projects.

Table of contents

• Overview
• The challenge
• Screenshot
• Links
• My process
• Built with
• What I learned
• Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Clicking the dice button to check some animation effect on button
• Generate a new piece of advice by clicking the dice icon

Screenshot

Advice-Generator-App-Image

Links

• Solution URL: check here🔗
• Live Site URL: check here🔗

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• vite
• Vite.js is a development tool that comes with a dev server and is used for modern web applications.
• It offers a faster and smoother workflow in terms of development.

What I learned

• I used bing chatbot because I have some trouble with React (Because I'm new to React)

• Debounce - Also learn how to use debounce technic. How it's helps us so much when we're working with very slow API's:

Here is the code:

const handleQuotesGenerator = () => {
getQuotes();
};

const debounce = (callback, delay) => {
let timeOutId;
return function (...args) {
clearTimeout(timeOutId);
timeOutId = setTimeout(() => {
callback(...args);
}, delay);
};
};
const debounceHandleQuotesGenerator = debounce(handleQuotesGenerator, 1000);
return (
<animated.button className="dice" onClick={debounceHandleQuotesGenerator}>
<img src={dice} alt="" />
</animated.button>
);

• Also learn how learn how to React-Spring. Such a cool library for react users to create beautiful animations without scratching your head.

• Already learn how to use custom hooks for react components but never really use it for my own project today I also applied custom hooks for my projects.

Here is the code:

import { useEffect, useState } from 'react';

const useQuote = (API_URL) => {
const [quote, setQuote] = useState(null);
const [isLoading, setLoading] = useState(true);
const [isError, setError] = useState(false);

const getQuotes = async () => {
try {
const resp = await fetch(API_URL);
if (!resp.ok) {
setError(true);
setLoading(false);
return;
}
const data = await resp.json();
setQuote(data);
} catch (error) {
setError(true);
console.error(`Error: ${error}`);
}
setLoading(false);
};

useEffect(() => {
getQuotes();
}, []);

return { quote, isLoading, isError, getQuotes };
};

export default useQuote;

Useful resources

• Bing ChatBot
• Custom-Hooks
• React-Spring
• React 18 Tutorials By Codding Addict

Author

• Github - TheRedBandiCoot
• Frontend Mentor - @TheRedBandiCoot
• Twitter - @subho19996

• To all great devs.

• I hope everyone like it. Any feedback is always welcome regarding this website or code.

• Happy Coding 👍👍👍

🗯 In every project I've got a lot of ideas to put in but due to a lack of knowledge in coding and the right time to use the right logic to accomplish the idea I thought it very hard for me to achieve.

➡ In this particular project using javascript to make this page interactive is the most challenging part for me honestly.

➡ Later while working on making the animated submit button & use the Transform CSS property to make the after submitting animation more interactable is quite a challenging part for me but also interesting at the same time.

🗯 In Some of the areas in the javascript part of the code I'm quite unsure whether the logic is right or wrong Please Check This Code Snippets Out And Help Me Out 👇👇👇👇👇👇👇👇👇👇👇👇👇👇 Repository URL for All Code Snippets

btn.addEventListener("click", (e)=>{
        buttonColorChange.forEach((e)=>{
          if (e.classList.length === 2) {
            setTimeout(() => {
              forNoneAdder()
              isShow.classList.remove("fornone")
              add.innerHTML = e.innerHTML
            }, 250);
            container.classList.add("isShow")
          } else{
            btn.classList.add("ani")
            setTimeout(()=>{
              btn.classList.remove("ani") 
            },500)
          }
        })
      })

➡ Here In This part of the code, when I click the button ani class add to the button but it will get removed after 500ms but when I again click the button and check the element tab from developer tools in google I see the ani class already there and in the console, panel show me 5 buttons when I console.log(btn)

➡ I also apply the ani class in the else condition when the button got clicked without selecting the rating number but the class also added in if condition I don't why PLEASE CHECK THIS OUT this problem

🗯 I gonna check out more projects to work on in Frontendmentor.io

⌘This Is RedBandiCoot Signing Off

stay hungry stay foolish—Stewart Brand