Update javascript class
This commit is contained in:
parent
c67a36732d
commit
46c0a78447
Binary file not shown.
@ -0,0 +1,8 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html lang="en">
|
||||||
|
<title>Snowman</title>
|
||||||
|
<script src="snowman.js"></script>
|
||||||
|
<body>
|
||||||
|
<canvas width="300" height="300"></canvas>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
html-java-script/week11/10.16-lab-snowman-canvas/snowman.js
Normal file
75
html-java-script/week11/10.16-lab-snowman-canvas/snowman.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
"use strict"
|
||||||
|
// Size of a single snowflake
|
||||||
|
const flakeSize = 8;
|
||||||
|
|
||||||
|
window.addEventListener("DOMContentLoaded", function() {
|
||||||
|
var canvas = document.querySelector("canvas");
|
||||||
|
|
||||||
|
drawGround(canvas);
|
||||||
|
drawSnowText(canvas);
|
||||||
|
drawSnowman(canvas);
|
||||||
|
drawSnowflakes(canvas);
|
||||||
|
});
|
||||||
|
|
||||||
|
function drawGround(canvas) {
|
||||||
|
var context = canvas.getContext("2d");
|
||||||
|
|
||||||
|
// background
|
||||||
|
context.fillStyle = "lightgray";
|
||||||
|
context.fillRect(0, 0, 300, 300);
|
||||||
|
|
||||||
|
// ground
|
||||||
|
context.fillStyle = "brown";
|
||||||
|
context.fillRect(0, canvas.height - 50, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawSnowflakes(canvas) {
|
||||||
|
for (var c = 0; c < 100; c++) {
|
||||||
|
var x = Math.floor(Math.random() * canvas.width);
|
||||||
|
var y = Math.floor(Math.random() * canvas.height);
|
||||||
|
drawSingleFlake(canvas, x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Complete the functions below
|
||||||
|
|
||||||
|
function drawSnowText(canvas) {
|
||||||
|
var context = canvas.getContext("2d");
|
||||||
|
context.font="80px Verdana";
|
||||||
|
context.textAlign="center";
|
||||||
|
context.textBaseline="top";
|
||||||
|
context.fillStyle="blue";
|
||||||
|
context.fillText("SNOW", canvas.width/2,10);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawSnowman(canvas) {
|
||||||
|
//bottom
|
||||||
|
var context = canvas.getContext("2d");
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(150, 200, 50, 0, Math.PI *2);
|
||||||
|
context.fillStyle = "white";
|
||||||
|
context.fill();
|
||||||
|
|
||||||
|
//middle
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(150, 120, 40, 0, Math.PI *2);
|
||||||
|
context.fillStyle = "white";
|
||||||
|
context.fill();
|
||||||
|
|
||||||
|
//top
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(150, 60, 25, 0, Math.PI *2);
|
||||||
|
context.fillStyle = "white";
|
||||||
|
context.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawSingleFlake(canvas, x, y) {
|
||||||
|
var context = canvas.getContext("2d");
|
||||||
|
context.moveTo(x, y);
|
||||||
|
context.lineTo(x+flakeSize/2, y+flakeSize/2);
|
||||||
|
context.lineTo(x, y + flakeSize);
|
||||||
|
context.lineTo(x-flakeSize/2, y+flakeSize/2);
|
||||||
|
context.fillStyle = "white";
|
||||||
|
context.fill();
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,51 @@
|
|||||||
|
"use strict"
|
||||||
|
const directions = {
|
||||||
|
UP: 'up',
|
||||||
|
DOWN: 'down',
|
||||||
|
LEFT: 'left',
|
||||||
|
RIGHT: 'right'
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("load", function () {
|
||||||
|
const canvas = document.querySelector("canvas");
|
||||||
|
|
||||||
|
// Draw 4 frogs facing different directions
|
||||||
|
drawFrog(canvas, 50, 50, directions.UP);
|
||||||
|
drawFrog(canvas, 180, 50, directions.DOWN);
|
||||||
|
drawFrog(canvas, 50, 180, directions.LEFT);
|
||||||
|
drawFrog(canvas, 180, 180, directions.RIGHT);
|
||||||
|
});
|
||||||
|
|
||||||
|
function drawFrog(canvas, x, y, direction = directions.UP) {
|
||||||
|
const context = canvas.getContext("2d");
|
||||||
|
const frogImg = document.querySelector("img");
|
||||||
|
|
||||||
|
switch (direction) {
|
||||||
|
case directions.DOWN:
|
||||||
|
// TODO: Translate, rotate, and translate
|
||||||
|
context.translate(x+frogImg.width/2, y+frogImg.height/2);
|
||||||
|
context.rotate(Math.PI);
|
||||||
|
context.translate(-1*(x+frogImg.width/2), -1*(y+frogImg.height/2));
|
||||||
|
break;
|
||||||
|
case directions.LEFT:
|
||||||
|
context.translate(x+frogImg.width/2, y+frogImg.height/2);
|
||||||
|
context.rotate(Math.PI/-2);
|
||||||
|
context.translate(-1*(x+frogImg.width/2), -1*(y+frogImg.height/2));
|
||||||
|
|
||||||
|
// TODO: Translate, rotate, and translate
|
||||||
|
|
||||||
|
break;
|
||||||
|
case directions.RIGHT:
|
||||||
|
// TODO: Translate, rotate, and translate
|
||||||
|
context.translate(x+frogImg.width/2, y+frogImg.height/2);
|
||||||
|
context.rotate(Math.PI/2);
|
||||||
|
context.translate(-1*(x+frogImg.width/2), -1*(y+frogImg.height/2));
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
context.drawImage(frogImg, x, y);
|
||||||
|
|
||||||
|
// Necessary so next call to drawFrog isn't rotated or translated
|
||||||
|
context.resetTransform();
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html lang="en">
|
||||||
|
<title>From Image Rotate and Translate</title>
|
||||||
|
<script src="frog.js"></script>
|
||||||
|
<body>
|
||||||
|
<canvas width="600" height="600"></canvas>
|
||||||
|
<img style="display: none;" src="frog.png" alt="Frog">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
@ -0,0 +1,62 @@
|
|||||||
|
window.addEventListener("DOMContentLoaded", function () {
|
||||||
|
document.querySelector("#showCircleBtn").addEventListener("click", showCircleClick);
|
||||||
|
});
|
||||||
|
|
||||||
|
function noThrow(){
|
||||||
|
alert("showCircle called too soon");
|
||||||
|
}
|
||||||
|
function yesThrow(){
|
||||||
|
let div = document.getElementsByTagName("div");
|
||||||
|
div[0].innerHTML = "Ta da!";
|
||||||
|
}
|
||||||
|
|
||||||
|
function showCircleClick() {
|
||||||
|
// TODO: Add modifications here
|
||||||
|
showCircle(160, 180, 120).then(yesThrow, noThrow);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Do not modify the code below
|
||||||
|
|
||||||
|
let timerId = null;
|
||||||
|
|
||||||
|
function showCircle(cx, cy, radius) {
|
||||||
|
|
||||||
|
// Only allow one div to exist at a time
|
||||||
|
let div = document.querySelector("div");
|
||||||
|
if (div !== null) {
|
||||||
|
div.parentNode.removeChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new div and add to DOM
|
||||||
|
div = document.createElement("div");
|
||||||
|
div.style.width = 0;
|
||||||
|
div.style.height = 0;
|
||||||
|
div.style.left = cx + "px";
|
||||||
|
div.style.top = cy + "px";
|
||||||
|
div.className = "circle";
|
||||||
|
document.body.append(div);
|
||||||
|
|
||||||
|
// Set width and height after showCircle() completes so transition kicks in
|
||||||
|
setTimeout(() => {
|
||||||
|
div.style.width = radius * 2 + 'px';
|
||||||
|
div.style.height = radius * 2 + 'px';
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
let promise = new Promise(function(resolve, reject) {
|
||||||
|
// Reject if showCircle() is called before timer finishes
|
||||||
|
if (timerId !== null) {
|
||||||
|
clearTimeout(timerId);
|
||||||
|
timerId = null;
|
||||||
|
div.parentNode.removeChild(div);
|
||||||
|
reject("showCircle called too soon");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
timerId = setTimeout(() => {
|
||||||
|
resolve(div);
|
||||||
|
timerId = null;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return promise;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html lang="en">
|
||||||
|
<title>Promise Lab</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<script src="circle.js"></script>
|
||||||
|
<body>
|
||||||
|
<button id="showCircleBtn">Show Circle</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
.circle {
|
||||||
|
transition-property: width, height, margin-left, margin-top;
|
||||||
|
transition-duration: 2s;
|
||||||
|
position: fixed;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
background-color: coral;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 240px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
BIN
html-java-script/week12/LAB Currency Conversion (jQuery).zip
Normal file
BIN
html-java-script/week12/LAB Currency Conversion (jQuery).zip
Normal file
Binary file not shown.
46
html-java-script/week12/currex.html
Normal file
46
html-java-script/week12/currex.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Currency Exchange</title>
|
||||||
|
|
||||||
|
<!-- Compiled and minified JavaScript -->
|
||||||
|
<script src="jquery-3.2.1.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Website is optimized for mobile -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
|
<script src="currex.js" defer></script>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<h2>Currency Conversion</h2>
|
||||||
|
|
||||||
|
<p>Enter USD and select desired currency.</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="usdInput">US Dollars (USD):</label>
|
||||||
|
<input type="text" id="usdInput" name="usdInput" value="100.00">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="toCurrency">Select currency:</label>
|
||||||
|
<select id="toCurrency">
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label id="resultLabel" for="resultCurrency">To Currency ():</label>
|
||||||
|
<input type="text" id="resultCurrency" name="resultCurrency" value="---.--" readonly>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card data">
|
||||||
|
<h2>Exchange Rate Data (JSON)</h2>
|
||||||
|
|
||||||
|
<textarea rows="5" id="exchangeRates" name="exchangeRates">{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1534467600,"base":"USD","rates":{"CAD":1.316145,"CNY":6.882134,"EUR":0.879303,"INR":70.015}}</textarea>
|
||||||
|
<button id="updateRates">Update Rates</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
270
html-java-script/week12/currex.js
Normal file
270
html-java-script/week12/currex.js
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
"use strict"
|
||||||
|
// Mapping of all currency abbreviations to full currency name
|
||||||
|
var allCurrencies = {
|
||||||
|
"AED": "United Arab Emirates Dirham",
|
||||||
|
"AFN": "Afghan Afghani",
|
||||||
|
"ALL": "Albanian Lek",
|
||||||
|
"AMD": "Armenian Dram",
|
||||||
|
"ANG": "Netherlands Antillean Guilder",
|
||||||
|
"AOA": "Angolan Kwanza",
|
||||||
|
"ARS": "Argentine Peso",
|
||||||
|
"AUD": "Australian Dollar",
|
||||||
|
"AWG": "Aruban Florin",
|
||||||
|
"AZN": "Azerbaijani Manat",
|
||||||
|
"BAM": "Bosnia-Herzegovina Convertible Mark",
|
||||||
|
"BBD": "Barbadian Dollar",
|
||||||
|
"BDT": "Bangladeshi Taka",
|
||||||
|
"BGN": "Bulgarian Lev",
|
||||||
|
"BHD": "Bahraini Dinar",
|
||||||
|
"BIF": "Burundian Franc",
|
||||||
|
"BMD": "Bermudan Dollar",
|
||||||
|
"BND": "Brunei Dollar",
|
||||||
|
"BOB": "Bolivian Boliviano",
|
||||||
|
"BRL": "Brazilian Real",
|
||||||
|
"BSD": "Bahamian Dollar",
|
||||||
|
"BTC": "Bitcoin",
|
||||||
|
"BTN": "Bhutanese Ngultrum",
|
||||||
|
"BWP": "Botswanan Pula",
|
||||||
|
"BYN": "Belarusian Ruble",
|
||||||
|
"BZD": "Belize Dollar",
|
||||||
|
"CAD": "Canadian Dollar",
|
||||||
|
"CDF": "Congolese Franc",
|
||||||
|
"CHF": "Swiss Franc",
|
||||||
|
"CLF": "Chilean Unit of Account (UF)",
|
||||||
|
"CLP": "Chilean Peso",
|
||||||
|
"CNH": "Chinese Yuan (Offshore)",
|
||||||
|
"CNY": "Chinese Yuan",
|
||||||
|
"COP": "Colombian Peso",
|
||||||
|
"CRC": "Costa Rican Colón",
|
||||||
|
"CUC": "Cuban Convertible Peso",
|
||||||
|
"CUP": "Cuban Peso",
|
||||||
|
"CVE": "Cape Verdean Escudo",
|
||||||
|
"CZK": "Czech Republic Koruna",
|
||||||
|
"DJF": "Djiboutian Franc",
|
||||||
|
"DKK": "Danish Krone",
|
||||||
|
"DOP": "Dominican Peso",
|
||||||
|
"DZD": "Algerian Dinar",
|
||||||
|
"EGP": "Egyptian Pound",
|
||||||
|
"ERN": "Eritrean Nakfa",
|
||||||
|
"ETB": "Ethiopian Birr",
|
||||||
|
"EUR": "Euro",
|
||||||
|
"FJD": "Fijian Dollar",
|
||||||
|
"FKP": "Falkland Islands Pound",
|
||||||
|
"GBP": "British Pound Sterling",
|
||||||
|
"GEL": "Georgian Lari",
|
||||||
|
"GGP": "Guernsey Pound",
|
||||||
|
"GHS": "Ghanaian Cedi",
|
||||||
|
"GIP": "Gibraltar Pound",
|
||||||
|
"GMD": "Gambian Dalasi",
|
||||||
|
"GNF": "Guinean Franc",
|
||||||
|
"GTQ": "Guatemalan Quetzal",
|
||||||
|
"GYD": "Guyanaese Dollar",
|
||||||
|
"HKD": "Hong Kong Dollar",
|
||||||
|
"HNL": "Honduran Lempira",
|
||||||
|
"HRK": "Croatian Kuna",
|
||||||
|
"HTG": "Haitian Gourde",
|
||||||
|
"HUF": "Hungarian Forint",
|
||||||
|
"IDR": "Indonesian Rupiah",
|
||||||
|
"ILS": "Israeli New Sheqel",
|
||||||
|
"IMP": "Manx pound",
|
||||||
|
"INR": "Indian Rupee",
|
||||||
|
"IQD": "Iraqi Dinar",
|
||||||
|
"IRR": "Iranian Rial",
|
||||||
|
"ISK": "Icelandic Króna",
|
||||||
|
"JEP": "Jersey Pound",
|
||||||
|
"JMD": "Jamaican Dollar",
|
||||||
|
"JOD": "Jordanian Dinar",
|
||||||
|
"JPY": "Japanese Yen",
|
||||||
|
"KES": "Kenyan Shilling",
|
||||||
|
"KGS": "Kyrgystani Som",
|
||||||
|
"KHR": "Cambodian Riel",
|
||||||
|
"KMF": "Comorian Franc",
|
||||||
|
"KPW": "North Korean Won",
|
||||||
|
"KRW": "South Korean Won",
|
||||||
|
"KWD": "Kuwaiti Dinar",
|
||||||
|
"KYD": "Cayman Islands Dollar",
|
||||||
|
"KZT": "Kazakhstani Tenge",
|
||||||
|
"LAK": "Laotian Kip",
|
||||||
|
"LBP": "Lebanese Pound",
|
||||||
|
"LKR": "Sri Lankan Rupee",
|
||||||
|
"LRD": "Liberian Dollar",
|
||||||
|
"LSL": "Lesotho Loti",
|
||||||
|
"LYD": "Libyan Dinar",
|
||||||
|
"MAD": "Moroccan Dirham",
|
||||||
|
"MDL": "Moldovan Leu",
|
||||||
|
"MGA": "Malagasy Ariary",
|
||||||
|
"MKD": "Macedonian Denar",
|
||||||
|
"MMK": "Myanma Kyat",
|
||||||
|
"MNT": "Mongolian Tugrik",
|
||||||
|
"MOP": "Macanese Pataca",
|
||||||
|
"MRO": "Mauritanian Ouguiya (pre-2018)",
|
||||||
|
"MRU": "Mauritanian Ouguiya",
|
||||||
|
"MUR": "Mauritian Rupee",
|
||||||
|
"MVR": "Maldivian Rufiyaa",
|
||||||
|
"MWK": "Malawian Kwacha",
|
||||||
|
"MXN": "Mexican Peso",
|
||||||
|
"MYR": "Malaysian Ringgit",
|
||||||
|
"MZN": "Mozambican Metical",
|
||||||
|
"NAD": "Namibian Dollar",
|
||||||
|
"NGN": "Nigerian Naira",
|
||||||
|
"NIO": "Nicaraguan Córdoba",
|
||||||
|
"NOK": "Norwegian Krone",
|
||||||
|
"NPR": "Nepalese Rupee",
|
||||||
|
"NZD": "New Zealand Dollar",
|
||||||
|
"OMR": "Omani Rial",
|
||||||
|
"PAB": "Panamanian Balboa",
|
||||||
|
"PEN": "Peruvian Nuevo Sol",
|
||||||
|
"PGK": "Papua New Guinean Kina",
|
||||||
|
"PHP": "Philippine Peso",
|
||||||
|
"PKR": "Pakistani Rupee",
|
||||||
|
"PLN": "Polish Zloty",
|
||||||
|
"PYG": "Paraguayan Guarani",
|
||||||
|
"QAR": "Qatari Rial",
|
||||||
|
"RON": "Romanian Leu",
|
||||||
|
"RSD": "Serbian Dinar",
|
||||||
|
"RUB": "Russian Ruble",
|
||||||
|
"RWF": "Rwandan Franc",
|
||||||
|
"SAR": "Saudi Riyal",
|
||||||
|
"SBD": "Solomon Islands Dollar",
|
||||||
|
"SCR": "Seychellois Rupee",
|
||||||
|
"SDG": "Sudanese Pound",
|
||||||
|
"SEK": "Swedish Krona",
|
||||||
|
"SGD": "Singapore Dollar",
|
||||||
|
"SHP": "Saint Helena Pound",
|
||||||
|
"SLL": "Sierra Leonean Leone",
|
||||||
|
"SOS": "Somali Shilling",
|
||||||
|
"SRD": "Surinamese Dollar",
|
||||||
|
"SSP": "South Sudanese Pound",
|
||||||
|
"STD": "São Tomé and Príncipe Dobra (pre-2018)",
|
||||||
|
"STN": "São Tomé and Príncipe Dobra",
|
||||||
|
"SVC": "Salvadoran Colón",
|
||||||
|
"SYP": "Syrian Pound",
|
||||||
|
"SZL": "Swazi Lilangeni",
|
||||||
|
"THB": "Thai Baht",
|
||||||
|
"TJS": "Tajikistani Somoni",
|
||||||
|
"TMT": "Turkmenistani Manat",
|
||||||
|
"TND": "Tunisian Dinar",
|
||||||
|
"TOP": "Tongan Pa'anga",
|
||||||
|
"TRY": "Turkish Lira",
|
||||||
|
"TTD": "Trinidad and Tobago Dollar",
|
||||||
|
"TWD": "New Taiwan Dollar",
|
||||||
|
"TZS": "Tanzanian Shilling",
|
||||||
|
"UAH": "Ukrainian Hryvnia",
|
||||||
|
"UGX": "Ugandan Shilling",
|
||||||
|
"USD": "United States Dollar",
|
||||||
|
"UYU": "Uruguayan Peso",
|
||||||
|
"UZS": "Uzbekistan Som",
|
||||||
|
"VEF": "Venezuelan Bolívar Fuerte",
|
||||||
|
"VND": "Vietnamese Dong",
|
||||||
|
"VUV": "Vanuatu Vatu",
|
||||||
|
"WST": "Samoan Tala",
|
||||||
|
"XAF": "CFA Franc BEAC",
|
||||||
|
"XAG": "Silver Ounce",
|
||||||
|
"XAU": "Gold Ounce",
|
||||||
|
"XCD": "East Caribbean Dollar",
|
||||||
|
"XDR": "Special Drawing Rights",
|
||||||
|
"XOF": "CFA Franc BCEAO",
|
||||||
|
"XPD": "Palladium Ounce",
|
||||||
|
"XPF": "CFP Franc",
|
||||||
|
"XPT": "Platinum Ounce",
|
||||||
|
"YER": "Yemeni Rial",
|
||||||
|
"ZAR": "South African Rand",
|
||||||
|
"ZMW": "Zambian Kwacha",
|
||||||
|
"ZWL": "Zimbabwean Dollar"
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial data for exchange rates
|
||||||
|
var exchangeRates = {
|
||||||
|
"disclaimer": "Usage subject to terms: https://openexchangerates.org/terms",
|
||||||
|
"license": "https://openexchangerates.org/license",
|
||||||
|
"timestamp": 1534107604,
|
||||||
|
"base": "USD",
|
||||||
|
"rates": {
|
||||||
|
"BTC": 0.000157753542,
|
||||||
|
"CAD": 1.316853,
|
||||||
|
"EUR": 0.879353,
|
||||||
|
"JPY": 110.46550427,
|
||||||
|
"USD": 1,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
Create a jQuery ready listener that updates the options within the <select> element with ID toCurrency such that:
|
||||||
|
The first <option> element is: <option value="" disabled selected>Select currency</option>
|
||||||
|
Only the currencies listed in the rates property of the exchangeRates object should appear in the dropdown
|
||||||
|
The <option> element for each currency should show the full currency name followed by the currency's abbreviation in parentheses
|
||||||
|
Ex: Canadian Dollar (CAN)
|
||||||
|
The value for each <option> element should be the currency abbreviation
|
||||||
|
The allCurrencies object in the provided JavaScript template provides a mapping from all possible abbreviations to full currency name
|
||||||
|
Create a jQuery change listener for the select dropdown that:
|
||||||
|
Converts the user-entered US dollars to the selected currency using the rates listed in the exchangeRates object. Display the converted currency with two decimal digits.
|
||||||
|
Ex: If the user-entered US dollars is 100.00, Canadian Dollar (CAN) is elected, and the exchange rate is "CAD": 1.316853, the resulting converted currency is 131.69
|
||||||
|
Displays the resulting converted currency by updating the readonly <input> element with ID resultCurrency
|
||||||
|
Updates the associated label for the resultCurrency <input> element to the selected currency's full currency name, currency abbreviation in parentheses, and colon
|
||||||
|
Ex: Canadian Dollar (CAN):
|
||||||
|
Create a jQuery click listener for the Update Rates button that:
|
||||||
|
Updates the exchangeRates object using the JSON string provided in the <textarea> element with ID exchangeRates
|
||||||
|
Updates the select dropdown such that only the currencies listed in the rates property of the updated exchangeRates object appear in the dropdown
|
||||||
|
Resets the readonly <input> element with ID resultCurrency to display "To Currency ():"
|
||||||
|
Resets the associated label for the resultCurrency <input> element to display "---.--"
|
||||||
|
*/
|
||||||
|
/* Your solution goes here */
|
||||||
|
|
||||||
|
function myChangeListener(){
|
||||||
|
//Take user dollars, multiply them by the exchange rate, display at the end
|
||||||
|
let $userDollars = $("#usdInput").val();
|
||||||
|
let $userConversion = $("#toCurrency").val();
|
||||||
|
let rate = exchangeRates.rates[$userConversion];
|
||||||
|
let total = rate * $userDollars;
|
||||||
|
console.log(total.toFixed(2));
|
||||||
|
$("#resultCurrency").val(total.toFixed(2));
|
||||||
|
$("#resultLabel").text(allCurrencies[$userConversion] + ' ' + $userConversion + ':');
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function currencyUpdateHandler(){
|
||||||
|
|
||||||
|
exchangeRates = JSON.parse($("#exchangeRates").val());
|
||||||
|
configureUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
function configureUI(){
|
||||||
|
let $toCurrency = $("#toCurrency");
|
||||||
|
let ratesKeys = Object.keys(exchangeRates.rates);
|
||||||
|
|
||||||
|
$toCurrency.empty();
|
||||||
|
$("#resultLabel").text("To Currency ():");
|
||||||
|
$("#resultCurrency").val("---.--");
|
||||||
|
|
||||||
|
//Set default
|
||||||
|
$toCurrency.append('<option value="" disabled selected>Select currency</option>');
|
||||||
|
|
||||||
|
//Add all rates from exchangeRates
|
||||||
|
for (let i = 0; i<ratesKeys.length; i++){
|
||||||
|
let fullName = allCurrencies[ratesKeys[i]];
|
||||||
|
let value = ratesKeys[i];
|
||||||
|
let fullText = '<option value="' + value + '">'+ fullName + ' (' + value + ')</option>';
|
||||||
|
|
||||||
|
$toCurrency.append(fullText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
// DOM is ready to go
|
||||||
|
// $("ol").prepend($newTag); // This adds stuff after the ol
|
||||||
|
// Aka, IN the ol
|
||||||
|
// Append would put it on the end
|
||||||
|
|
||||||
|
let $toCurrency = $("#toCurrency");
|
||||||
|
|
||||||
|
configureUI();
|
||||||
|
|
||||||
|
//Add change listener
|
||||||
|
$toCurrency.on('change', myChangeListener);
|
||||||
|
//Add update listener
|
||||||
|
$("#updateRates").on("click", currencyUpdateHandler);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
4
html-java-script/week12/jquery-3.2.1.min.js
vendored
Normal file
4
html-java-script/week12/jquery-3.2.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
55
html-java-script/week12/style.css
Normal file
55
html-java-script/week12/style.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
body {
|
||||||
|
font: 12pt Arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.card {
|
||||||
|
display: block;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
box-shadow: 0px 2px 2px #dddddd, 0px 0px 5px #dddddd;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 400px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.card * {
|
||||||
|
margin: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.card h2 {
|
||||||
|
color: #efefef;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #058;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text], select, textarea {
|
||||||
|
width: 95%;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 200px;
|
||||||
|
background-color: #069;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #036;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user