A Little JavaScript Project: A Photo Slider

A Little JavaScript Project: A Photo Slider

The following are lessons posted on Facebook, using a W3Schools project:

4/27/20: A Little JavaScript Lesson: Scope is More than Mouthwash

When we used the code from the W3Schools slider, we noticed one odd thing: the dots for each photo were on the other side of the page. Looking at the code I realized it was a scope problem; the dots are not inside the slideshow-container div because it ends right after the Previous and Next links.

When we moved the </div> under the dots, they were under the photo space where they belonged. That is called scope.

When the dots were in the wrong place, they were outside the scope of the slideshow-container layer. Once they were within the scope of the slideshow-container, they were positioned correctly.

<div class=”slideshow-container”>

<!– Full-width images with number and caption text –>

<div class=”mySlides fade”>
<div class=”numbertext”>1 / 3</div>
<img src=”img1.jpg” style=”width:100%”>
<div class=”text”>Caption Text</div>
</div><!– end mySlides (1) –>

…

<!– Next and previous buttons –>
<a class=”prev” onclick=”plusSlides(-1)”>&#10094;</a>
<a class=”next” onclick=”plusSlide

s(1)”>&#10095;</a>
</div><!– end slideshow-container –> – ooops, layer is closed too soon
<br>

<!– The dots/circles –>
<div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>

This is a g

ood example of why it’s so important to be able to read and debug code, even if you get the code from a trusted source.

5/5/20: Being Aware of Marketing

I’ve heard that a good optometrist can spot heart disease and diabetes by looking into the eye. I know that a good coder can spot web marketing problems by looking at file name

s. If your file names look like those in the first screenshot, your site has a marketing loss.

In our little Javascript slider project, it might not seem like a marketing project, but why bother having the images on a website at all, if it’s not marketing. So, the question becomes, is the person doing the coding responsible to be concerned about a marketing topic?

I say yes! And, my clients can tell you I am most persistent about it.

5/15/20: You Need to Understand CSS, Too

One of the missing elements in learning to “program” for the web is that the basic structures of websites are HTML and CSS. All the programming is the furniture, not the walls. One time, I was asked to teach the basics of CSS … in 45 minutes. I failed miserably.

So, if you are planning to learn to program for the web, give yourself some time to learn CSS. Here is an example:
*
{
box-sizing:border-box;
}