COSC203 Web, Databases, and Networks
Toggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage

Hugo Sandbox

Playground

JavaScript

This is a test to see if the playground works with HTML, CSS, and JavaScript.

HTML 
 CSS

 JavaScript

Result

CSS classes

This example is taken from Lab 5, 2022.
 HTML

 CSS

 JavaScript

Result

Flex Box

This example is taken from Lab 6, 2022.
 HTML

 CSS

 JavaScript

Result

Advanced Flex Box

This example is taken from Lab 6, 2022.
 HTML

 CSS

 JavaScript

Result

CSS Grid

This example is taken from Lab 6, 2022.
 HTML

 CSS

 JavaScript

Result

  • Lab 6
    • DOM API
      • tree structure
      • window, document
      • HTMLElement interface
        • children() …
    • DOM manipulation
    • array methods (fill, forEach, map, filter, findIndexOf, some, every)
    • parse form input
    • add form data to DOM
  • Lab 7
    • fetch data
    • JSON
  • Lab more
    • ES6 modules
    • Cookies
    • WebStorage and IndexedDB
    • form validation
    • leafleft.js
    • transition
7. More ?

Comments

<!-- this is a comment in HTML -->

View page source

Web Console

Open the Web Console in your web browser, usually it’s F12.
alert("hello world!");

Congratulate yourself on running your first piece of JavaScript code
Poly



📝 Task 1: no taskName
Inspect the page and learn about element tags.
  • view the HTML of this
  • find the opening <head> and closing <head>
    • everything between those 2 tags is the “element”
  • find the opening <body> and the closing </body>
  • find the following 10 element tags,
    1. <input>
    2. <label>
    3. <img>
    4. <a>
    5. <section>
    6. <article>
    7. <h1>
    8. <h2>
    9. <h3>

  • in the HTML element reference
✅ Easier Search for Tags
Use ⌘+F (or Ctrl+F) to search for tags in source code.
Only search for the token <h1, i.e. exclude the >
DOM Tree Structure

Document Object Model (DOM)

flowchart TD  
    html{{"html"}} --- head & l(["lang=“en”"]) & body 
    head{{"head"}} --- meta{{"meta"}} & title
    meta --- c(["charset=“UTF-8”"])
    title{{"title"}} --- text1["page title"]
    body{{"body"}} --- h1 & p
    h1{{"h1"}} --- text2["Hellow World! 😃"]
    p{{"p"}} --- text3["polly the penguin."]
    style c fill:#f79,stroke:#333,stroke-width:2px
    style l fill:#f79,stroke:#333,stroke-width:2px
    style html fill:#4186c988,stroke-width:2px,stroke:#333
    style head fill:#4186c988,stroke-width:2px,stroke:#333
    style meta fill:#4186c988,stroke-width:2px,stroke:#333
    style title fill:#4186c988,stroke-width:2px,stroke:#333
    style body fill:#4186c988,stroke-width:2px,stroke:#333
    style h1 fill:#4186c988,stroke-width:2px,stroke:#333
    style p fill:#4186c988,stroke-width:2px,stroke:#333
    style text1 fill:#0000,stroke:#333,stroke-width:1px
    style text2 fill:#0000,stroke:#333,stroke-width:1px
    style text3 fill:#0000,stroke:#333,stroke-width:1px

  • Hugo generates HTML documents from the Markdown files in /content.
  • Page routing matches the directory structure in /content.
  • The navigation menu links are populated from data/menu/main.yml
Extended Markdown

  • Along with MarkDown, Hugo can also embed raw HTML, JavaScript, and “shortcodes snippets”.
    • This page is a sandbox to test/showcase these features.
  • This Hugo project uses the Geekdocs theme with several shortcodes built in
  • To write your own short
Removing this page

  • To delete this sandbox page
    • delete: /content/hugo-sandbox.md
  • To hide this page
    • edit: /data/menu/more.yml
Basic Markdown



Typing text as **bold** or _italics_ looks like bold and italics.
Lists

  • write bullet lists
  • with hypen
    • sublist with indenting
  1. Numeric lists
  2. with number and period 1.
  •  Todo lists
  •  with hypen and square brackets
    • nest lists
    • with white space


Internal

External



inline code(); with `back ticks`. Or entire blocks of code with triple ``` backticks ```.
from universe import antigravity

print("Hello World")


Embed Gist



![OUCS Mascot](/img/oucs-mascot.png)
OUCS Mascot


<p>hello<b>worldb>p>
<img src="https://www.otago.ac.nz/_assets/_gfx/logo.png"/>`

Hello world! This is an image:
Timetable shortcodes

Labwork shortcodes

🎯 Lab Objective
This is an objective
✅ Tip
This is a “tip”
📝 Task 2: no taskName
This task contains a KaTeX shortcode
\( f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
\)
📝 Task 3: no taskName
The tasks also self-enumerate!