WEEK 6: E-Lit Project (February 10 & 12) – DTC 477: Advanced Web Design & Development

To Do This Week:

JavaScript Codecademy #2 (DUE February 19)

If you have not already done so, complete the remaining modules in the tutorial:

Arrays
Loops
Iterators
Objects

Screen grab your completed modules and upload them to Canvas. Ensure the browser address bar is visible in the screenshot.

Module Notes

Important:

Submit your projects to Canvas and verify the submission is a working URL!
Include a commented-out statement with the logic steps in JavaScript terms (as best you can). Use a list format for easier reading.
For the next projects in this class, add your own comments in your script, along wth ChatGOT comments explaining what is happening at each step. Study these comments to understand the logic in the syntax.
When using ChatGPT, specify that you want to use ES6 syntax, and maybe subtract ternary functions and arrow functions (if you want).

Review:

Statements
Variables
Data Types
Operators (basic and “shortcut” operators)
Comparison Operators
Arrays
Adding JavaScript to a Page (internal and external methods)
JavaScript Comments
Objects, Methods, and Properties
Functions
For Loops, While Loops
Conditional Statements
Scope

Generative Literature:

What is Generative Language Art?

Generative language art is a type of electronic literature (e-lit) where a computer script or algorithm dynamically generates poems, stories, or other text-based works. These works often incorporate randomness or evolving digital processes to create unique and engaging outputs.

JavaScript and Poetic Text:

Examples of generative literature:

Taroko Gorge by Nick Montfort
Taroko Script (with comments)
Taper: An online literary magazine for small computational pieces

Student E-Lit

Code Guidelines for Taper:

All code (HTML, CSS, JavaScript) must fit within 2KB (2048 bytes).
Use a Minifier to compress code or Unminify for readability.

More Taper Projects

Manipulating Text:

Key JavaScript methods for text manipulation:

charAt(): Get a character at a specific position in a string
slice(): Extract a part of a string
toUpperCase() / toLowerCase(): Change case
replace() / replaceAll(): Replace text
split(): Convert a string into an array

Array Methods:

pop(): Remove the last element
push(): Add a new element
shift(): Remove the first element
splice(): Add/remove elements
slice(): Create a subarray
sort() / reverse(): Sort or reverse elements

Regex (Regular Expressions):

Examples of common 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.

JavaScript Objects:

Learn about Objects and JSON.

Tutorial: JavaScript Object Basics

E-Lit Project (5%):
DUE Wednesday, February 26

This project involves creating an electronic literature (e-lit) piece, a digital form of poetry, language art or narrative that uses JavaScript to dynamically manipulate text. To ensure a structured and effective approach to your project, follow these guidelines, using ChatGPT as a tool throughout the process:

Your Steps:

Idea Generation: Begin by brainstorming ideas for your e-lit piece, focusing on how you can manipulate text in a digital narrative or poetic form.
Conceptual Breakdown: Once you have an idea, break it down into a sequence of specific, actionable steps. This involves detailing how user interactions will alter the text or narrative flow.
Consult with ChatGPT: Share your project steps with ChatGPT to refine the sequence and ensure it aligns with JavaScript’s capabilities. Adjust your plan based on the feedback.
Script Planning: Identify the JavaScript concepts needed to execute each step (e.g., arrays for storing text segments, functions for changing text based on interaction). Note these alongside your steps.
Coding with JavaScript: Start implementing your JavaScript code, making sure the HTML structure is in place first. Use ChatGPT to assist with specific tasks or to clarify JavaScript functions.
Testing and Refinement: Test your script extensively, checking for bugs and ensuring the intended functionality works smoothly. Use the browser’s Console to identify and fix errors.
Styling with CSS: Apply CSS styling to enhance the visual design of your piece. The focus here is on complementing the textual interaction, not overshadowing it.
Include a Statement: In the source code, comment the list of your steps and describe briefly how you used ChatGPT.
Final Submission: Validate your HTML and CSS, upload your project to the server, and submit the URL in Canvas.

Suggested Ideas for Your E-lit Piece:

Interactive Poetry: Allow users to input or interact with words/sentences, which are then visually and textually transformed on the page in creative ways.
Generative Language Art: Create a poem or work of language art that changes based on user choices, inputs or through autoplay.
Recombinant Narrative: Develop a narrative that evolves and changes through different combinations of elements.
Text-Based Puzzle: Design a puzzle or game where users solve challenges through text manipulation or interpretation.

Project Prompting

Describe in 5-10 lines the basic sequential steps for your E-Lit Project. Use natural language to outline the programming logic (not the design).

Example:

Display a random sentence from a text array
Make each separate word in the sentence hoverable
On hover, the word animates a list of other possible words
When not hovering, a new word replaces the original word
When a new sentence is completed, play a sound

Now try to figure out how Javascript might complete each step the way you want. How would you display a random sentence from an array? Or make each word hoverable? Think about it and then check you answers for each step with ChatGPT. You can either describe in natural language or try to code it.

You will eventually translate such step into functioning JavaScript and refine the working project with additional arrays items, media, and design elements.

Follow the structured process outlined above to create your electronic literature project. Use ChatGPT to assist with brainstorming, refining, and implementing your ideas. Remember to include a commented statement at the top of your source code outlining your steps.

Student Example:

Compile a series of Shel Silverstein poems into arrays, along with arrays for random nouns, verbs, adjectives, the like
Display these random combinations of sentences in a newly randomly generated poem when a button is pressed
On hover on certain highlighted/uniquely colored or displayed words/on button press/on click, cycle through a bunch of words with some sort of animation such as slot machine style
When not hovering/when clicked again, the cycling stops
After the poem is successfully generated, have the option to generate a new one in a random location on the page that is not occupied
If a poem overlaps with a previous one, it should have a higher place on the hierarchy, meaning it covers up the old one, ensuring you can always generate something new

JavaScript Animation

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

setInterval(() => {
position += 2; // move 2px per tick
box.style.top = position + "px";
}, 50);

JavaScript/CSS Animation
js/css animations

#box {
position: absolute;
width: 50px;
height: 50px;
background: red;
animation: moveDown 2s linear infinite;
}

@keyframes moveDown {
from {
transform: translateY(0);
}
to {
transform: translateY(200px);
}
}

Use the JavaScript version if you need to dynamically change the speed, stop the animation based on user actions, or generally have fine-grained control in code.
Use the CSS version if you only need a basic (but smooth) “fire-and-forget” animation. It’s less code to write and is typically optimized by the browser.