I'm confused by how the code is the solution. Can someone please explain? (hopefully in an easy to understand way.)

[ayandagatsha]

Could someone tell me why the code below :

const list = document.querySelector('.output ul');
list.innerHTML = '';
let greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

for (let i = 0; i < greetings.length; i++) {
  let input = greetings[i];
  if (greetings[i].indexOf('Christmas') !== -1) {
    let result = input;
    let listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
}

Is the solution to the exercise below:

In the first exercise we’ll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the if( ... ) structure, to test each string and only print it in the list if it is a Christmas message.

1. First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
2. You’ll then need to write a conditional test of the form operand1 operator operand2 . Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?
3. Hint: In this case it is probably more useful to test whether the method call isn’t equal to a certain result.

The live output is supposed to be:

Live output

• Merry Christmas my love
• A happy Christmas to all the family
• You’re all I want for Christmas

Yet I can’t even get that on my devtools console.

Its the first exercise in the “Active learning examples” section in the link below.

Useful string methods

[KittyKora]

Do you have a link to the challenge?

[ayandagatsha]

Its the first exercise in the “Active learning examples” section in the link below.

Useful string methods

[KittyKora]

So this lessons is about strings
So what is a string?
A string is actually a collection of 0 and 1 located into a space in or computers. If u know a bit of C then u know that the string is actually a lie . But don’t worry we can still use string by using the location of the letter where we can use the coordinate of the letter to allocate.
Anyway for convenience JS has made this in a string data type one of the 6 data types of JS.

Now on to the 1st part

Strings as objects

This part of the explanation tells u that strings are object and what can be done with them
properties the property of a thing if i have a glass one of the property’s can be a handle
methods i can pick the glass up then the method i used is pick up
##Finding the length of a string
Basicly tells u that
with using the

length

we can count how many characthers there are in a string

##Retrieving a specific string character
This part talks about square bracket notation
so example
h e l l o
0 1 2 3 4
if we use a square bracket [0]

it will return since its the zeroth characther of or string

browserType[browserType.length-1];

The .lenght counts the string
the -1 is the 0

Finding a substring inside a string and extracting it
This is talking if we have a string inside a string
if u did follow the HTML course you might recall it from a nested element
but in this case we use indexOf() which takes a single parameter:
A parameter is a named variable passed into a function.

If the substring is not found inside the main string, it returns a value of -1.

slice() just like with a cake they slize a piece of that cake
for example

  var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  var citrus = fruits.slice(1, 3);

would get u: Orange,Lemon

the 1 would get the orange =>
the 3 would get u lemon <=

Changing case
toLowerCase() = lower
toUpperCase() = LOWER

Updating parts of a string
replace() this works on a substring
so if u have the word mozilla and u enter it like:
‘moz’,‘van’
it would be vanilla
The correct syntax:
browserType = browserType.replace(‘moz’,‘van’);

Now covered all of that we can understand how the code works

const list = document.querySelector('.output ul');
//so we start of with a varible named list only we did not use the var we used const for more about const:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
Then we set it to = document.querySelector('.output ul');
the document is the type  
The  `querySelector()`  method of the [ `Element` ](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
and then we finish off with where we need it to go

list.innerHTML = '';
//this tells us that its a list type
//inerHTML is where it goes in this case the iside of html
//the "" is an empty string

let greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];

//this is an array that stores the text for it just like var a =1; the one would the value of a since we connected them
//here comes a for loop
for 

 (let i = 0; //here we set i equal to 0 because, zero indexing

 i < greetings.length; //this is to get the lenght ot the greetings like we did before remeber this:
hello
0 1 2 3
the lenght give the full lenght of it

 i++
increament the 0 by 1 each time
so 1 2 3 4

) {
  let input = greetings[i];
//another variable/let let is pretty much the same only the scope is different
//here we get the array greetings where it loops over each element
  // Your conditional test needs to go inside the parentheses
  // in the line below, replacing what's currently there

  if  //if block
(greetings[i]) {
//conditions which is set to activate or if block
    let listItem = 
//another variable name
document.createElement('li');
//this creates a list item on the document 
    listItem.textContent = input;
// The  `textContent`  property of the [ `Node` ](https://developer.mozilla.org/en-US/docs/Web/API/Node) interface represents the text content of the node and its descendants.
    list.appendChild(listItem);
//this combines the list and append is to the child element of list item
  }
}

And there u go
hope it helps out

[ayandagatsha]

Still not getting how the code is the solution and why the list isnt output on my console

[lasjorg]

It’s not logging to the console it’s updateing the DOM. You have to run the code on a webpage that the script can manipulate.

What about the solution do you not understand?

[KittyKora]

What part do you not understand?

[ayandagatsha]

Its cool, someone else already Direct Messaged me explaining whats what. I was looking for the type of explaination one would give to a 5 year old to make them understand and be able to do it themselves, as technical jargon can sometimes leave me confused and frustrated, especially if the curriculum hasnt covered it yet.

[ayandagatsha]

Its cool, someone else already Direct Messaged me explaining whats what. I was looking for the type of explaination one would give to a 5 year old to make them understand and be able to do it themselves, as technical jargon can sometimes leave me confused and frustrated, especially if the curriculum hasnt covered it yet. .