Currency Converter with React JS and Tailwind CSS - Full Tutorial 2024 🔥🔥

➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% Discount)
🔴Cryptomus Website - cme.sh/cryptomus
🔴Cryptomus Telegram - t.me/+eQUB6aGohutjZmU6
Build a Currency Converter App in React JS 18 using tailwindcss for styling. This is a great beginner project for learning react js.
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code - github.com/piyush-eon/currenc...
➡️ Book a mentorship call with me - topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
01:22 Setup React with Tailwind CSS
04:08 Currency Converter Component
05:55 Conversion API
08:29 Building the UI
14:09 Fetching API Data
15:40 Cryptomus Sponsorship
16:53 Currency Dropdown Component
26:03 Swap Currencies
29:08 Conversion Logic
32:21 Add to Favorites Logic
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)

[@saiphaneeshk.h.5482]

Awesome tutorial, i really liked swapping of the currency, since the setters will be called after the function is called and at the same time, the swapping works just fine.

[@pravinprince3221]

thank you for the wonderful video bro, it is so helpful for me and my team, thanks again bro

[@RavindraSingh-lp9pl]

Superb tutorial

[@vilxd5209]

hell yeah brother
nice video i needed it

[@Aviralsingh-yw7xx]

Amazing content

[@purusharma8192]

nice

[@user-kv4sp2zk6c]

let numbers = [1, 2, 3, 3, 4, 5, 5];
let uniqueNumbers = numbers.filter(function(value, index, array) {
return array.indexOf(value) === index;
});
console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]
In this example, we have an array of numbers with some duplicates. We use the filter() Method to create a new array called “uniqueNumbers” that only includes unique values. The callback function uses the indexOf() Method to check if the current value is the first occurrence in the array. If it is, the value is included in the new array; otherwise, it is excluded.
As a result, the “uniqueNumbers” array only contains the unique values from the original array.

[@CinematicClips-uz3mk]

After putting the api url i got blank page

[@uniquefashionshow3267]

How can we use rounter in this

[@QuantumCanvas07]

I'm not getting the tailwind suggestion even after installing the tailwind intelisense extension. Only way it pulls up for me is when I press Ctlr + Space. Let me know the solution, I think I'm doing something wrong

[@the_radiantsky]

Add this code in your settings.json in vscode
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
"editor.quickSuggestions": {
"strings": true
}

[@rishiraj2548]

🙏🙂👍

[@shivamgoyal796]

First 😂😂

[@saiphaneeshk.h.5482]

const currencies = new Set(["INR","AUD","CNY"])
const fav = new Set(["INR"])
const nonFav = [...currencies.difference(fav)]