html

hillsj4 · Oct 3, 2019 · 584543cf3b73cf40d3c1ef73fa716dad35892bb0 · 584543c
1 parent 9498d77
commit 584543cf3b73cf40d3c1ef73fa716dad35892bb0
Show file tree

Hide file tree

Showing 19 changed files with 195 additions and 56 deletions.
diff --git a/exercises/03_html/01_syntax/coventry.html b/exercises/03_html/01_syntax/coventry.html
diff --git a/exercises/03_html/01_syntax/package.json b/exercises/03_html/01_syntax/package.json
@@ -11,6 +11,6 @@
   "dependencies": {
     "koa": "^2.6.2",
     "koa-router": "^7.4.0",
-    "koa-views": "^6.1.5"
+    "koa-views": "^6.2.1"
   }
 }
diff --git a/exercises/03_html/02_lists/computers80.html b/exercises/03_html/02_lists/computers80.html
@@ -22,6 +22,14 @@ <h2>Clever uses</h2>
         <h2>Legendary computers</h2>
         <p>The best known computer of the eighties was Commodore 64, but there are other computers that gained popularity.</p>
 
+        <p>Some reasons often mentioned were:</p>
+
+        <ol>
+          <li>learning to write computer programs</li>
+          <li>managing family finances</li>
+          <li>keeping track of freezer contents</li>
+        </ol>
+
         <p>Read the <a href="http://en.wikipedia.org/wiki/Retrocomputing">Wikipedia article for Retrocomputing</a>.</p>
 
         <h2>Key concepts</h2>
@@ -31,6 +39,38 @@ <h2>Key concepts</h2>
             <source src="assets/tune.mp3" type="audio/mp3"> Your browser does not support the audio element.
         </audio>
 
+        <p>There are two types of memory:</p>
+
+        <dl>
+          <dt>RAM</dt>
+          <dd>Random access memory. The memory usable by programs. The amount was
+          typically in the ballpark of 20 to 64 kilobytes. However, the Basic
+          interpreter by default consumed a part of this.</dd>
+
+          <dt>ROM</dt>
+          <dd>Read-only memory. This was normally smaller in size than RAM and
+          roughly corresponded to the hardware implementation of the operating
+          system.</dd>
+        </dl>
+
+        <h2>Uses of modern computers</h2>
+        <p>Computers have many modern uses. Some of the most important are:</p>
+        <ol>
+            <li>Medical equipment</li>
+            <li>Government</li>
+            <li>Business tools</li>
+            <li>Education</li>
+        </ol>
+
+        <h2>ZX80 computer components</h2>
+        <dl>
+            <dt>CPU (central processing unit)</dt>
+            <dd>The CPU performs arithmetic and logic operations on data and controls I/O operations.</dd>
+            <dt>RAM</dt>
+            <dd>The ZX80 had only 1 KB of RAM, which was used to hold programs and data that were being used or recently used.</dd>
+            <dt>ROM</dt>
+            <dd>Read-only memory held the operating system. It is read-only as it shouldn't be changed.</dd>
+        </dl>
     </article>
 </body>
 

diff --git a/exercises/03_html/02_lists/package.json b/exercises/03_html/02_lists/package.json
@@ -12,6 +12,6 @@
     "koa": "^2.6.2",
     "koa-router": "^7.4.0",
     "koa-static": "^5.0.0",
-    "koa-views": "^6.1.5"
+    "koa-views": "^6.2.1"
   }
 }
diff --git a/exercises/03_html/03_hypermedia/index.js b/exercises/03_html/03_hypermedia/index.js
@@ -13,6 +13,8 @@ app.use(views(`${__dirname}/views`, { extension: 'html' }, {map: { handlebars: '
 router.get('/', async ctx => await ctx.render('index'))
 router.get('/commodore', async ctx => ctx.render('commodore64'))
 router.get('/paradoxes', async ctx => ctx.render('paradoxes'))
+router.get('/cathedral', async ctx => ctx.render('cathedral'))
+router.get('/spectrum', async ctx => ctx.render('spectrum'))
 
 router.get('/date', async ctx => {
 	const today = new Date()
@@ -22,5 +24,14 @@ router.get('/date', async ctx => {
 	ctx.body = `<h1>The date is: ${dd}/${mm}/${yyyy}`
 })
 
+router.get('/time', async ctx => {
+	const today = new Date()
+	const hh = today.getHours()
+	const mm = today.getMinutes()
+	ctx.body = `<h1>The time is ${hh}:${mm}`
+
+
+})
+
 app.use(router.routes())
 module.exports = app.listen(port, () => console.log(`listening on port ${port}`))
diff --git a/exercises/03_html/03_hypermedia/package.json b/exercises/03_html/03_hypermedia/package.json
@@ -12,6 +12,6 @@
     "koa": "^2.6.2",
     "koa-router": "^7.4.0",
     "koa-static": "^5.0.0",
-    "koa-views": "^6.1.5"
+    "koa-views": "^6.2.1"
   }
 }
diff --git a/...s/03_html/03_hypermedia/public/guitar.mp3 → ...tml/03_hypermedia/public/audio/guitar.mp3 b/...s/03_html/03_hypermedia/public/guitar.mp3 → ...tml/03_hypermedia/public/audio/guitar.mp3
diff --git a/...s/03_html/03_hypermedia/public/guitar.ogg → ...tml/03_hypermedia/public/audio/guitar.ogg b/...s/03_html/03_hypermedia/public/guitar.ogg → ...tml/03_hypermedia/public/audio/guitar.ogg
diff --git a/exercises/03_html/03_hypermedia/public/coventry.mp5 b/exercises/03_html/03_hypermedia/public/coventry.mp5
diff --git a/exercises/03_html/03_hypermedia/public/images/BBC_Micro_Front_Restored.jpg b/exercises/03_html/03_hypermedia/public/images/BBC_Micro_Front_Restored.jpg
diff --git a/exercises/03_html/03_hypermedia/public/images/C64-left.jpg b/exercises/03_html/03_hypermedia/public/images/C64-left.jpg
diff --git a/exercises/03_html/03_hypermedia/public/images/ZXSpectrum48k.jpg b/exercises/03_html/03_hypermedia/public/images/ZXSpectrum48k.jpg
diff --git a/exercises/03_html/03_hypermedia/public/images/comp.jpg b/exercises/03_html/03_hypermedia/public/images/comp.jpg
diff --git a/...03_html/03_hypermedia/public/coventry.ogv → ...l/03_hypermedia/public/video/coventry.ogv b/...03_html/03_hypermedia/public/coventry.ogv → ...l/03_hypermedia/public/video/coventry.ogv
diff --git a/exercises/03_html/03_hypermedia/views/commodore64.html b/exercises/03_html/03_hypermedia/views/commodore64.html
@@ -4,6 +4,14 @@
         <title> </title>
     </head>
     <body>
-
+        <figure>
+            <img src="images/C64-left.jpg" alt="Commodore 64" style="width:320px"/>
+            <figcaption>Commoder 64. Photo: <a href="http://oldcomputers.net/c64.html">http://oldcomputers.net/c64.html.</a></figcaption>
+        </figure>
+        <p>Read the <a href="http://en.wikipedia.org/wiki/Retrocomputing">Wikipedia article for Retrocomputing</a>.</p>
+
     </body>
+    <foot>
+        <a href="/">Back</a>
+    </foot>
 </html>
diff --git a/exercises/03_html/03_hypermedia/views/index.html b/exercises/03_html/03_hypermedia/views/index.html
@@ -8,9 +8,36 @@
 		<meta name="author" content="Mark Tyers">
 	</head>
 	<body>
-    <h1>Retro Computers</h1>
+
+	<h1>Retro Computers</h1>
+	<figure>
+			<img src="images/comp.jpg" alt="Apple Macintosh 512K" style="width:320px"/>
+			<figcaption>Apple Macintosh 512K. Photo: <a href="https://www.pcgamer.com/personal-computers-1980s/">https://www.pcgamer.com/personal-computers-1980s/.</a></figcaption>
+	</figure>
     <ol>
-      <li>Commodore 64</li>
-    </ol>
+	  <li><a href="/commodore">Commodore 64</a>.</li>
+	  <li><a href="/spectrum">ZX Spectrum</a>.</li>
+	</ol>
+
+	<figure>
+		<figcaption>Listen to the guitar:</figcaption>
+		<audio autoplay controls>
+			<source src="/audio/guitar.mp3" type="audio/mpeg">
+			<source src="/audio/guitar.ogg" type="audio/ogg">
+			Your browser does not support the audio element.
+		</audio>
+	</figure>
+
+	<figure>
+		<figcaption>Watch the Coventry video:</figcaption>
+		<video width="320" controls autoplay>
+			<source src="/video/coventry.mp4" type="audio/mpeg">
+			<source src="/video/coventry.ogg" type="audio/ogg">
+			Your browser does not support the video element.
+		</video>
+	</figure>
+
+	<iframe width="560" height="315" src="https://www.youtube.com/embed/I9dHI6EwWTU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<object width="560" height="315" data="https://www.youtube.com/embed/I9dHI6EwWTU"></object>
 	</body>
 </html>
diff --git a/exercises/03_html/03_hypermedia/views/spectrum.html b/exercises/03_html/03_hypermedia/views/spectrum.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Sinclair ZX Spectrum</title>
+    </head>
+    <body>
+        <h1>Sinclair ZX Spectrum</h1>
+        <figure>
+                <img src="images/ZXSpectrum48k.jpg" alt="ZX Spectrum" style="width:320px"/>
+                <figcaption>ZX Spectrum. Photo: <a href="https://en.wikipedia.org/wiki/ZX_Spectrum">https://en.wikipedia.org/wiki/ZX_Spectrum.</a></figcaption>
+        </figure>
+        <h2>History</h2>
+        <p>The ZX Spectrum is an 8-bit personal home computer released in the United Kingdom in 1982 by Sinclair Research.</p>
+
+        <h2>Current status</h2>
+        <p>There's still a wide community of Specrum enthusiasts. There are numerous emulators, such as <a href="http://fuse-emulator.sourceforge.net">Fuse</a> and <a href="https://fms.komkon.org/Speccy/">Speecy</a>.</p>
+
+        <h2>Gaming device</h2>
+        <h3>Best games</h3>
+        <p>The ZX Spectrum was famous for its games. Some of the best include:</p>
+        <dl>
+            <dt>Jet Set Willy</dt>
+            <dd>contained 60 levels</dd>
+            <dt>The Hobbit</dt>
+            <dd>A text adventure game with some simple graphics</dd>
+        </dl>
+    </body>
+    <foot>
+        <a href="/">Back to Main page</a>
+    </foot>
+</html>
diff --git a/exercises/03_html/04_tables/comparison.html b/exercises/03_html/04_tables/comparison.html
@@ -17,6 +17,7 @@
                 <th>Commodore 64</th>
                 <th>ZX Spectrum</th>
                 <th>Commodore VIC-20</th>
+                <th>Spectravideo SV-38</th>
             </tr>
         </thead>
         <tbody>
@@ -25,18 +26,31 @@
                 <td>MOS Technology 6510</td>
                 <td>Zilog Z80</td>
                 <td>MOS Technology 6502</td>
+                <td>Zilog Z80A</td>
             </tr>
             <tr>
                 <td>RAM</td>
                 <td>64 kilobytes</td>
                 <td>16 or 64 kilobytes</td>
                 <td>5 kilobytes</td>
+                <td>64kB</td>
             </tr>
             <tr>
                 <td>ROM</td>
                 <td>20 kilobytes</td>
                 <td>16 kilobytes</td>
                 <td>16 kilobytes</td>
+                <td>32kB</td>
+            </tr>
+            <tr>
+                <td></td>
+                <td colspan="4" align="center">Main usage: home computing</td>
+            </tr>
+            <tr>
+                <td></td>
+                <td colspan="2" align="center">Jet Set Willy</td>
+                <td>Jelly Monsters</td>
+                <td>Armoured Assault</td>
             </tr>
         </tbody>
     </table>

diff --git a/exercises/03_html/04_tables/package.json b/exercises/03_html/04_tables/package.json
@@ -12,6 +12,6 @@
     "koa": "^2.6.2",
     "koa-router": "^7.4.0",
     "koa-static": "^5.0.0",
-    "koa-views": "^6.1.5"
+    "koa-views": "^6.2.1"
   }
 }