Select Page
Web Design II
Class 04: JavaScript Practice

Topics

  • Introduction to JQuery
  • Intermediate JavaScript Examples
  • Class 04: Single Page Site (jquery components) Lab

I hope you enjoy class Fore!

Introduction to JQuery

JQuery:

JQuery is a library of JavaScript. It basically abbreviates JavaScript code into smaller, simpler lines. This is very similar to using BootStrap (in fact JQuery is one of the components of BootStrap).

Attaching jQuery:

There are two primary ways to incorporate jQuery into your site.

Host it yourself:
You can download the code and link it to your site to use much like an external CSS sheet.
You can download it here.
<script src=”js/jquery-3.4.1.min.js”></script>
CDN (Content Delivery Network):
Instead of downloading and hosting the code yourself you can simply link it from a popular source.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>

Syntax:

The structure of jQuery is actually pretty straight-forward.

$
Denotes jQuery usage.
(selector)
The element the code is attached to.
.action()
The thing that happens.

Ready:

All jQuery code should generally be placed inside a ready function. This makes sure that webpage is fully loaded before the jQuery runs.

$(document).ready(function(){
jQuery code here
});

jQuery Examples:

Here are some quick jQuery snippets.

Hide and Show
Used to quickly hide or show an element
Example
$(document).ready(function(){
$(“#hide”).click(function(){
$(“.hideEx”).hide(500);
});
$(“#show”).click(function(){
$(“.hideEx”).show(1000);
});
});
Toggle
Single method that works like a switch to turn on or off visibility.
Example
$(document).ready(function(){
$(“#hideBtn”).click(function(){
$(“.hideEx”).toggle(250);
});
});
Fade
Sets elements to appear via opacity over a period of time.
Example
$(document).ready(function(){
$(“#fadeBtn”).click(function(){
$(“#hide01”).fadeToggle(250);
$(“#hide02”).fadeToggle(1000);
$(“#hide03”).fadeToggle(2500);
$(“#hide04”).fadeToggle(5000);
});
})
Slide
Like an accordion, makes elements visible and expand into view.
Example
$(document).ready(function(){
$(“#slideBtn”).click(function(){
$(“#slidePanel”).slideToggle(500);
});
});
Animate
Much like CSS you can animate elements but with much more control.
Example
$(document).ready(function(){
$(“#animatePanel”).click(function(){
$(“#animatePanel”).animate({top:‘100px’}, 250);
$(“#animatePanel”).animate({top:‘0px’}, 250);
});
});

More jQuery:

There are many more things jQuery can do.

To see more information on jQuery visit here.

Intermediate JavaScript Examples

Responsive Navbar Tutorial Video

Responsive Navbar:

Navigation that collapses to a single menu button when shrunk and expands vertically when clicked.

HTML:

<ul id=”navbar”>
Encompass the entire unordered list menu bar.
<li class=”nav” id=”menuBtn”><a href=”#” onclick=”openMenu()”>
The list item that holds the link that when clicked runs the openMenu function.
<div id=”hamburger”><p>-</p><p>-</p><p>-</p></div>
Simply three “-” meant to represent the menu icon.
<li class=”nav”><a href=”#”>Home</a></li>
Each list item that has the links attached have the nav class to target them.

CSS:

body {}
font-family:Arial, Helvetica, Sans-serif; margin:0px; box-sizing:border-box;
Style the general default content.
a:link, a:visited {}
color:rgb(255, 255, 255); background-color:rgb(131, 131, 131); display:inline-block; width:100px; padding:10px; text-align:center; text-decoration:none; font-weight:700;
Style the links to look nicer.
a:hover {}
color:rgb(0, 0, 0); background-color:rgb(194, 194, 194);
Style the color of the links when the mouse is over them.
#menuBtn {}
display:none;
Turn off the menu button by default.
li {}
list-style-type:none; display:inline;
Have the list (links) items stack horizontally by default.
#hamburger p {}
position:relative; font-size:2em; transform:scale(4, 1); margin:0px; padding:0px; top:0px; line-height:10px;
Create a menu button by stack p elements and formatting them.
@media screen and (max-width: 600px) {}
li {list-style-type:none;}
#menuBtn {display:block;}
.nav{display:none;}
Turn off the horizontal links and turn on the menu button.
@media screen and (max-width: 600px) {}
.resMenu {display:block;}
Turn on the responsive vertically stacked menu.

JavaScript:

function openMenu() {
Function that will run when the button is pressed.
var navEl = document.getElementsByClassName(“nav”);
Variable that stores the nav elements.
var i;
Variable that stores the counter.
for (i = 1; i < navEl.length; i++) {
Starting at 1 (not 0), and for the number of nav elements, run the following code.
if (navEl[i].className === “nav”){
If the current nav element has the nav class attached.
navEl[i].className += ” resMenu”;}
Add the resMenu class to it as well.
else {
Else do this.
navEl[i].className = “nav”;}
Set the attached class to just nav.
You can view an example responsive navbar here.

Navbar now comes in responsive. “Tastes terrible!”

Responsive Navbar HTML

<ul id=“navbar”>
<li class=“nav” id=“menuBtn”><a href=“#” onclick=“openMenu()”>
<div id=“hamburger”>
<p>–</p>
<p>–</p>
<p>–</p>
</div>
</a></li>
<li class=“nav”><a href=“#”>Home</a></li>
<li class=“nav”><a href=“#”>News</a></li>
<li class=“nav”><a href=“#”>About Us</a></li>
<li class=“nav”><a href=“#”>Contact Us</a></li>
</ul>

Responsive Navbar CSS

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
box-sizing: border-box;}
a:link, a:visited {
color: rgb(255, 255, 255);
background-color: rgb(131, 131, 131);
display: inline-block;
width: 100px;
padding: 10px;
text-align: center;
text-decoration: none;
font-weight: 700;}
a:hover {
color: rgb(0, 0, 0);
background-color: rgb(194, 194, 194);}
#menuBtn {
display: none;}
li {
list-style-type: none;
display: inline;}

#hamburger p {

position: relative;
font-size: 2em;
transform: scale(4, 1);
margin: 0px;
padding: 0px;
top: 0px;
line-height: 10px;}
@media screen and (max-width: 600px) {
li {
list-style-type: none;}
#menuBtn {
display: block;}
.nav {
display: none;}
}
@media screen and (max-width: 600px) {
.resMenu {
display:block;}
}

Responsive Navbar JavaScript

function openMenu() {
var navEl = document.getElementsByClassName(“nav”);
var i;

for(i = 1; i < navEl.length; i++){
if(navEl[i].className === “nav”){
navEl[i].className += ” resMenu”;}
else {
navEl[i].className = “nav”;}
}
}

Slider Tutorial Video

Slider (carousel, slideshow, etc.):

Create a list of images that the user can click through.

HTML:

<div class=”slideshow”>
Div that holds the entire slider
<div class=”slide”>
Div for each slide. Repeat the same code for more slides.
<img src=”images/photo_1.png” class=”slideImg” />
The actual image attached.
<div class=”caption”>
Div to hold caption for each image slide.
<a class=”prev” onclick=”nextSlide(-1)>&#10094;</a>
The previous button that runs the nextSlide function when pressed.
<a class=”next” onclick=”nextSlide(1)>&#10095;</a>
The next button that runs the nextSlide function when pressed.
<div id=”slideIndicator”>
Holds the “dots” that represent each slide.
<span class=”dot” onclick=”currentSlide(1)”></span>
Each dot is a link to that particular image slide.

CSS:

* {}
box-sizing:border-box;
Make sure borders and padding to not extend past width on all elements.
body {}
font-family:Verdana, Sans-serif; margin:0;
Set the default font and margin for the page.
.slide {}
display:none;
By default turn off all slides.
.slideImg {}
vertical-align:middle; width:100%;
Set the slide images to span the entire page and be aligned in the center vertically.
.slideshow {}
max-width:1000px; position:relative; margin:auto;
Makes sure the slideshow does not get too big and is centered in the page.
.prev, .next {}
cursor:pointer; position:absolute; top:50%; width:auto; padding:16px; margin-top:-22px; color:white; font-weight:bold; transition:0.6s ease; border-radius: 0 3px 3px 0; user-select:none;
Generally formatting the next and previous buttons.
.next {}
right:0px; border-radius:3px 0 0 3px;
Format the next button so it sticks to the right side of the slider.
.prev:hover, .next:hover {}
background-color:rgba(0, 0, 0, 0.8);
Style the previous and next buttons when the mouse is over it.
.caption {}
color: #f2f2f2; font-size:15px; padding:8px 12px; position:absolute; bottom:8px; width:100%; text-align:center;
Format the caption section.
#slideIndicator {}
text-align:center;
Center the dots.
.dot {}
cursor:pointer; height:15px; width:15px; margin:0px; background-color:#bbb; border-radius: 50%; display:inline-block; transition: background-color 0.6s ease;
Style the dot slide indicators.
.active, .dot:hover {}
background-color:#717171;
Format the dots when the mouse is over them.

JavaScript:

var slideNum = 1;
Set the current slide number to 1;
showSlide(slideNum);
Run the showSlide function and send it the current slide number.
function nextSlide(n) {
Run the following code when called.
showSlide(slideNum += n);}
Run the showSlide function and send it the slideNum + n.
function currentSlide(n) {
Run the following code when called.
showSlide(slideNum = n);}
Run the showSlide function and send it the slideNum + n.
function showSlide(n) {
Run the following code when called.
var i;
Counter variable.
var slides = document.getElementsByClassName(“slide”);
Store all the elements with the “slide” class into the slides variable.
var dots = document.getElementsByClassName(“dot”);
Stores all the elements with the “dots” class into the dots variable.
if (n > slides.length) {
If n is less than the number of elements in the slides variable.
slideNum = 1;}
Set the value of slideNum to 1.
if (n < 1) {
if n is less than one.
slideNum = slides.length;}
Set the value of SlideNum to the total number of elements in the slides variable.
for (i= 0; i < slides.length; i++) {
Starting at 0 and run the following code the total number of elements in slides.
slides[i].style.display = “none”;}
Set the current slides element off.
for (i = 0; i < dots.length; i++) {
Starting at 0 and run the following code the total number of elements in dots.
dots[i].className = dots[i].className.replace(” active”, “”);}
Replace the class attached to dots with active.
slides[slideNum – 1].style.display = “block”;
Turn on the the slide.
dots[slideNum – 1].className += ” active”;}
Make the correct dot active.
You can view an example slider here.

Slider HTML

<div class=“slideshow”>
<div class=“slide”>
<img src=“images/photo_1.png” class=“slideImg” />
<div class=“caption”>
<h3>Slide 01</h3>
<p>Here is my pic</p>
</div>
</div>
<div class=“slide”>
<img src=“images/photo_3.png” class=“slideImg” />
<div class=“caption”>
<h3>Slide 02</h3>
<p>Here is my pic</p>
</div>
</div>
<div class=“slide”>
<img src=“images/photo_5.png” class=“slideImg” />
<div class=“caption”>
<h3>Slide 03</h3>
<p>Here is my pic</p>
</div>
</div>
<a class=“prev” onclick=“nextSlide(-1)”>&#10094;</a>
<a class=“next” onclick=“nextSlide(1)”>&#10095;</a>
</div>
<br>
<div id=“slideIndicator”>
<span class=“dot” onclick=“currentSlide(1)”></span>
<span class=“dot” onclick=“currentSlide(2)”></span>
<span class=“dot” onclick=“currentSlide(3)”></span>
</div>

Slider CSS

* {
box-sizing: border-box}
body {
font-family: Verdana, sans-serif; margin:0}
.slide {
display: none}
.slideImg {
vertical-align: middle;
width: 100%}

.slideshow {

max-width: 1000px;
position: relative;
margin: auto;}

.prev, .next {

cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;}

.next {

right: 0;
border-radius: 3px 0 0 3px;}

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);}

.caption {

color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;}

#slideIndicator {

text-align: center;}

.dot {

cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;}

.active, .dot:hover {

background-color: #717171;}

Slider JavaScript

var slideNum = 1;
showSlide(slideNum);

function nextSlide(n) {
showSlide(slideNum += n);}

function currentSlide(n) {
showSlide(slideNum = n);}

function showSlide(n) {
var i;
var slides = document.getElementsByClassName(“slide”);
var dots = document.getElementsByClassName(“dot”);
if (n > slides.length) {
slideNum = 1}
if (n < 1) {
slideNum = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(” active”, “”);}
slides[slideNum–1].style.display = “block”;
dots[slideNum–1].className += ” active”;
}

Class 04: Single Page Site (jquery components) Lab

Single Page Site (jquery components) Lab

n the last assignment you incorporated some simple JavaScript into your webpage. In this assignment you will once again incorporate JavaScript into your webpage but it will be slightly more complicated. You can choose to either develop a responsive navbar or slider.

You will be graded on the following:
  • Lab Requirements
    • Techniques and processes covered in the instructional material is followed and implemented.
  • Creativity & Craftsmanship
    • Excellent design choices, novel & appealing, and solid clean caliber work.
Resources:
Assignment Video Tutorials
You may watch these tutorial videos below to help you complete your assignment.
Assignment Lab Materials
You may use what you produced int he previous lab.

Lab Tutorial Slideshow

This tutorial will add a navbar and slider into our responsive webpage.

Lab Introduction
Single Page Site (advanced javascrip) Lab
PlayPlay
Introduction

You have had a little practice with JavaScript in the last lab. In this lab you will create a responsive navbar and carousel. These are almost always present in responsive sites. They are bit more complicated than the previous JavaScript components but still similar.

If you run into any issues please do not hesitate to contact me:
jcone@cecil.edu
(240) 466-1996

Click on the > to start

You may use what you prodcued in the last class or start with the zip folder below
One Page Site (advanced javascript) Lab Materials (

Open the File
Open the File
Single Page Site (advanced javascript) Lab
PlayPlay
Instructions
  1. You may use what you created in the last lab or use the provided one here: One Page Site (advanced javascript) Lab Materials (all required materials are included).
  2. If you choose to work from what you created last lab you won't need any additional files.
  3. Once you have the lab materials or your previously created lab you should open up the index.html file in Visual Studio Code.
Navbar (HTML)
Navbar (HTML)
Single Page Site (advanced javascript) Lab
PlayPlay
index.html

<!DOCTYPE html>
<html>
<head>
    <title>About Cone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />
    <style>
        #more {display: none;}
        
        .accordionBtn {
            background-color: rgb(246, 148, 35);
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;}
        .active, .accordionBtn:hover {
            background-color: #ccc;}
        .accordionPnl {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;}

        a:link, a:visited {
            color: rgb(255, 255, 255);
            background-color: rgb(131, 131, 131);
            display: inline-block;
            width: 150px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;}
        a:hover {
            color: rgb(0, 0, 0);
            background-color: rgb(194, 194, 194);}            
    </style>
</head>
<body>
    <div class="header row">
        <div class="col-12-s">
            <ul id="navbar">
                <li class="nav" id="menuBtn"><a href="#" >            
                    <div id="hamburger">
                        <p>-</p>
                        <p>-</p>
                        <p>-</p>
                    </div>
                </a></li>
                <li class="nav"><a href="#">Home</a></li>
                <li class="nav"><a href="#">News</a></li>
                <li class="nav"><a href="#">About Us</a></li>
                <li class="nav"><a href="#">Contact Us</a></li>
            </ul> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h1 class="responsive-h">About Cone</h1>
        </div>
        <div class="col-4-s col-6-m col-8-l">
            <figure>
                <img class="responsive-img logoLarge" src="images/coneLogoLarge.png" />
                <img class="responsive-img logoSmall" src="images/coneLogoSmall.png" />
                <figcaption>Look upon my majesty</figcaption>
            </figure>
        </div>
    </div>
    <div class="content row">
        <div class="col-4-s col-6-m col-8-l">
            <h2>I am Cone</h2>
            <p>Yup that is all you need to know. I am a sentient primitive object used to direct the public away. In this case I am used as an example.</p>
            <p>I have the most amazing thing to tell you if you just read this paragraph.<span id="dots">…</span>   <span id="more">I lied. That is all.</span><button id="rmBtn">Read more</button></p> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h2>I am so much more</h2>
            <p>This is actually not true. I was just trying to draw you into the next paragraph and it worked! Sucker.</p>

            <button class="accordionBtn">Interesting Facts About Cone</button>
            <div class="accordionPnl">
                <p>He is not interesting, obviously. Move along.</p>
            </div>

            <button class="accordionBtn">Cone Joke</button>
            <div class="accordionPnl">
                <p>Heard a microchip making all sorts of awful puns. Turns out it was made of silly cone. You regret this don't you?</p>
            </div>
            
            <button class="accordionBtn">Cone's Friend List</button>
            <div class="accordionPnl">
                <p>...</p>
                <p>...in progress.</p>
            </div>           
        </div>        
    </div>
<script src="js/scripts.js"></script>
</body>
</html>
Instructions
  1. In this lab we will create two more complicated JavaScript components, navbar and carousel. First we will create the navbar.
  2. First make a new column to place the menu in:
    <div class="col-12-s">
    </div>
  3. The navbar is created the same as other menus. It is a list. A class should be included to target the menu with CSS and JavaScript. It should look like:
    <ul id="navbar">
       <li class="nav"><a href="#">Home</a></li>
       <li class="nav"><a href="#">News</a></li>
       <li class="nav"><a href="#">About Us</a></li>
       <li class="nav"><a href="#">Contact Us</a></li>
    </ul>
  4. We need to create a "hamburger" menu button for when the menu width is small. Make the following the first list item in the menu list:
    <li class="nav" id="menuBtn"><a href="#" >
       <div id="hamburger">
          <p>-</p>
          <p>-</p>
          <p>-</p>
       </div>
    </a></li>
  5. The basic HTML menu has been created.
Navbar (CSS)
Navbar (CSS)
Single Page Site (advanced javascript) Lab
PlayPlay
index.html

<!DOCTYPE html>
<html>
<head>
    <title>About Cone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />
    <style>
        #more {display: none;}
        
        .accordionBtn {
            background-color: rgb(246, 148, 35);
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;}
        .active, .accordionBtn:hover {
            background-color: #ccc;}
        .accordionPnl {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;}

        a:link, a:visited {
            color: rgb(255, 255, 255);
            background-color: rgb(131, 131, 131);
            display: inline-block;
            width: 150px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;}
        a:hover {
            color: rgb(0, 0, 0);
            background-color: rgb(194, 194, 194);}  
            
            a:link, a:visited {
            color: rgb(255, 255, 255);
            background-color: rgb(131, 131, 131);
            display: inline-block;
            width: 150px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;}
        a:hover {
            color: rgb(0, 0, 0);
            background-color: rgb(194, 194, 194);
        }            
        #menuBtn {
            display: none;}        
        li {
            list-style-type: none;
            display: inline;}

        #hamburger p {
            position: relative;
            font-size: 2em;
            transform: scale(4, 1);
            margin: 0px;
            padding: 0px;
            top: 0px;
            line-height: 10px;}
        @media screen and (max-width: 600px) {
            li {
            list-style-type: none;}
            #menuBtn {
                display: block;}
            .nav {
                display: none;}
        }
        @media screen and (max-width: 600px) {
            .resMenu {
                display:block;}
        }
    </style>
</head>
<body>
    <div class="header row">
        <div class="col-12-s">
            <ul id="navbar">
                <li class="nav" id="menuBtn"><a href="#" >            
                    <div id="hamburger">
                        <p>-</p>
                        <p>-</p>
                        <p>-</p>
                    </div>
                </a></li>
                <li class="nav"><a href="#">Home</a></li>
                <li class="nav"><a href="#">News</a></li>
                <li class="nav"><a href="#">About Us</a></li>
                <li class="nav"><a href="#">Contact Us</a></li>
            </ul> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h1 class="responsive-h">About Cone</h1>
        </div>
        <div class="col-4-s col-6-m col-8-l">
            <figure>
                <img class="responsive-img logoLarge" src="images/coneLogoLarge.png" />
                <img class="responsive-img logoSmall" src="images/coneLogoSmall.png" />
                <figcaption>Look upon my majesty</figcaption>
            </figure>
        </div>
    </div>
    <div class="content row">
        <div class="col-4-s col-6-m col-8-l">
            <h2>I am Cone</h2>
            <p>Yup that is all you need to know. I am a sentient primitive object used to direct the public away. In this case I am used as an example.</p>
            <p>I have the most amazing thing to tell you if you just read this paragraph.<span id="dots">…</span>   <span id="more">I lied. That is all.</span><button id="rmBtn">Read more</button></p> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h2>I am so much more</h2>
            <p>This is actually not true. I was just trying to draw you into the next paragraph and it worked! Sucker.</p>

            <button class="accordionBtn">Interesting Facts About Cone</button>
            <div class="accordionPnl">
                <p>He is not interesting, obviously. Move along.</p>
            </div>

            <button class="accordionBtn">Cone Joke</button>
            <div class="accordionPnl">
                <p>Heard a microchip making all sorts of awful puns. Turns out it was made of silly cone. You regret this don't you?</p>
            </div>
            
            <button class="accordionBtn">Cone's Friend List</button>
            <div class="accordionPnl">
                <p>...</p>
                <p>...in progress.</p>
            </div>           
        </div>        
    </div>
<script src="js/scripts.js"></script>
</body>
</html>
Instructions
  1. CSS will actually do 90 percent of the heavy lifting in our responsive menu. We will create some default CSS rules as well as some we will turn on and off using JavaScript.
  2. Add some basic menu formatting:
    a:link, a:visited {
       color: rgb(255, 255, 255);
       background-color: rgb(131, 131, 131);
       display: inline-block;
       width: 150px;
       padding: 10px;
       text-align: center;
       text-decoration: none;
       font-weight: 700;}
    a:hover {
       color: rgb(0, 0, 0);   background-color: rgb(194, 194, 194);}
    #menuBtn {
       display: none;}
    li {
       list-style-type: none;
       display: inline;}
    #hamburger p {
       position: relative;
Navbar (JavaScript)
Navbar (JavaScript)
Single Page Site (advanced javascript) Lab
PlayPlay
scripts.js

document.getElementById("rmBtn").addEventListener("click", readMoreFunction);

function readMoreFunction() 
{  
    var dots = document.getElementById("dots");        
    var moreText = document.getElementById("more");        
    var btnText = document.getElementById("rmBtn");    
    
    if (dots.style.display == "none") { 
        dots.style.color = "rgb(250 0 0)";       
        dots.style.display = "inline";        
        btnText.innerHTML = "Read more";         
        moreText.style.display = "none";} 
    
    else {        
        dots.style.display = "none";        
        btnText.innerHTML = "Read less";         
        moreText.style.display = "inline";}     
}

var accBtn = document.getElementsByClassName("accordionBtn");
var i;

for (i = 0; i < accBtn.length; i++) {
    accBtn[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var accPnl = this.nextElementSibling;
        if (accPnl.style.display === "block") {
            accPnl.style.display = "none";
        } 
        else {
            accPnl.style.display = "block";
        }
    });
}

document.getElementById("menuBtn").addEventListener("click", openMenu);

function openMenu() {
    var navEl = document.getElementsByClassName("nav");
    var i;

    for(i = 1; i < navEl.length; i++){
        if(navEl[i].className === "nav"){
            navEl[i].className += " resMenu";}
        else {
            navEl[i].className = "nav";}
    }
}
Instructions
  1. JavaScript will be used to apply CSS rules to the menu. These rules will make the menu vertical when it is small and horizontal when larger.
  2. In the scripts.js file add an event listener to the menu button like so:
    document.getElementById("menuBtn").addEventListener("click", openMenu);
  3. The event will now need a handler:
    function openMenu() {
       var navEl = document.getElementsByClassName("nav");
       var i;
       for(i = 1; i < navEl.length; i++){
          if(navEl[i].className === "nav"){
             navEl[i].className += " resMenu";}
          else {
             navEl[i].className = "nav";}
       }
    }
  4. Now when the user clicks on the menu button it will apply CSS that will reveal the menu when it is in is small width.
Preview Progress
Preview Progress
Single Page Site (advanced javascript) Lab
PlayPlay
Instructions
  1. The Navbar is complete. Now is a good time to preview it. Save both documents (index.html & scripts.js) and open index.html in your favorite browser.
  2. It should work similar to the example embedded below.
  3. We will create one more component, a slider.
Browser

About Cone

Look upon my majesty

I am Cone

Yup that is all you need to know. I am a sentient primitive object used to direct the public away. In this case I am used as an example.

I have the most amazing thing to tell you if you just read this paragraph....

I am so much more

This is actually not true. I was just trying to draw you into the next paragraph and it worked! Sucker.

Unfortunately the responsive elements of the image and title changing based on side does not function in this preview.

Slider (HTML)
Slider (HTML)
Single Page Site (advanced javascript) Lab
PlayPlay
index.html

<!DOCTYPE html>
<html>
<head>
    <title>About Cone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />
    <style>
        #more {display: none;}
        
        .accordionBtn {
            background-color: rgb(246, 148, 35);
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;}
        .active, .accordionBtn:hover {
            background-color: #ccc;}
        .accordionPnl {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;}

        a:link, a:visited {
            color: rgb(255, 255, 255);
            background-color: rgb(131, 131, 131);
            display: inline-block;
            width: 150px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;}
        a:hover {
            color: rgb(0, 0, 0);
            background-color: rgb(194, 194, 194);}  
            
            a:link, a:visited {
            color: rgb(255, 255, 255);
            background-color: rgb(131, 131, 131);
            display: inline-block;
            width: 150px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;}
        a:hover {
            color: rgb(0, 0, 0);
            background-color: rgb(194, 194, 194);
        }            
        #menuBtn {
            display: none;}        
        li {
            list-style-type: none;
            display: inline;}

        #hamburger p {
            position: relative;
            font-size: 2em;
            transform: scale(4, 1);
            margin: 0px;
            padding: 0px;
            top: 0px;
            line-height: 10px;}
        @media screen and (max-width: 600px) {
            li {
            list-style-type: none;}
            #menuBtn {
                display: block;}
            .nav {
                display: none;}
        }
        @media screen and (max-width: 600px) {
            .resMenu {
                display:block;}
        }
    </style>
</head>
<body>
    <div class="header row">
        <div class="col-12-s">
            <ul id="navbar">
                <li class="nav" id="menuBtn"><a href="#" >            
                    <div id="hamburger">
                        <p>-</p>
                        <p>-</p>
                        <p>-</p>
                    </div>
                </a></li>
                <li class="nav"><a href="#">Home</a></li>
                <li class="nav"><a href="#">News</a></li>
                <li class="nav"><a href="#">About Us</a></li>
                <li class="nav"><a href="#">Contact Us</a></li>
            </ul> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h1 class="responsive-h">About Cone</h1>
        </div>
        <div class="col-4-s col-6-m col-8-l">
            <figure>
                <img class="responsive-img logoLarge" src="images/coneLogoLarge.png" />
                <img class="responsive-img logoSmall" src="images/coneLogoSmall.png" />
                <figcaption>Look upon my majesty</figcaption>
            </figure>
        </div>
    </div>
    <div class="content row">
        <div class="col-4-s col-6-m col-8-l">
            <h2>I am Cone</h2>
            <p>Yup that is all you need to know. I am a sentient primitive object used to direct the public away. In this case I am used as an example.</p>
            <p>I have the most amazing thing to tell you if you just read this paragraph.<span id="dots">…</span>   <span id="more">I lied. That is all.</span><button id="rmBtn">Read more</button></p> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h2>I am so much more</h2>
            <p>This is actually not true. I was just trying to draw you into the next paragraph and it worked! Sucker.</p>

            <button class="accordionBtn">Interesting Facts About Cone</button>
            <div class="accordionPnl">
                <p>He is not interesting, obviously. Move along.</p>
            </div>

            <button class="accordionBtn">Cone Joke</button>
            <div class="accordionPnl">
                <p>Heard a microchip making all sorts of awful puns. Turns out it was made of silly cone. You regret this don't you?</p>
            </div>
            
            <button class="accordionBtn">Cone's Friend List</button>
            <div class="accordionPnl">
                <p>...</p>
                <p>...in progress.</p>
            </div>           
        </div>  
        <div class="col-12-s">
            <div class="slideshow">
                <div class="slide">
                    <img src="images/photo_1.png" class="slideImg" />
                    <div class="caption">
                        <h3>Slide 01</h3>
                        <p>Here is my pic</p>
                    </div>        
                </div>
            
                <div class="slide">
                    <img src="images/photo_3.png" class="slideImg" />
                    <div class="caption">
                        <h3>Slide 02</h3>
                        <p>Here is my pic</p>
                    </div>  
                </div>
            
                <div class="slide">
                    <img src="images/photo_5.png" class="slideImg" />
                    <div class="caption">
                        <h3>Slide 03</h3>
                        <p>Here is my pic</p>
                    </div>  
                </div>
            
                <a class="prev">&#10094;</a>
                <a class="next">&#10095;</a>
            </div>
            <br>
            
            <div id="slideIndicator">
                <span class="dot"></span> 
                <span class="dot"></span> 
                <span class="dot"></span> 
            </div>
        </div>      
    </div>
<script src="js/scripts.js"></script>
</body>
</html>
Instructions
  1. Next up is a slider, carousel, slideshow, or whatever you would like to call it. First obviously you need to create the HTML elements. You may use your own images, the ones included in this week's lab material zip folder, or download these: One Page Site (advanced javascript) Slider Images
  2. Create a column with a responsive class and inside a div with a class that wraps around the whole slider to control it:
    <div class="col-12-s">
       <div class="slideshow">
       </div>
    </div>
  3. inside of the "slideshow" div we must create each slide. They will have an image and caption wrapped inside a div. Each should look something like:
    <div class="slide">
       <img src="images/photo_1.png" class="slideImg" />
       <div class="caption">
          <h3>Slide 01</h3>
          <p>Here is my pic</p>
       </div>
    </div>
  4. After the slides we should create previous and next buttons. Add the following just after the slides:
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  5. The last HTML element to include will be the navigation dots below the slides. This allows the user to know what slide they are currently on. It should be added just after the main slideshow div. It should look like:
    <br>
    <div id="slideIndicator">
       <span class="dot"></span>
       <span class="dot"></span>
       <span class="dot"></span>
    </div>
  6. Next up, CSS!
Slider (CSS)
Slider (CSS)
Single Page Site (advanced javascript) Lab
PlayPlay
index.html

<!DOCTYPE html>
<html>
<head>
    <title>About Cone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" />
    <style>
        #more {display: none;}
        
        .accordionBtn {
            background-color: rgb(246, 148, 35);
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;}
        .active, .accordionBtn:hover {
            background-color: #ccc;}
        .accordionPnl {
            padding: 0 18px;
            background-color: white;
            display: none;
            overflow: hidden;}

        a:link, a:visited {
            color: rgb(255, 255, 255);
            background-color: rgb(131, 131, 131);
            display: inline-block;
            width: 150px;
            padding: 10px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;}
        a:hover {
            color: rgb(0, 0, 0);
            background-color: rgb(194, 194, 194);
        }            
        #menuBtn {
            display: none;}        
        li {
            list-style-type: none;
            display: inline;}

        #hamburger p {
            position: relative;
            font-size: 2em;
            transform: scale(4, 1);
            margin: 0px;
            padding: 0px;
            top: 0px;
            line-height: 10px;}
        @media screen and (max-width: 600px) {
            li {
            list-style-type: none;}
            #menuBtn {
                display: block;}
            .nav {
                display: none;}
        }
        @media screen and (max-width: 600px) {
            .resMenu {
                display:block;}
        }

        .slide {
            display: none}
        .slideImg {
            vertical-align: middle;
            width: 100%}

        .slideshow {
            max-width: 1000px;
            position: relative;
            margin: auto;}

        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;}

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;}

        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);}


        .caption {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;}

        #slideIndicator {
            text-align: center;}

        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;}

        .active, .dot:hover {
            background-color: #717171;}
    </style>
</head>
<body>
    <div class="header row">
        <div class="col-12-s">
            <ul id="navbar">
                <li class="nav" id="menuBtn"><a href="#" >            
                    <div id="hamburger">
                        <p>-</p>
                        <p>-</p>
                        <p>-</p>
                    </div>
                </a></li>
                <li class="nav"><a href="#">Home</a></li>
                <li class="nav"><a href="#">News</a></li>
                <li class="nav"><a href="#">About Us</a></li>
                <li class="nav"><a href="#">Contact Us</a></li>
            </ul> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h1 class="responsive-h">About Cone</h1>
        </div>
        <div class="col-4-s col-6-m col-8-l">
            <figure>
                <img class="responsive-img logoLarge" src="images/coneLogoLarge.png" />
                <img class="responsive-img logoSmall" src="images/coneLogoSmall.png" />
                <figcaption>Look upon my majesty</figcaption>
            </figure>
        </div>
    </div>
    <div class="content row">
        <div class="col-4-s col-6-m col-8-l">
            <h2>I am Cone</h2>
            <p>Yup that is all you need to know. I am a sentient primitive object used to direct the public away. In this case I am used as an example.</p>
            <p>I have the most amazing thing to tell you if you just read this paragraph.<span id="dots">…</span>   <span id="more">I lied. That is all.</span><button id="rmBtn">Read more</button></p> 
        </div>
        <div class="col-8-s col-6-m col-4-l">
            <h2>I am so much more</h2>
            <p>This is actually not true. I was just trying to draw you into the next paragraph and it worked! Sucker.</p>

            <button class="accordionBtn">Interesting Facts About Cone</button>
            <div class="accordionPnl">
                <p>He is not interesting, obviously. Move along.</p>
            </div>

            <button class="accordionBtn">Cone Joke</button>
            <div class="accordionPnl">
                <p>Heard a microchip making all sorts of awful puns. Turns out it was made of silly cone. You regret this don't you?</p>
            </div>
            
            <button class="accordionBtn">Cone's Friend List</button>
            <div class="accordionPnl">
                <p>...</p>
                <p>...in progress.</p>
            </div>           
        </div>
        <div class="col-12-s">
            <div class="slideshow">
                <div class="slide">
                    <img src="images/photo_1.png" class="slideImg" />
                    <div class="caption">
                        <h3>Slide 01</h3>
                        <p>Here is my pic</p>
                    </div>        
                </div>
            
                <div class="slide">
                    <img src="images/photo_3.png" class="slideImg" />
                    <div class="caption">
                        <h3>Slide 02</h3>
                        <p>Here is my pic</p>
                    </div>  
                </div>
            
                <div class="slide">
                    <img src="images/photo_5.png" class="slideImg" />
                    <div class="caption">
                        <h3>Slide 03</h3>
                        <p>Here is my pic</p>
                    </div>  
                </div>
            
                <a class="prev">&#10094;</a>
                <a class="next">&#10095;</a>
            </div>
            <br>
            
            <div id="slideIndicator">
                <span class="dot"></span> 
                <span class="dot"></span> 
                <span class="dot"></span> 
            </div>
        </div>
    </div>
<script src="js/scripts.js"></script>
</body>
</html>
Instructions
  1. The slider elements must be formatted via CSS.
  2. There is quite a bit CSS. It should look like below:
    .slide {
       display: none}
    .slideImg {
       vertical-align: middle;
       width: 100%}
    .slideshow {
       max-width: 1000px;
       position: relative;
       margin: auto;}
    .prev, .next {
       cursor: pointer;
       position: absolute;
       top: 50%;
       width: auto;
       padding: 16px;
       margin-top: -22px;
       color: white;
       font-weight: bold;
       font-size: 18px;
       transition: 0.6s ease;
       border-radius: 0 3px 3px 0;
       user-select: none;}
    .next {
       right: 0;
       border-radius: 3px 0 0 3px;}
    .prev:hover, .next:hover {   background-color: rgba(0,0,0,0.8);}
    .caption {
       color: #f2f2f2;
       font-size: 15px;
       padding: 8px 12px;
       position: absolute;
       bottom: 8px;
       width: 100%;
       text-align: center;}
    #slideIndicator {
       text-align: center;}
    .dot {
       cursor: pointer;
       height: 15px;
       width: 15px;
       margin: 0 2px;
       background-color: #bbb;
       border-radius: 50%;
       display: inline-block;
       transition: background-color 0.6s ease;}
    .active, .dot:hover {
       background-color: #717171;}
  3. Phew! That was a lot.
Slider (JavaScript)
Slider (JavaScript)
Single Page Site (advanced javascript) Lab
PlayPlay
scripts.js

document.getElementById("rmBtn").addEventListener("click", readMoreFunction);

function readMoreFunction() 
{  
    var dots = document.getElementById("dots");        
    var moreText = document.getElementById("more");        
    var btnText = document.getElementById("rmBtn");    
    
    if (dots.style.display == "none") { 
        dots.style.color = "rgb(250 0 0)";       
        dots.style.display = "inline";        
        btnText.innerHTML = "Read more";         
        moreText.style.display = "none";} 
    
    else {        
        dots.style.display = "none";        
        btnText.innerHTML = "Read less";         
        moreText.style.display = "inline";}     
}

var accBtn = document.getElementsByClassName("accordionBtn");
var i;

for (i = 0; i < accBtn.length; i++) {
    accBtn[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var accPnl = this.nextElementSibling;
        if (accPnl.style.display === "block") {
            accPnl.style.display = "none";
        } 
        else {
            accPnl.style.display = "block";
        }
    });
}


document.getElementById("menuBtn").addEventListener("click", openMenu);

function openMenu() {
    var navEl = document.getElementsByClassName("nav");
    var i;

    for(i = 1; i < navEl.length; i++){
        if(navEl[i].className === "nav"){
            navEl[i].className += " resMenu";}
        else {
            navEl[i].className = "nav";}
    }
}

var slides = document.getElementsByClassName("slide");
var dotBtn = document.getElementsByClassName("dot");
var prevBtn = document.getElementsByClassName("prev");
var nextBtn = document.getElementsByClassName("next");

var slideNum = 1;
showSlide(slideNum);

for (i = 0; i < prevBtn.length; i++){
    prevBtn[i].addEventListener("click", function() {
        showSlide(slideNum -= 1);});
}
for (i = 0; i < nextBtn.length; i++){
    nextBtn[i].addEventListener("click", function() {
        showSlide(slideNum += 1);});
}

function showSlide(n) {
    if (n > slides.length) {
        slideNum = 1}    
    if (n < 1) {
        slideNum = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";}
    for (i = 0; i < dotBtn.length; i++) {
        dotBtn[i].className = dotBtn[i].className.replace(" active", "");}
    slides[slideNum-1].style.display = "block";  
    dotBtn[slideNum-1].className += " active";
}
Instructions
  1. The magic of the slider is mostly accomplished through JavaScript.
  2. First thing we want to do is get the slider HTML elements stored as variables so we can use them in our code:
    var slides = document.getElementsByClassName("slide");
    var dotBtn = document.getElementsByClassName("dot");
    var prevBtn = document.getElementsByClassName("prev");
    var nextBtn = document.getElementsByClassName("next");
  3. We will make a single function that will do multiple things. It will go to next slide, go to previous slide, return to the first slide or last slide when you reach the end, and update the dots. Type:
    function showSlide(n) {
       if (n > slides.length) {
          slideNum = 1}
       if (n < 1) {
          slideNum = slides.length}
       for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";}
       for (i = 0; i < dotBtn.length; i++) {
          dotBtn[i].className = dotBtn[i].className.replace(" active", "");}
       slides[slideNum-1].style.display = "block";
       dotBtn[slideNum-1].className += " active";
    }
  4. The function we created is not running because nothing is calling it. Before the function add:
    var slideNum = 1;
    showSlide(slideNum);
    Now it will run initially and create the slide even before a button is pressed.
  5. Let's make the previous and next buttons function:
    for (i = 0; i < prevBtn.length; i++){
       prevBtn[i].addEventListener("click", function() {
          showSlide(slideNum -= 1);});
    }
    for (i = 0; i < nextBtn.length; i++){
       nextBtn[i].addEventListener("click", function() {
          showSlide(slideNum += 1);});
    }
  6. Double check your code with the code to left and make sure it looks the same or similar.
Final Review and Submission
Final Review and Submission
Single Page Site (advanced javascript) Lab
PlayPlay
Instructions
  1. With both components complete. Now is a good time to preview them. Save both documents (index.html & scripts.js) and open index.html in your favorite browser.
  2. It should work similar to the example embedded below (it will be slightly different).
  3. Before you submit you should review your code and Save your file (File > Save), navigate to your file on your Desktop, and double-click it to open and preview it in your browser.
  4. Look for any errors. If there are any, look through your code and fix them. When you are happy, proceed
  5. Remember your site is not just the single HTML document you have created but the root folder and all contents therein. You MUST submit the ENTIRE folder
  6. You cannot submit folders on Blackboard. Instead we can zip the folder and submit that. Navigate to the location of your site folder. Right-click over top of it and select Send to > Compressed (zipped) folder on Windows and Compress on MacOS. A new zipped file will be created
  7. Lastly, log into Blackboard (Here) and click on this course. Inside the course, select Week 03, then the Week 04: Single Page Site (jquery components) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Browser

About Cone

Look upon my majesty

I am Cone

Yup that is all you need to know. I am a sentient primitive object used to direct the public away. In this case I am used as an example.

I have the most amazing thing to tell you if you just read this paragraph....

I am so much more

This is actually not true. I was just trying to draw you into the next paragraph and it worked! Sucker.


Unfortunately the responsive elements of the image and title changing based on side does not function in this preview.

Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

The Single Page Site lab series is now over! You are capable of producing your own responsive framework and components. You should feel free to explore this subject further on your own. That is how you will really cement what you have learned. There are a ton of resources online. Good job!

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
 

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Submit Class 04: Single Page Site (jquery components) Lab on Blackboard