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
- How to think inside the browser…
- External scripts: <script src=”myScript.js”></script>
- Inserting HTML content: document.querySelector(“#demo”).innerHTML = “Paragraph changed.”; or “+=”
- Style property – manipulating CSS with JS: document.getElementById(id).style.property = new style
- CSS animation and JS – add/remove classes
- setTimeout / setInterval / Circles Script
- window scroll: scrollTo(x, y), element.scrollTop
- Graphic elements – progress bar, scroll indicator, range slider, flip card, svg drawing,
- reload page: location.href = “https://www.mypage.com”;
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
- Video and Audio elements
- Audio/Video DOM reference : video.currentTime, audio.currentTime
- fullscreen video, responsive videos
- karaoke timestamps
const lyrics = [ { time: 0, text: "First line of the song" }, { time: 5, text: "Second line of the song" } ]; - Examples:
video-pair
video-timer
video-menu
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:
- 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.
- Sketch your idea. Get a visualization of how things are going to work. Storyboard what happens and when
- 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!
- 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.
- 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.
- 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.