Initial commit.

66af6260 · Brady James Garvin · 66af6260 · 66af6260 · 66af6260 · 66af6260
Commit 66af6260 authored 1 year ago by Brady James Garvin
--- a/.gitattributes
+++ b/.gitattributes
+# Disable line-ending conversions for this repository.
+* -text
--- a/.gitignore
+++ b/.gitignore
+# misc
+*~
+.DS_Store
--- a/example.css
+++ b/example.css
+:root {
+  --currency: rgba(0 127 0 / 100%);
+}
+body {
+  text-align: center;
+  font: bold 1.5em sans-serif;
+}
+label, output {
+  display: block;
+}
+.field {
+  margin: 0.5em;
+}
+.total {
+  margin: 1em;
+  color: var(--currency);
+}
--- a/example.html
+++ b/example.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Order Pizza and Beverages</title>
+    <link href="./example.css" rel="stylesheet">
+  </head>
+  <body>
+    <label class="field">
+      <span id="pizza-caption"></span>&nbsp;
+      <input id="pizza-slider" type="range" min="0" value="1" max="4">
+    </label>
+    <label class="field">
+      <span id="beverage-caption"></span>&nbsp;
+      <input id="beverage-slider" type="range" min="0" value="1" max="6">
+    </label>
+    <output id="output" class="total">Your total is <span id="total"></span>.</output>
+    <script src="./example.js"></script>
+  </body>
+</html>
--- a/example.js
+++ b/example.js
+// Prices in cents:
+const PIZZA_PRICE = 1499;
+const BEVERAGE_PRICE = 199;
+const pizzaSlider = document.querySelector('#pizza-slider');
+const beverageSlider = document.querySelector('#beverage-slider');
+const output = document.querySelector('#output');
+const totalSpan = document.querySelector('#total');
+document.querySelector('#pizza-caption').textContent = 'How many pizzas?';
+document.querySelector('#beverage-caption').textContent = 'How many beverages?';
+pizzaSlider.value = '1';
+beverageSlider.value = '2';
+function updateTotal() {
+  const total = Number(pizzaSlider.value) * PIZZA_PRICE + Number(beverageSlider.value) * BEVERAGE_PRICE;
+  if (total === 0) {
+    output.style.visibility = 'hidden';
+  } else {
+    output.style.visibility = 'visible';
+  }
+  totalSpan.textContent = `${(total / 100).toFixed(2)}`;
+}
+updateTotal();
+pizzaSlider.addEventListener('input', updateTotal);
+beverageSlider.addEventListener('input', updateTotal);
--- a/minified/example.min.css
+++ b/minified/example.min.css
+body{text-align:center;font:bold 1.5em sans-serif}label,output{display:block}.field{margin:0.5em}.total{margin:1em;color:#070}
--- a/minified/example.min.html
+++ b/minified/example.min.html
+<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1"name="viewport"><title>Order Pizza and Beverages</title><link href="./example.min.css"rel="stylesheet"><label class="field"><span id="pizza-caption"></span>  <input id="pizza-slider"max="4"min="0"type="range"value="1"></label> <label class="field"><span id="beverage-caption"></span>  <input id="beverage-slider"max="6"min="0"type="range"value="1"></label><output class="total"id="output">Your total is <span id="total"></span>.</output><script src="./example.min.js"></script>
--- a/minified/example.min.js
+++ b/minified/example.min.js
+const d=document.querySelector.bind(document);const e=d("#pizza-slider"),t=d("#beverage-slider"),o=d("#output"),n=d("#total");d("#pizza-caption").textContent="How many pizzas?",d("#beverage-caption").textContent="How many beverages?",e.value="1",t.value="2";function updateTotal(){const u=1499*Number(e.value)+199*Number(t.value);o.style.visibility=0===u?"hidden":"visible",n.textContent=`${(u/100).toFixed(2)}`}updateTotal(),e.addEventListener("input",updateTotal),t.addEventListener("input",updateTotal);
--- a/no-framework.code-workspace
+++ b/no-framework.code-workspace
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"files.eol": "LF",
+		"files.exclude": {
+			"**/node_modules": true
+		},
+		"files.trimFinalNewlines": true,
+		"files.trimTrailingWhitespace": true
+	}
+}