DTC 477: Advanced Web Design & Development

Week 8: Electronic Literature + Intro to AI

To Do This Week:

Assignments:

Upcoming Assignments

Module Notes

Important:

Introducing AI: JS Mentor

This week marks a turning point in the course. For the first half of the semester you built real programming fluency by hand — logic first, syntax by hand, no shortcuts. Now that you can read, direct, and evaluate code, we begin introducing AI as a tutor and collaborator, not a vending machine for answers.

JS Mentor is a Custom GPT built for this class. Think of it as your personal JavaScript tutor. It deliberately makes you build in natural language first, then works out the syntax for each step with you — the same logic-steps-first process we've practiced all semester.

How to get the most out of it

  1. Describe your idea. Explain what you want to build or solve — plain English is fine. JS Mentor helps you turn it into code.
  2. Break it down. It asks you to think through the logic: what happens first? then what? You write these logic steps in your own words before touching code.
  3. Code one step at a time. Once the logic is clear, you write one JavaScript statement at a time. JS Mentor gives hints, corrections, or the next step if you get stuck.
  4. Ask for help. Stuck? Say so. Ask for a hint, a mini quiz, or a code example when you need one.
  5. Learn by doing. Mistakes are the point. The more you engage and experiment, the more confident you'll get.

The rule for this class: AI supports your understanding — it does not replace it. You must be able to explain every line in your project. Always document your AI use by including the chat URL(s) in your comments.

Review

This project brings together everything so far — arrays, functions, loops, conditionals — and points it at text. Review as needed:

Electronic Literature

What is it?

Electronic literature (e-lit) is writing that depends on the computer — work that couldn't exist on paper because the code is part of the poem. A script selects, combines, transforms, or rearranges language; randomness and process produce text that shifts each time it runs or as the reader interacts.

These same techniques have plain practical uses — shuffling data, building forms, assembling shopping carts, generating Q&A. But this week you'll wield them as a computational language poet: making things happen in the text of the page — words, sentences, letters — in an artful, intentional way.

Examples of generative literature

Student E-Lit

Influences & Traditions

Reading the work in one of these lineages will sharpen your concept:

Code Guidelines for Taper

More Taper Projects

Manipulating Text

Key JavaScript string methods:

Array Methods

Pick a Random Item from an Array

The engine of most generative text — choose one item at random:

const words = ["glass", "river", "signal", "ash"];

function pick(arr) {
  const i = Math.floor(Math.random() * arr.length);
  return arr[i];
}

console.log(pick(words)); // a different word each run

Regex (Regular Expressions)

Useful for reshaping source text into arrays. Common find/replace tasks:

// Break a line after a period
Find: \.
Replace with: \.\n

// Add a quote at the start of lines
Find: ^
Replace with: "

// Add a quote and comma at the end of lines
Find: $
Replace with: ",

// Remove all line breaks
Find: \n\s+
Replace with: (nothing)

Try it with Sample Text.

Shuffle an Array (No Repeats)

The simplest reliable way to shuffle an array so every item appears exactly once (no repeats) is the Fisher–Yates shuffle.

Shuffle the array in place

function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));

    let temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
}

let words = ["apple", "banana", "cherry", "date"];
shuffleArray(words);

console.log(words);

Draw items one-by-one (still no repeats)

After shuffling, use pop() to pull a new item each time until the array is empty. 

shuffleArray(words);

let nextWord = words.pop(); // removes and returns one item
console.log(nextWord);

JavaScript Animation (for text in motion)

Two ways to animate — useful if your piece moves, fades, or cycles words.

// get the box element
let box = document.getElementById("box");

// starting position
let position = 0;

// run the function every 50 milliseconds
setInterval(moveBox, 50);

// function to move the box
function moveBox() {
  position += 2;                // move 2px each tick
  box.style.top = position + "px";
}

JavaScript / CSS Animation Reference

https://javascript.info/css-animations

/* CSS: define the box and the animation class */

#box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
  top: 0;
  left: 100px;
  transition: transform 0.5s;
}

/* this class triggers the movement */
.moveDown {
  transform: translateY(200px);
}

// JavaScript: add or remove the class

let box = document.getElementById("box");

// add the class (moves the box down)
function moveDown() {
  box.classList.add("moveDown");
}

// remove the class (moves the box back up)
function moveUp() {
  box.classList.remove("moveDown");
}

<!-- Example HTML buttons to trigger animation -->

<button onclick="moveDown()">Move Down</button>
<button onclick="moveUp()">Move Up</button>

<div id="box"></div>

Objects and Object Literals

Objects store related properties (and methods) together — handy for bundling a fragment with its data (speaker, mood, weight).

JSON (JavaScript Object Notation) is a format for storing and exchanging data. It looks similar to a JavaScript object and behaves in a comparable way.

Simple Object Literal

// JavaScript Object Literal Example
const person = {
    firstName: "Margie",
    lastName: "Pepper",
    age: 50,
    eyeColor: "brown",
};

console.log(`Hi, ${person.firstName}`);

Object Literal with "this"

// JavaScript Object Literal Example
const person = {
    firstName: "Henry",
    lastName: "Smith",
    age: 24,
    eyeColor: "green",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(`Hi, ${person.fullName()}`);

Learn more about JSON and objects:

Electronic Literature: 10% DUE: Week 9 — 10/21 

Create a work of electronic literature that uses JavaScript to select, combine, transform, or rearrange letters, words, sentences, or passages. CSS should contribute meaningfully to the reading experience.

The piece should have a clear concept. It should feel like an intentional work of writing and design rather than only a technical demonstration. Possible influences include Oulipo, generative poetry, recombinant narrative, concrete poetry, and early net art.

Possible Approaches

Minimum Requirements

Development Steps

  1. Idea generation
  2. Conceptual breakdown
  3. Consult JS Mentor to see if your idea is possible
  4. Work out logic steps with JS Mentor
  5. JavaScript implementation, one step at a time
  6. Testing and refinement
  7. Styling with CSS
  8. Write the project statement
  9. Final submission (Slack + Canvas + GitHub)

The Project Statement

A short paragraph at the top of your page (or in a comment) naming your concept: what the piece does, the rule or process behind it, and what you want the reader to feel or notice. This is what turns a demo into a work.