Skip to content

Instantly share code, notes, and snippets.

@zgulde
Last active November 16, 2023 21:03
Show Gist options
  • Select an option

  • Save zgulde/1add14ed11d6349a326b1e10c1b1ac4a to your computer and use it in GitHub Desktop.

Select an option

Save zgulde/1add14ed11d6349a326b1e10c1b1ac4a to your computer and use it in GitHub Desktop.

Extra Javascript Exercises

DOM manipulation and for loops

  1. Use Javascript to create a <ul> with 5 <li>s whose content are the numbers 1 through 5.

    Open up your console to verify that the html your script rendered looks like this:

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  2. Change your code to output the even numbers between 10 and 20.

    <ul>
        <li>10</li>
        <li>12</li>
        <li>14</li>
        <li>16</li>
        <li>18</li>
        <li>20</li>
    </ul>

Dom manipulation and user interaction

Given the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Extra JS Exercises</title>
</head>
<body>

<div class="container">

    <h1>Hello, <span id="name"></span></h1>

    <p class="small">This text should be small</p>
    <p class="large">This text should be large</p>
    <p class="small">This text should be small</p>
    <p class="large">This text should be large</p>
    <p class="small">This text should be small</p>
    <p class="large">This text should be large</p>
    <p class="small">This text should be small</p>
    <p class="large">This text should be large</p>
    <p class="small">This text should be small</p>
    <p class="large">This text should be large</p>

</div>
<script>
// do your work here, or create and link up an exertenal js file
</script>
</body>
</html>

Use JavaScript to do the following:

  1. Add a padding of 30px to the div with the class of container
  2. Use a confirm to ask the user if they would like to make some of the paragraphs smaller. If they confirm, change the font size of all the paragraphs with the small class to be 8px
  3. Use an alert to tell the user that you are going to make some paragraphs larger, then change the font size of all the paragraphs with the large class to be 18px
  4. Use a prompt to ask the user for their name and change the h1 to say hello to them

Functions, Arrays, and Objects

Create a function that will take a name that is a string as a parameter and will return an object with firstname and lastname properties that correspond to the the first and last name in the string

Example

function convertNameToObject(nameString){
    // TODO: use .split to convert the array to a string and create an object
    //       out of the two items in the array, then return the object
}

console.log(convertNameToObject('Harry Potter'));
/* 
should output an object
{
    firstName: 'Harry',
    lastName:  'Potter'
}
*/

console.log(convertNameToObject('Ron Weasley'));
/* 
should output an object
{
    firstName: 'Ron',
    lastName:  'Weasley'
}
*/

Arrays

Given the following code:

var myArray = [1, 2, 3, 4, 5];
  1. What is the element at index 0?

  2. What is the index of the element 3?

  3. What is the length of the array i.e. how many elements are in the array?

  4. What is the index of the last element in the array? How does this number relate to the length of the array?

  5. Write a for loop that console logs each element in the array. Refactor your code to use a foreach loop. How are they different?

Consider the following:

var myArray = [2, 3, 4];
myArray.pop();
myArray.unshift(1);
console.log(myArray);
  1. What will the code output?

  2. What is the length of myArray?

  3. What will myArray.indexOf(2) return?

  4. What will myArray.indexOf('2') return?

  5. Using split and join to complete the following:

var myPhoneNumber = '210.867.5309';
// TODO: convert myPhoneNumber to an array that contains the area code, the
// first three digits and the last four numbers in the phone number

// TODO: convert the array back to a string the contains the phone number with
// the groups of numbers separated by dashes

// console log throughout to check your work

Objects

Given the following code:

var codeupClassroom = {
    
    classroom: 'big',
    temp:      'too cold',

    changeClassroom: function(){
        this.classroom = 'small';
        this.temp      = 'too hot';
    },

    consoleLogThis: function(){
        console.log(this);
    },

    describeClassroom: function(beVerbose){
        var msg = '';

        if (beVerbose) {
            msg += 'The classroom is the ' + this.classroom + ' classroom.\n';
            msg += 'The temperature in here is ' + this.temp + '.';
        } else {
            msg += 'classroom: ' + this.classroom + '\n';
            msg += 'temp: ' + this.temp;
        }

        console.log(msg);
    }
}

What would you expect the following code snippets to output?

codeupClassroom.consoleLogThis();
codeupClassroom.describeClassroom(true);
codeupClassroom.changeClassroom();
codeupClassroom.describeClassroom(false);

Functions

The following code blocks are syntactically correct, but will not produce the desired output. What can you change to fix them?

function sayHello() {
  console.log('Hello, ' + name + '!');
}

sayHello("Zach");

// desired output: "Hello, Zach!"
function multiply(firstNumber, secondNumber){
  var result = firstNumber * secondNumber;
}

var answer = multiply(4, 6);

console.log(answer);

// desired output: 24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment