WEEK 5: Audio/Video API
(February 3 & 5)

To Do This Week:

Keep working in Codecademy (Part #2):

Interactive Website (10%)

DUE: February 9

Using ChatGPT as a coding assistant, create a dynamic website that allows for user interaction, resulting in changes on the webpage without altering the URL.

Requirements:

  • Add a commented statement to your source code that lists the sequential steps in natural language (English!) before the code is written.
  • Use JavaScript terms in your step descriptions.
  • Statements should be at the top of the page’s source code, using HTML comments <!--...-->.

Class:

Overview

Random Numbers:

Generate a random number in a range:

// Random generator
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(5, 10);

Audio/Video & JavaScript:

Important notes:

Examples:


Workshop:

Interactive Website (10%)

DUE: February 9

This assignment combines JavaScript basics, including syntax, variables, conditionals, arrays, functions, and loops.

Requirements:

  • Create a dynamic website with user interaction.
  • Include clear, commented steps in your source code using HTML comments.
  • Optionally, use ChatGPT for assistance and summarize its contributions in your comments.

Steps:

  1. Conceptualize: Think of a website idea where user interaction is central.
  2. Sketch: Storyboard the website’s functionality.
  3. Describe Design: Use ChatGPT to outline the website’s layout and features.
  4. Detail Interactivity: Describe the JavaScript steps needed for interactions.
  5. Script: Implement the steps iteratively with ChatGPT’s assistance as needed.
  6. Submit: Validate your HTML/CSS, upload your project to your server, and submit the URL on Canvas.

Suggested Ideas:

  • Interactive Quiz
  • Dynamic Media Gallery
  • To-Do List
  • Customizable Timer
  • Generative Art Work
  • Branching Narrative

Codecademy #2:

DUE: February 9

Learn JavaScript: Complete the following modules:

  • Arrays
  • Loops
  • Iterators
  • Objects

Submission: Upload a screenshot of your progress to Canvas. Ensure the browser address bar is visible.

 

 

 

 

 

 

To Do This Week:

Keep working in Codecademy part #2 Learn Javascript :
DUE FEB  Feb 9

Interactive Website: 10%
DUE: Feb 9
Using ChatGPT as an code assistant, create a dynamic website that allows for user interaction, resulting in changes on the webpage without altering the URL. You must add a commented statement to your source code that lists the sequential steps in natural language (English!) before the code is written. Use JavasScript terms in your step descriptions. Statements should be at the top of the page’s source code, so use HTML comments <!–…–> 


Class

Overview

random numbers

function to get random number range

// random generator
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(5,10);

AUDIO/VIDEO & JavaScript

Chrome – must interact with page (click something) before video or audio can play


Workshop:

Work on the Interactive Website: 10%

Starting prompt: “Make an HTML5 ,CSS and JavaScript site with 20 different sized divs. Make each div have a random background color and a random width and height between 5px and 400px. Use positioning to randomly place the divs around the page. Add a setInterval every two seconds to run the function that distributes, resizes and changes color of the divs.”
Random Collage

Interactive Website: 10%
DUE Friday Feb 9th

This assignment is designed to bring together your understanding of basic syntax, variables, conditionals, arrays, functions, and loops in JavaScript. The key objective is to create a dynamic website that allows for user interaction, resulting in changes on the webpage without altering the URL. It should have an effective visual design and thoughtful interaction design, but this is not intended to be a big project requiring extensive CSS design work. 

Statement:

You must add a commented statement to your source code that lists the sequential steps in natural language (English!) before the code is written. Use JavasScript terms in your step descriptions. Statements should be at the top of the page’s source code, so use HTML comments <!–…–> 

ChatGPT Assist:

You may use ChatGPT to help with this project (but it is not required!). Get it to produce HTML for you as that is time consuming. Use ChatGPT in any way that is useful to you as a student of programming. Ask it questions. Get it to help with working out the steps. Get it to help you write each step of the code.  If you use ChatGPT you must summarize how you used it in your source code project statement.

YOUR STEPS:

  1. Conceptualize an Interactive Website: Think of an idea for a website where user interaction is central. It could be a simple game, a to-do list, a dynamic form, a quiz, or anything that involves user input leading to visible changes on the page.
  2. Sketch your idea. Get a visualization of how things are going to work. Storyboard what happens and when
  3. Describe Your Site Design to ChatGPT: With your website idea in mind, describe it to ChatGPT in detail, including:
    • The layout and design of the website.
    • Any unique features or media elements (like images, audio, animations) you want to include.
    • ChatGPT will assist you in generating the HTML and CSS code for your website quickly.
    • You will apply your own beautiful CSS design at the end!
  4. Detail the Interactivity and JavaScript Steps:
    • Describe the interactive elements of your website. What happens when a user interacts with various elements?
    • Outline the JavaScript steps required to make these interactions work, using programming concepts. Try to describe these steps in natural language, incorporating programming terms as best as you can.
  5. Scripting with ChatGPT’s Assistance:
    • With the steps outlined, attempt to script each one. ChatGPT can provide hints or fill in gaps along the way, correct your scripts, and ensure you’re using programming concepts appropriately.
    • The goal is for you to think through the scripting process, enhancing your ability to conceptualize and implement JavaScript code.
    • Read the generated scripts and comments closely. Get to understand the logic of JavaScript.
  6. Submit Site for Grading:
    • Validate your site HTML/CSS
    • Upload to your server directory in a folder called “interactive”
    • Submit url to canvas

SUGGESTED IDEAS FOR YOUR WEBSITE

  • Interactive Quiz: A simple quiz where users answer questions, and get immediate feedback.
  • Dynamic Media Gallery: A gallery where users can filter or sort images, sounds and/or videos – based on categories.
  • To-Do List: A task manager where users can add, mark, and delete tasks.
  • Customizable Timer: A timer where users can set and start a countdown for various activities.
  • A Generative Art Work: Produce change on the page with random numbers and interactivity
  • A Digital Art Work: Create dynamic displays of image, text, sound and/or video
  • Branching Narrative: Design a simple interactive story, like on Twine

Javascript Codecademy #2 (due February 9)
Learn JavaScript: 
Complete the following modules: Arrays, Loops, Iterators, Objects

For submission on Canvas: Screen Grab and Upload what you have completed from the above modules. Include in the screen grab, the browser address bar.