Introduction

This exercise helps you understand how to combine different JavaScript keywords to get things done on a web page.

👤 By hand

Working with your team on a whiteboard or in CodePen, write a JavaScript function that uses your bundle of keywords to accomplish the specified task. You may find it useful to add some HTML, eg a <div> or <button> with an onclick to trigger your function.

CHANGING SINGLE HTML ELEMENTS

/*  Move a div 300 pixels across the screen
	when the user clicks a button. */
	
window
document
querySelector()
style
translate()

CHANGING MANY HTML ELEMENTS

/*	Check which divs on a page have the content "To do: ",
	and add "Done!" to the end of each. */
	
querySelectorAll()
forEach()
if {} else {}
===
innerHTML
+=

LISTENERS

/*	Create three buttons, each of which triggers a different alert:
	1. The first alert shows a random number.
	2. The second alert shows the HTML inside the
	button the user clicks on (without hard-coding it);
	3. The third alert shows a counter variable that
	increases by one every time you click it. */
	
onclick
Math.random()
this
let
++
/*

ARRAY

/*	Create an array of female videogame characters,
	eg ["Pac-man", "Lara Croft", "Zelda"] and add a new character to it.
	Then copy that to a new array with the same names
	but "Ms. " in front, eg,
	["Ms. Pac-man", "Ms. Lara Croft", "Ms. Zelda"] */
	
. ("dot")
push()
map()
() =>
` (backtick)

🤖 With AI

💡 The sample prompts follow the  role  output  level  context template.

1. Ask ChatGPT or a similar code generator to write sample code using the same keywords, using a prompt like this:

   📌Acting as an expert in making web development concepts clear to beginning coders, write the simplest possible script that includes the following JavaScript keywords and methods. You may add any HTML or CSS necessary to provide context, but those tags and styles should be the absolute minimum to demonstrate the use of these terms. For example, you may omit meta and title tags from the head of your document.

   Your goal is not to produce a robust web page, but to generate the most simplistic code with helpful comments to teach beginning programmers a few basic JavaScript concepts. Please wait for me to paste in the appropriate terms before you comply with these instructions. Understand?

   🗣 Did it choose the same example as you? What did AI add that you didn't or vice versa?

1. Now ask the chatbot to generate similar code, but with the same task you chose, using a prompt like this:

   📌 Now write a script with the same constraints but with the specific task of ________________.

   🗣 This time did the AI generate code that was closer to yours?