Add new image and correct code example (mdn#25072)

files/en-us/learn/javascript/first_steps/what_is_javascript/index.md

@@ -51,10 +51,10 @@ p {
   letter-spacing: 1px;
   text-transform: uppercase;
   text-align: center;
-  border: 2px solid rgba(0, 0, 200, 0.6);
-  background: rgba(0, 0, 200, 0.3);
-  color: rgba(0, 0, 200, 0.6);
-  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
+  border: 2px solid rgb(0 0 200 / 0.6);
+  background: rgb(0 0 200 / 0.6);
+  color: rgb(255 255 255 / 1);
+  box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
   border-radius: 10px;
   padding: 3px 10px;
   display: inline-block;
@@ -67,12 +67,12 @@ p {
 And finally, we can add some JavaScript to implement dynamic behavior:
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
 
 function updateName() {
-  const name = prompt('Enter a new name');
+  const name = prompt("Enter a new name");
   para.textContent = `Player 1: ${name}`;
 }
 ```
@@ -150,12 +150,12 @@ This means that you need to be careful what order you put things in.
 For example, let's return to the block of JavaScript we saw in our first example:
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
 
 function updateName() {
-  const name = prompt('Enter a new name');
+  const name = prompt("Enter a new name");
   para.textContent = `Player 1: ${name}`;
 }
 ```
@@ -223,17 +223,17 @@ Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets
 4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
 
    ```js
-   document.addEventListener('DOMContentLoaded', () => {
+   document.addEventListener("DOMContentLoaded", () => {
      function createParagraph() {
-       const para = document.createElement('p');
-       para.textContent = 'You clicked the button!';
+       const para = document.createElement("p");
+       para.textContent = "You clicked the button!";
        document.body.appendChild(para);
      }
 
-     const buttons = document.querySelectorAll('button');
+     const buttons = document.querySelectorAll("button");
 
      for (const button of buttons) {
-       button.addEventListener('click', createParagraph);
+       button.addEventListener("click", createParagraph);
      }
    });
    ```
@@ -262,15 +262,15 @@ This works great, but what if we wanted to put our JavaScript in an external fil
 
    ```js
    function createParagraph() {
-     const para = document.createElement('p');
-     para.textContent = 'You clicked the button!';
+     const para = document.createElement("p");
+     para.textContent = "You clicked the button!";
      document.body.appendChild(para);
    }
 
-   const buttons = document.querySelectorAll('button');
+   const buttons = document.querySelectorAll("button");
 
    for (const button of buttons) {
-     button.addEventListener('click', createParagraph);
+     button.addEventListener("click", createParagraph);
    }
    ```
 
@@ -288,8 +288,8 @@ It might look something like this:
 
 ```js example-bad
 function createParagraph() {
-  const para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
+  const para = document.createElement("p");
+  para.textContent = "You clicked the button!";
   document.body.appendChild(para);
 }
 ```
@@ -314,10 +314,10 @@ You can then loop through the buttons, assigning a handler for each using `addEv
 The code for this is shown below:
 
 ```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (const button of buttons) {
-  button.addEventListener('click', createParagraph);
+  button.addEventListener("click", createParagraph);
 }
 ```
 
@@ -340,7 +340,7 @@ This could cause an error, so we've used some constructs to get around it.
 In the internal example, you can see this structure around the code:
 
 ```js
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   // …
 });
 ```
@@ -447,8 +447,8 @@ So for example, we could annotate our last demo's JavaScript with comments like
 // Function: creates a new paragraph and appends it to the bottom of the HTML body.
 
 function createParagraph() {
-  const para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
+  const para = document.createElement("p");
+  para.textContent = "You clicked the button!";
   document.body.appendChild(para);
 }
 
@@ -459,10 +459,10 @@ function createParagraph() {
   When any button is pressed, the createParagraph() function will be run.
 */
 
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (const button of buttons) {
-  button.addEventListener('click', createParagraph);
+  button.addEventListener("click", createParagraph);
 }
 ```