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