Skip to content

Commit

Permalink
Exchange currency (#396)
Browse files Browse the repository at this point in the history
#383

[Cite any related issue(s) this pull request addresses. If none, simply
state "None”]
write issue no. here




## Description

[Please include a brief description of the changes or features added]

## Type of PR


- [ x] Feature enhancement


check in issue by entering [X] in boxes

## Screenshots / Videos (if applicable)

![Screenshot 2025-01-08
160404](https://github.com/user-attachments/assets/24f43481-b796-4f4e-9de3-9ba712c3ef06)

[Attach any relevant screenshots or videos demonstrating the changes]

## Checklist
- [ x] I have performed a self-review of my code.
- [ x] I have read and followed the Contribution Guidelines.
- [ x] I have tested the changes thoroughly before submitting this pull
request.
- [ x] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [ x] I have commented my code, particularly in hard-to-understand
areas.
- [ x] I have followed the code style guidelines of this project.
- [ x] I have checked for any existing open issues that my pull request
may address.
- [ x] I have ensured that my changes do not break any existing
functionality.
- [ x] Each contributor is allowed to create a maximum of 4 issues per
day. This helps us manage and address issues efficiently.
- [ x] I have read the resources for guidance listed below.
- [ x] I have followed security best practices in my code changes.


check in issue by entering [X] in boxes
## Additional Context

[Include any additional information or context that might be helpful for
reviewers.]




## Contribution Guidelines

Thank you for considering contributing to our project! To ensure smooth
collaboration and effective contribution management, please adhere to
the following guidelines:

### Issue Creation

1. **Limit on Issues:**
- Each contributor is allowed to create a maximum of **4 issues per
day**. This helps us manage and address issues efficiently.

### Contribution Levels

2. **Basic Contributions:**
- This project is primarily focused on documentation. Most of the setup
has been completed, so contributors will generally need to work on basic
code tasks, such as writing tests.
   - For these tasks, issues will be assigned the **Easy** label.

3. **Acknowledging Hard Work:**
- If a contributor puts in significant effort on a task, the issue will
be upgraded to **Medium**. This is our way of recognizing and
appreciating extra effort.

4. **Feature Additions and Component Work:**
- Contributors working on new features or components using JSX/TSX will
be assigned a level based on the complexity and quality of their work.
- The more complex and valuable the contribution, the higher the level
assigned.

### Level Definitions

- **Easy:**
- Tasks are straightforward, such as fixing minor bugs, writing tests,
or making simple documentation updates.
- **Medium:**
- Tasks require more effort, such as addressing complex bugs, improving
existing features, or making substantial documentation improvements.
- **Hard:**
- Tasks are highly complex and involve significant new feature
development, major refactoring, or extensive contributions to the
project’s core components.

We look forward to your contributions and appreciate your effort in
helping us improve the project!
  • Loading branch information
dhairyagothi authored Jan 9, 2025
2 parents 33c1079 + 45eed1b commit d7bc32a
Show file tree
Hide file tree
Showing 6 changed files with 355 additions and 3 deletions.
5 changes: 3 additions & 2 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,12 @@ document.addEventListener('DOMContentLoaded', fillTable());

function fillTable(){

// Array Containing All The Data

data = [["Day 1","To-Do List"," /public/TO_DO_LIST/todolist.html"],["Day 2","Digital Clock"," /public/digital_clock/digitalclock.html"],["Day 3","Indian Flag"," /public/indianflag/flag.html"],["Day 4","Dropdown Nav Bar"," /public/dropdown_navbar/index.html"],["Day 5","Animated Cursor"," /public/Animated-cursor/animated-cursor.html"],["Day 6","Auto Background Image Slider"," /public/Background-Image-sider/slider.html"],["Day 7","Typewriter"," /public/typewriter/typewriter.html"],["Day 8","Parallel-X Website"," /public/Parallel-x%20website/parallal.html"],["Day 9","Captcha Generator"," /public/captcha/captcha.html"],["Day 10","QR Code Generator"," /public/qr%20generator/qr.html"],["Day 11","Serve Website Using Express"," /public/index.html"],["Day 12","Nodemailer Contact Form"," /public/gmail_nodemailer/public/mail.html"],["Day 13","Login Form Using MERN","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/loginusingmern"],["Day 14","File Uploader","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/file_uploader"],["Day 15","Progress Bar"," /public/progress_bar/progress_bar.html"],["Day 16","Scroll Bar CSS"," /public/index.html"],["Day 17","Slider Using Swiper API"," /public/slider%20box/index.html"],["Day 18","Carousel Solar System"," /public/carousal/index.html"],["Day 19","Planto"," /public/plantwebsite/plant.html"],["Day 20","EveSparks"," /public/https://evesparks.onrender.com/"],["Day 21","Video BG Slider Using React"," /public/https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/travel_website"],["Day 22","Page Loader"," /public/pageloader/pageloader.html"],["Day 23","Jarvis Virtual Assistant"," /public/Jarvis-AI-main/index.html"],["Day 24","Chat Bot"," /public/AI%20ChatBot/chatbot.html"],["Day 25","Tic-Tac-Toe"," /public/TicTacToe/index.html"],["Day 26","Maze Game"," /public/Maze-Game-main/index.html"],["Day 27","Memory Game"," /public/MemoryGame/index.html"],["Day 28","Wordle"," /public/WORDLE/index.html"],["Day 29","Snake Game"," /public/snake_game/index.html"],["Day 30","Flappy-bird-game"," /public/Flappy-bird-main/index.html"],["Day 31","Password Manager"," /public/password%20manager/index.html"],["DAY-32","Missionaries & Cannibals"," /public/Missionaries&Cannibals/index.html"],["Day 33","Weather Forcasting"," /public/Weather%20Forcasting/index.html"],["Day 34","Email Validator"," /public/email%20validator/index.html"],["Day 35","Vanilla-JavaScript-Calculator"," /public/Vanilla-JavaScript-Calculator-master/index.html"],["Day 36","Medical App"," /public/Medical_App/index.html"],["Day 37","2048 Game"," /public/2048_game/index.html"],["Day 38","Github Profile Finder","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/github_profile_finder"],["Day 39","Notes App"," /public/notes-app/index.html"],["Day 40","Analog Clock"," /public/AnalogClock/index.html"],["Day 41","Scroll Dark Game"," /public/Scroll%20Game%20Dark%20Run/index.html"],["Day 42","Amazon App"," /public/Amazon_Clone/index.html"],["Day 43","Password Generator"," /public/Password_Generator/index.html"],["Day 44","BMI Calculator"," /public/BMI_Calculator/index.html"],["Day 45","Black Jack"," /public/BlackJack/blackJ.html"],["Day 46","Palindrome Generator"," /public/Palindrome_Generator/index.html"],["Day 47","Ping Pong Game"," /public/ping/index.html"],["Day 48","TextToVoiceConverter"," /public/TextToVoiceConverter/index.html"],["Day 49","Url Shortener","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/url_shortener"],["Day 50","Recipe Genie","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Recipe-Genie"],["Day 51","Netflix Landing Page Clone"," /public/Netflix_Cloning/Index.html"],["Day 52","ClimaCode"," /public/ClimaCode%202.0/index.html"],["Day 53","E-Commerce Website with Simple Cart Functionality"," /public/e-commerce_cart/index.html"],["Day 54","Budget Tracker"," /public/Budget%20Tracker/index.html"],["Day 55","Cricket Game"," /public/cricket/index.html"],["Day 56","Pastebin using svelte","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/pastebin"],["Day 57","Glowing Social Media Icons"," /public/Social%20Media%20Glowing/index.html"],["Day 58","Music App"," /public/Music%20App/index.html"],["Day 59","Blog Page"," /public/Blog%20Page/index.html"],["Day 60","Marketing template website"," /public/marketing_website/index.html"],["Day 61","Hologram Button"," /public/Holo%20Button/index.html"],["Day 62","Solar System Explorer"," /public/Solar%20System%20Explorer%20in%20CSS%20only%20haml/template.html"],["Day 63","Image to Text App"," /public/Image-To-Text-App/index.html"],["Day 64","Zomato-clone"," /public/zomato-clone/zomato.html"],["Day 65","The Cube"," /public/The%20Cube/index.html"],["Day 66","Flask Authentication App","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/flask_auth_app/README.md"],["Day 67","Blog-Website"," /public/blog/main.html"],["Day 68","3d Rotating Card"," /public/3d%20cards/index.html"],["Day 69","Spotify Clone Project"," /public/spotify-clone%20-project/index.html"],["Day 70","Insect-Catch_Game"," /public/Insect-Catch-Game/index.html"],["Day 71","Quotely Laughs"," /public/Quotely-Laughs/index.html"],["Day 72","Contact Book","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Contact%20Book/README.md"],["Day 73","Candy_Crush_Game"," /public/Candy_Crush_Game/index.html"],["Day 74","Stock Profit Calculator"," /public/Stock-Profit-Calculator/index.html"],["Day 75","code-space-game project"," /public/code-jump-space-game/index.html"],["Day 76","Animated Searchbar"," /public/Animated%20Searchbar/index.html"],["Day 77","Rock-Paper-Scissor-game project"," /public/Stone-Paper-Scissor/index.html"],["Day 78","NPM Package Search"," /public/NPM%20Package%20Search/index.html"],["Day 79","Linkedin Homepage Clone"," /public/Linkedin-Clone/index.html"],["Day 80","Resume Studio"," /public/ResumeStudio/index.html"],["Day 81","Simon Says Game"," /public/Simon_Says_Game/index.html"],["Day 82","Love Calculator Game"," /public/Love-Calculator/index.html"],["Day 83","Exchange Currency"," /public/Exchange_Currency/index.html"]]

data = [["Day 1","To-Do List"," /public/TO_DO_LIST/todolist.html"],["Day 2","Digital Clock"," /public/digital_clock/digitalclock.html"],["Day 3","Indian Flag"," /public/indianflag/flag.html"],["Day 4","Dropdown Nav Bar"," /public/dropdown_navbar/index.html"],["Day 5","Animated Cursor"," /public/Animated-cursor/animated-cursor.html"],["Day 6","Auto Background Image Slider"," /public/Background-Image-sider/slider.html"],["Day 7","Typewriter"," /public/typewriter/typewriter.html"],["Day 8","Parallel-X Website"," /public/Parallel-x%20website/parallal.html"],["Day 9","Captcha Generator"," /public/captcha/captcha.html"],["Day 10","QR Code Generator"," /public/qr%20generator/qr.html"],["Day 11","Serve Website Using Express"," /public/index.html"],["Day 12","Nodemailer Contact Form"," /public/gmail_nodemailer/public/mail.html"],["Day 13","Login Form Using MERN","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/loginusingmern"],["Day 14","File Uploader","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/file_uploader"],["Day 15","Progress Bar"," /public/progress_bar/progress_bar.html"],["Day 16","Scroll Bar CSS"," /public/index.html"],["Day 17","Slider Using Swiper API"," /public/slider%20box/index.html"],["Day 18","Carousel Solar System"," /public/carousal/index.html"],["Day 19","Planto"," /public/plantwebsite/plant.html"],["Day 20","EveSparks"," /public/https://evesparks.onrender.com/"],["Day 21","Video BG Slider Using React"," /public/https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/travel_website"],["Day 22","Page Loader"," /public/pageloader/pageloader.html"],["Day 23","Jarvis Virtual Assistant"," /public/Jarvis-AI-main/index.html"],["Day 24","Chat Bot"," /public/AI%20ChatBot/chatbot.html"],["Day 25","Tic-Tac-Toe"," /public/TicTacToe/index.html"],["Day 26","Maze Game"," /public/Maze-Game-main/index.html"],["Day 27","Memory Game"," /public/MemoryGame/index.html"],["Day 28","Wordle"," /public/WORDLE/index.html"],["Day 29","Snake Game"," /public/snake_game/index.html"],["Day 30","Flappy-bird-game"," /public/Flappy-bird-main/index.html"],["Day 31","Password Manager"," /public/password%20manager/index.html"],["DAY-32","Missionaries & Cannibals"," /public/Missionaries&Cannibals/index.html"],["Day 33","Weather Forcasting"," /public/Weather%20Forcasting/index.html"],["Day 34","Email Validator"," /public/email%20validator/index.html"],["Day 35","Vanilla-JavaScript-Calculator"," /public/Vanilla-JavaScript-Calculator-master/index.html"],["Day 36","Medical App"," /public/Medical_App/index.html"],["Day 37","2048 Game"," /public/2048_game/index.html"],["Day 38","Github Profile Finder","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/github_profile_finder"],["Day 39","Notes App"," /public/notes-app/index.html"],["Day 40","Analog Clock"," /public/AnalogClock/index.html"],["Day 41","Scroll Dark Game"," /public/Scroll%20Game%20Dark%20Run/index.html"],["Day 42","Amazon App"," /public/Amazon_Clone/index.html"],["Day 43","Password Generator"," /public/Password_Generator/index.html"],["Day 44","BMI Calculator"," /public/BMI_Calculator/index.html"],["Day 45","Black Jack"," /public/BlackJack/blackJ.html"],["Day 46","Palindrome Generator"," /public/Palindrome_Generator/index.html"],["Day 47","Ping Pong Game"," /public/ping/index.html"],["Day 48","TextToVoiceConverter"," /public/TextToVoiceConverter/index.html"],["Day 49","Url Shortener","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/url_shortener"],["Day 50","Recipe Genie","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Recipe-Genie"],["Day 51","Netflix Landing Page Clone"," /public/Netflix_Cloning/Index.html"],["Day 52","ClimaCode"," /public/ClimaCode%202.0/index.html"],["Day 53","E-Commerce Website with Simple Cart Functionality"," /public/e-commerce_cart/index.html"],["Day 54","Budget Tracker"," /public/Budget%20Tracker/index.html"],["Day 55","Cricket Game"," /public/cricket/index.html"],["Day 56","Pastebin using svelte","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/pastebin"],["Day 57","Glowing Social Media Icons"," /public/Social%20Media%20Glowing/index.html"],["Day 58","Music App"," /public/Music%20App/index.html"],["Day 59","Blog Page"," /public/Blog%20Page/index.html"],["Day 60","Marketing template website"," /public/marketing_website/index.html"],["Day 61","Hologram Button"," /public/Holo%20Button/index.html"],["Day 62","Solar System Explorer"," /public/Solar%20System%20Explorer%20in%20CSS%20only%20haml/template.html"],["Day 63","Image to Text App"," /public/Image-To-Text-App/index.html"],["Day 64","Zomato-clone"," /public/zomato-clone/zomato.html"],["Day 65","The Cube"," /public/The%20Cube/index.html"],["Day 66","Flask Authentication App","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/flask_auth_app/README.md"],["Day 67","Blog-Website"," /public/blog/main.html"],["Day 68","3d Rotating Card"," /public/3d%20cards/index.html"],["Day 69","Spotify Clone Project"," /public/spotify-clone%20-project/index.html"],["Day 70","Insect-Catch_Game"," /public/Insect-Catch-Game/index.html"],["Day 71","Quotely Laughs"," /public/Quotely-Laughs/index.html"],["Day 72","Contact Book","https://github.com/dhairyagothi/50_days_50_web_project/tree/Main/public/Contact%20Book/README.md"],["Day 73","Candy_Crush_Game"," /public/Candy_Crush_Game/index.html"],["Day 74","Stock Profit Calculator"," /public/Stock-Profit-Calculator/index.html"],["Day 75","code-space-game project"," /public/code-jump-space-game/index.html"],["Day 76","Animated Searchbar"," /public/Animated%20Searchbar/index.html"],["Day 77","Rock-Paper-Scissor-game project"," /public/Stone-Paper-Scissor/index.html"],["Day 78","NPM Package Search"," /public/NPM%20Package%20Search/index.html"],["Day 79","Linkedin Homepage Clone"," /public/Linkedin-Clone/index.html"],["Day 80","Resume Studio"," /public/ResumeStudio/index.html"],["Day 81","CountDown Timer","/public/CountDown Timer/index.html"], ["Day 82","Simon Says Game"," /public/Simon_Says_Game/index.html"],["Day 83","Love Calculator Game"," /public/Love-Calculator/index.html"]]




// Table Body
tbody = document.getElementById("tableBody")
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

59 changes: 59 additions & 0 deletions public/Exchange_Currency/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const BASE_URL =
"https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";

const dropdowns = document.querySelectorAll(".dropdown select");
const btn = document.querySelector("form button");
const fromCurr = document.querySelector(".from select");
const toCurr = document.querySelector(".to select");
const msg = document.querySelector(".msg");

for (let select of dropdowns) {
for (currCode in countryList) {
let newOption = document.createElement("option");
newOption.innerText = currCode;
newOption.value = currCode;
if (select.name === "from" && currCode === "USD") {
newOption.selected = "selected";
} else if (select.name === "to" && currCode === "INR") {
newOption.selected = "selected";
}
select.append(newOption);
}

select.addEventListener("change", (evt) => {
updateFlag(evt.target);
});
}

const updateExchangeRate = async () => {
let amount = document.querySelector(".amount input");
let amtVal = amount.value;
if (amtVal === "" || amtVal < 1) {
amtVal = 1;
amount.value = "1";
}
const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
let response = await fetch(URL);
let data = await response.json();
let rate = data[toCurr.value.toLowerCase()];

let finalAmount = amtVal * rate;
msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
};

const updateFlag = (element) => {
let currCode = element.value;
let countryCode = countryList[currCode];
let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`;
let img = element.parentElement.querySelector("img");
img.src = newSrc;
};

btn.addEventListener("click", (evt) => {
evt.preventDefault();
updateExchangeRate();
});

window.addEventListener("load", () => {
updateExchangeRate();
});
161 changes: 161 additions & 0 deletions public/Exchange_Currency/data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
const countryList = {
AED: "AE",
AFN: "AF",
XCD: "AG",
ALL: "AL",
AMD: "AM",
ANG: "AN",
AOA: "AO",
AQD: "AQ",
ARS: "AR",
AUD: "AU",
AZN: "AZ",
BAM: "BA",
BBD: "BB",
BDT: "BD",
XOF: "BE",
BGN: "BG",
BHD: "BH",
BIF: "BI",
BMD: "BM",
BND: "BN",
BOB: "BO",
BRL: "BR",
BSD: "BS",
NOK: "BV",
BWP: "BW",
BYR: "BY",
BZD: "BZ",
CAD: "CA",
CDF: "CD",
XAF: "CF",
CHF: "CH",
CLP: "CL",
CNY: "CN",
COP: "CO",
CRC: "CR",
CUP: "CU",
CVE: "CV",
CYP: "CY",
CZK: "CZ",
DJF: "DJ",
DKK: "DK",
DOP: "DO",
DZD: "DZ",
ECS: "EC",
EEK: "EE",
EGP: "EG",
ETB: "ET",
EUR: "FR",
FJD: "FJ",
FKP: "FK",
GBP: "GB",
GEL: "GE",
GGP: "GG",
GHS: "GH",
GIP: "GI",
GMD: "GM",
GNF: "GN",
GTQ: "GT",
GYD: "GY",
HKD: "HK",
HNL: "HN",
HRK: "HR",
HTG: "HT",
HUF: "HU",
IDR: "ID",
ILS: "IL",
INR: "IN",
IQD: "IQ",
IRR: "IR",
ISK: "IS",
JMD: "JM",
JOD: "JO",
JPY: "JP",
KES: "KE",
KGS: "KG",
KHR: "KH",
KMF: "KM",
KPW: "KP",
KRW: "KR",
KWD: "KW",
KYD: "KY",
KZT: "KZ",
LAK: "LA",
LBP: "LB",
LKR: "LK",
LRD: "LR",
LSL: "LS",
LTL: "LT",
LVL: "LV",
LYD: "LY",
MAD: "MA",
MDL: "MD",
MGA: "MG",
MKD: "MK",
MMK: "MM",
MNT: "MN",
MOP: "MO",
MRO: "MR",
MTL: "MT",
MUR: "MU",
MVR: "MV",
MWK: "MW",
MXN: "MX",
MYR: "MY",
MZN: "MZ",
NAD: "NA",
XPF: "NC",
NGN: "NG",
NIO: "NI",
NPR: "NP",
NZD: "NZ",
OMR: "OM",
PAB: "PA",
PEN: "PE",
PGK: "PG",
PHP: "PH",
PKR: "PK",
PLN: "PL",
PYG: "PY",
QAR: "QA",
RON: "RO",
RSD: "RS",
RUB: "RU",
RWF: "RW",
SAR: "SA",
SBD: "SB",
SCR: "SC",
SDG: "SD",
SEK: "SE",
SGD: "SG",
SKK: "SK",
SLL: "SL",
SOS: "SO",
SRD: "SR",
STD: "ST",
SVC: "SV",
SYP: "SY",
SZL: "SZ",
THB: "TH",
TJS: "TJ",
TMT: "TM",
TND: "TN",
TOP: "TO",
TRY: "TR",
TTD: "TT",
TWD: "TW",
TZS: "TZ",
UAH: "UA",
UGX: "UG",
USD: "US",
UYU: "UY",
UZS: "UZ",
VEF: "VE",
VND: "VN",
VUV: "VU",
YER: "YE",
ZAR: "ZA",
ZMK: "ZM",
ZWD: "ZW",
};
49 changes: 49 additions & 0 deletions public/Exchange_Currency/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Currency Converter</title>
<link href="style.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>

</head>
<body>
<div class="container">
<h2>Currency Converter</h2>
<form>
<div class="amount">
<p>Enter Amount</p>
<input value="1" type="text" />
</div>
<div class="dropdown">
<div class="from">
<p>From</p>
<div class="select-container">
<img src="https://flagsapi.com/US/flat/64.png" />
<select name="from"></select>
</div>
</div>
<i class="fa-solid fa-arrow-right-arrow-left"></i>
<div class="to">
<p>To</p>
<div class="select-container">
<img src="https://flagsapi.com/IN/flat/64.png" />
<select name="to"></select>
</div>
</div>
</div>
<div class="msg">1USD = 80INR</div>
<button>Get Exchange Rate</button>
</form>
</div>
<script src="data.js"></script>
<script src="app.js"></script>
</body>
</html>
82 changes: 82 additions & 0 deletions public/Exchange_Currency/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
* {
margin: 0;
padding: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4e4ba;
}

.container {
background-color: #fff;
padding: 2rem;
border-radius: 1rem;
min-height: 45vh;
width: 40vh;
}

form {
margin: 2rem 0 1rem 0;
}

form select,
button,
input {
width: 100%;
border: none;
outline: none;
border-radius: 0.75rem;
}

form input {
border: 1px solid lightgray;
font-size: 1rem;
height: 3rem;
padding-left: 0.5rem;
}

.dropdown {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
}

.dropdown i {
font-size: 1.5rem;
margin-top: 1rem;
}

.select-container img {
max-width: 2rem;
}

.select-container {
display: flex;
justify-content: center;
align-items: center;
width: 6rem;
border-radius: 0.5rem;
border: 1px solid lightgray;
}

.select-container select {
font-size: 1rem;
width: auto;
}

.msg {
margin: 2rem 0 2rem 0;
}

form button {
height: 3rem;
background-color: #af4d98;
color: #fff;
font-size: 1.15rem;
cursor: pointer;
}

0 comments on commit d7bc32a

Please sign in to comment.