We Keep Coding

I have managed to find a way to get text of my slides by using each but how do I get it to display my can products not text?

I have found a way to display text on each of my empty slides. so far, so good. But at you can see in my codepen project, there's a can displaying on the first slide. Instead of the text 'Hello' on each of my slides, how do I display a loop of cans on each slide?
https://codepen.io/Rosstopherrr/pen/GVRvxJ
I had it like this thinking it will show all cans in each slide but it doesn't show any cans...
$('#products article').each(function() {
$(this).append(initApp())
});
what am I doing wrong?
$('#products article').each(function() {
$(this).append('hello')
});
EDIT - progress so far
so in the each.function(index) - I can add the index, and then in initApp(index) - I can add index. and then in the initApp function I can adjust so that bottle[index] gets selected and then added.
But nothing seems to work?? What am I doing wrong?
I know there is a bunch of ways I can do this.
Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??

in initApp() you define const $container = getElement('.container'); getElement function calls document.querySelector(selector); that returns just the first element that matches the selector, in this case the first div with class .container in the first article tag. That's the first error.
In order to add a bottle to each container you need a list of .containers, that you can obtain with $containers = [...document.querySelectorAll('.container')]
once you have all .container you can integrate the forEach function call, maybe in this way
[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
$bottle.classList.add('bottle' + i);
$containers[i].append($bottle)
});
it's possible that you will still not find the bottles like in the first item; that's because the single .bottle1, .bottle2, .bottle3 etc have wrong letf and top css properties; in addition, the .side divs miss the background-image property.

Alerting .position() method not working as it should be

I've got an animation of the earth rotating around the sun. The sun stays put, but the earth keeps changing position.
I want to alert a message saying "Aligned!" or something when the earth is perfectly vertically aligned with the sun. I've been testing it out but I can't get the alert message any time other than when the page has loaded and the conditial statement corresponds to the position of the earth when the page has loaded, before the earth even gets close to aligning.
The below code will only show the position of the earth as its position is above 400. So if I say like, alert message when positionplanet.left == positionsun.left, I will get nothing.
var possun = $( "#Sun" );
var positionsun = possun.position();
var posplanet = $( "#Earth" );
var positionplanet = posplanet.position();
if (positionplanet.left >= 400)
{
alert(positionplanet.left + " and " + positionplanet.top);
}
I have a JSfiddle for the animation but for some reason I'm having trouble alerting anything at all other than just random strings. So I'll link it but it'll mainly be for reference. Demo:

I haven't checked your maths so I can't prove this definitely, but it seems like the positions never match exactly - which isn't too surprising as we're dealing with irrational numbers of pixels rounded to 10-15 decimals.
If you allow the positions to match to the nearest pixel, though, you can make it work (and no-one should be any the wiser). Also, you need to do the check for every step of the animation, instead of in the global scope like in your JSFiddle (no wonder you only get the alert when you reload the page. :) )
Putting this inside your animate() function did the trick:
var positionsun = $("#Sun").position();
var positionplanet = $("#Earth").position();
if(Math.round(positionplanet.left) == Math.round(positionsun.left))
alert("aligned!");
Also, make sure you're including jQuery if using jQuery functions (like $(...)).

Switch HTML content of div with another piece of HTML without fading out to white first using jQuery

I'm looking for a way to fade from one piece of HTML in a div to another piece of HTML without fading out to white (to the background color of the div) first like i'm doing in this example:
The positionNumber variable is just an int with the number (e.g. 3).
function changeContent(positionNumber) {
$('.banner-content-wrapper').fadeOut('fast', function() {
var contentHtml = $('.slidercontent#' + positionNumber).html();
$('.banner-content-wrapper').hide().fadeIn(1000).html(contentHtml);
});
}
This example does the exact same by fading to white first but this is not what I'm lookig for:
Why doesn't jquery fadeIn() work with .html()?
I want to fade directly from one piece of HTML to another. I haven't been able to find any example on Stack Overflow that shows how to do exact that. I know this is not valid code but it's something like this I'm looking for:
$('.banner-content-wrapper').fadeToHtml(contentHtml);
How can I fade directly?

why use fadeOut/fadeIn - why not hide/show
function changeContent(positionNumber) {
$('.banner-content-wrapper').hide('fast', function() {
var contentHtml = $('.slidercontent#' + positionNumber).html();
$('.banner-content-wrapper').hide().html(contentHtml).show();
});
}
I have not tested this - just a suggestion based on the example you referenced

I don't think you should use fade. Try to use Replace.
http://api.jquery.com/replacewith/

increment number displayed in a div after click

i am trying to create a rating system. The idea is on page load I would see how many stars each star has. And when I click on the a star it increases the width of the bar. Here is what I am doing. The problems so far are 1: the bars are not displaying correctly 2: the numbers of stars are not incremental correctly. The idea is to update the bar after a new click. Here is the fiddle. I have few other questions associated with this. I will do a new post once I solve this one
http://jsfiddle.net/sghoush1/VU3LP/37/
the Jquery looks like this
$(function(){
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
var curr_val = $('.reading').html();
var new_val = parseInt(curr_val)+1;
if(curr_val< 20){
$('.barActive').css('height', '20px').css('width', '20px');
}
if(curr_val< 40){
$('.barActive').css('height', '20px').css('width', '40px');
}
$('.star').click(function(){
$('.reading').eq($(this).index('.star')).html(new_val);
$(this).addClass('active');
$('.bar').eq($(this).index('.star')).addClass('barActive');
});
});

As far as problem #2 goes: you need to read curr_val and compute new_val inside the click response function. As it is, you read the first one and use that for all star bars.
As far as problem #1 goes: I have no answer; you say that the bars don't display correctly, but you don't say what behavior you want. However, I suspect that this problem will also go away if you move the css assignments into the click function as well (using new_val instead of curr_val for the bar). You would still need to initialize each bar using its specific value and index.

Displaying and highlighting a particular line in HTML

I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.

You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.

There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.