-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
885c14c
commit f833209
Showing
7 changed files
with
228 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Burger</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | ||
| <link href="../images/favicon.ico" rel="shortcut icon"/> | ||
| <script type="module"> | ||
| import * as Multiplication from "./modules/multiplication.js" | ||
| Multiplication.init() | ||
| </script> | ||
| <style> | ||
| body { | ||
| background: black; | ||
| font-family: 'Arial Unicode', Arial, sans-serif; | ||
| margin: 1rem; | ||
| } | ||
|
|
||
| h1, div, p { | ||
| color: white; | ||
| } | ||
| h1, p { | ||
| margin: 0 0 1rem 0; | ||
| } | ||
|
|
||
| p { | ||
| margin-top: 1rem; | ||
| } | ||
|
|
||
| h1, .tables .table { | ||
| font-size: 2rem; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .tables { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill,minmax(15em, 1fr)); | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| .tables .table { | ||
| padding: 1rem; | ||
| border: 0; | ||
| transition: border-color 0.5s; | ||
| border: 0.2rem solid transparent; | ||
| background: royalblue; | ||
| } | ||
|
|
||
| p a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .tables .table:hover { | ||
| border-color: white; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { getState, setState, getStateProperty, setStateProperty } from './state.js' | ||
| import { log } from '../../../modules/log.js' | ||
|
|
||
| const urlEncodedMultiplicationSign = '%26%23x00D7%3B' | ||
| const urlEncodedSpace = '+' | ||
| const urlEncodedNoBreakSpace = '%26%23xA0%3B' | ||
| const urlEncodedEqualsSign = '%26%23x003D%3B' | ||
| const urlEncodedEnDash = '%26%23x2013%3B' | ||
|
|
||
| const lineSeparator = '/' | ||
| const pageSeparator = '//' | ||
|
|
||
| function init () { | ||
| setStateFromURLParams () | ||
| const state = getState() | ||
| if (state.multiplicand) { | ||
| showTableBigAs(state.multiplicand, state.minMultiplier, state.maxMultiplier) | ||
| } else { | ||
| showListofTables() | ||
| } | ||
| } | ||
|
|
||
| function showListofTables () { | ||
| const state = getState() | ||
| let heading = document.createElement("h1") | ||
| let tables = document.createElement("div") | ||
| tables.classList.add('tables') | ||
| for (let multiplicand = state.minMultiplicand; multiplicand <= state.maxMultiplicand; multiplicand++) { | ||
| let table = document.createElement("div") | ||
| table.dataset.multiplicand = multiplicand | ||
| table.dataset.minMultiplier = state.minMultiplier | ||
| table.dataset.maxMultiplier = state.maxMultiplier | ||
| table.classList.add('table') | ||
| table.textContent = multiplicand + ' \u{00D7} ' + state.minMultiplier + ' \u{2026} ' + state.maxMultiplier | ||
| table.addEventListener('click', (event) => { | ||
| showTableBigAs (table.dataset.multiplicand, table.dataset.minMultiplier, table.dataset.maxMultiplier) | ||
| }) | ||
| tables.appendChild(table) | ||
| } | ||
| heading.textContent = state.appName | ||
| document.body.appendChild(heading) | ||
| document.body.appendChild(tables) | ||
| } | ||
|
|
||
| function showTableBigAs (multiplicand, minMultiplier, maxMultiplier) { | ||
| var problemText | ||
| var solutionText | ||
| var horizontalRule | ||
| var result | ||
| var queryString = 'background=royalblue&backBackground=darkgreen&textAlign=right&wordPerLineInPortrait=true&text=' | ||
| for (let multiplier = minMultiplier; multiplier <= maxMultiplier; multiplier++) { | ||
| problemText = multiplicand + urlEncodedSpace + urlEncodedMultiplicationSign + urlEncodedNoBreakSpace + multiplier | ||
| // Build a horizontal rule from en dashes | ||
| horizontalRule = urlEncodedEnDash.repeat(multiplicand.toString().length + 2) | ||
| result = multiplicand * multiplier | ||
| solutionText = problemText + '[p:' + lineSeparator + horizontalRule + '][l:+' + urlEncodedEqualsSign + ']+' + result | ||
| queryString += problemText + pageSeparator + solutionText | ||
| if (multiplier < maxMultiplier) { | ||
| queryString += pageSeparator | ||
| } | ||
| } | ||
| window.location.href = '../../?' + queryString | ||
| } | ||
|
|
||
| // Set state properties from parameters in the URL query string | ||
| function setStateFromURLParams () { | ||
| const urlParams = new URLSearchParams(window.location.search) | ||
| const state = getState() | ||
| const newState = {} | ||
| // Iterate over URL parameters | ||
| for (const [key, value] of urlParams) { | ||
| // If the URL parameter name matches a state property, set the state property | ||
| if (Object.hasOwn(state, key)) { | ||
| // Coerce the URL parameter value (string or null) to the correct type, based on the type of the existing state property | ||
| switch (typeof state[key]) { | ||
| case 'boolean': | ||
| // If the state property is a Boolean, then just the parameter name (without a value) means true | ||
| switch (value.toLowerCase()) { | ||
| case '': | ||
| case 'true': | ||
| newState[key] = true | ||
| break | ||
| case 'false': | ||
| newState[key] = false | ||
| break | ||
| default: | ||
| log.warn('Bad value ignored for URL query string parameter: ' + key + '=' + value + '. Value must be true or false.\nTip: Specifying ' + key + ' (the parameter name by itself, with no trailing equal sign or value) has the same effect as ' + key + '=true.') | ||
| } | ||
| break | ||
| case 'string': | ||
| case 'object': | ||
| newState[key] = value | ||
| break | ||
| case 'number': | ||
| newState[key] = Number(value) | ||
| break | ||
| } | ||
| } else { | ||
| log.warn('Unrecognized parameter in URL query string: ' + key) | ||
| } | ||
| } | ||
| setState(newState) | ||
| } | ||
|
|
||
| export { init } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| // Manage the state (application properties) | ||
|
|
||
| // Initialize the state | ||
| let state = { | ||
| appName: 'Multiplication tables', | ||
| multiplicand: null, | ||
| minMultiplicand: 1, | ||
| maxMultiplicand: 12, | ||
| minMultiplier: 1, | ||
| maxMultiplier: 12 | ||
| } | ||
|
|
||
| // Return the state object | ||
| function getState () { | ||
| return state | ||
| } | ||
|
|
||
| // Return the state property | ||
| function getStateProperty(key) { | ||
| return state[key] | ||
| } | ||
|
|
||
|
|
||
| // Update the state | ||
| function setState (newState) { | ||
| // Append properties of the new state to the old state, | ||
| // potentially overwriting existing properties of the old state | ||
| state = { ...state, ...newState } | ||
| return state | ||
| } | ||
|
|
||
| // Update the state property | ||
| function setStateProperty (key, value) { | ||
| state[key] = value | ||
| } | ||
|
|
||
|
|
||
| // Export the getState and setState functions | ||
| export { getState, setState, getStateProperty, setStateProperty } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters