Adding new live assignment (#20)

* Adding new exercise for finding the century that corresponds to a given date. * Correcting HTML to set correct month for March. * Adding model answer to Century exercise. * Making corrections in light of PR review. --------- Co-authored-by: atg103 <[email protected]>
CodeYourFuture · Dec 13, 2024 · 173f1d5 · 173f1d5
1 parent 577e20d
commit 173f1d5
Show file tree

Hide file tree

Showing 16 changed files with 3,855 additions and 0 deletions.
diff --git a/live-assignments/century-finder/.gitignore b/live-assignments/century-finder/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+
diff --git a/live-assignments/century-finder/answer/app/css/global.css b/live-assignments/century-finder/answer/app/css/global.css
@@ -0,0 +1,24 @@
+body {
+	font-family: 'Arial', 'Tahoma', 'sans-serif';
+}
+#form {
+	width: 420px;
+	text-align: left;
+	margin-bottom: 4px;
+}
+label {
+	display: inline;
+	width: 330px;
+	margin-bottom: 2px;
+}
+input {
+	width: 4em;
+}
+#output {
+	border: 1px solid #999;
+	display: block;
+	width: 408px;
+	height: 25px;
+	padding: 4px;
+	font-size: 11pt;
+}
diff --git a/live-assignments/century-finder/answer/app/index.html b/live-assignments/century-finder/answer/app/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en_GB">
+<head>
+<link rel="stylesheet" type="text/css" href="/css/global.css" />
+<script type="text/javascript" src="/js/century.js"></script>
+<script type="text/javascript" src="/js/app.js"></script>
+<script type="text/javascript">
+window.addEventListener("load", function() {
+	new App();
+});
+</script>
+</head>
+<body>
+<div id="form">
+	<label>Enter a date: </label>
+	<input type="text" id="dayField" placeholder="day" />
+	<select type="menu" id="monthField">
+		<option value="00">January</option>
+		<option value="01">February</option>
+		<option value="02">March</option>
+		<option value="03">April</option>
+		<option value="04">May</option>
+		<option value="05">June</option>
+		<option value="06">July</option>
+		<option value="07">August</option>
+		<option value="08">September</option>
+		<option value="09">October</option>
+		<option value="10">November</option>
+		<option value="11">December</option>
+	</select>
+	<input type="text" id="yearField" placeholder="year" />
+	<button id="submit">Find Century</button>
+</div>
+<section id="output"></section>
+</body>
+</html>
diff --git a/live-assignments/century-finder/answer/app/js/app.js b/live-assignments/century-finder/answer/app/js/app.js
@@ -0,0 +1,34 @@
+class App { 
+
+	constructor() {
+		this.centuryFinder = new CenturyFinder();
+
+		var submitControl = document.querySelector('#submit');
+		var self = this;
+		submitControl.onclick = function() { self.findAndPrintCentury(); };
+
+		console.info("Application initialised.");
+	}
+
+	setOutput(text) {
+		document.querySelector("#output").innerText = text;
+	}
+
+	findAndPrintCentury() {
+		let inputYear = Number(document.getElementById("yearField").value);
+		let inputMonth = document.getElementById("monthField").value;
+		let inputDay = Number(document.getElementById("dayField").value);
+		if (isNaN(inputYear) || isNaN(inputMonth) || isNaN(inputDay)) {
+			this.setOutput("Please enter a valid date.");
+		}
+		else {
+			let date = new Date();
+			date.setFullYear(inputYear);
+			date.setMonth(inputMonth);
+			date.setDate(inputDay);
+			let century = this.centuryFinder.findCenturyOf(date);
+			this.setOutput("The date " + date.toLocaleDateString() + " is in the " + century + " century.");
+		}
+	}
+
+}
diff --git a/live-assignments/century-finder/answer/app/js/century.js b/live-assignments/century-finder/answer/app/js/century.js
@@ -0,0 +1,31 @@
+class CenturyFinder {
+
+	constructor(){
+	}
+
+	formatOrdinal(centuryNumber) {
+		if (centuryNumber >= 11 && centuryNumber <= 13) {
+			return centuryNumber + "th";
+		}
+		switch (centuryNumber % 10) {
+			case 1:
+				return centuryNumber + "st";
+			case 2:
+				return centuryNumber + "nd";
+			case 3:
+				return centuryNumber + "rd";
+			default:
+				return centuryNumber + "th";
+		}
+	}
+
+	findCenturyOf(date) {
+		return this.formatOrdinal(Math.floor((date.getFullYear() - 1) / 100) + 1);
+	}
+
+}
+
+if (module) {
+	// this exists in the Node/Jest environment but not in the browser.
+	module.exports = CenturyFinder;
+}