Dino-rmous carousel
What & why
In order to write effective programs we need to be able to piece together things from many disparte sources.
There are always many ways to solve a problem, we need to determine what pieces of our knowledge apply.
Understanding how to combine the many different sources of knowledge leads to effect programming.
Set up
- This is an individual coding activity
- Fork & clone this repo
- We’re going to work together & separately to each create a unique carousel
The process:
We’ll walk through each question together and come up with a solution for each individual carousels.
- How should the carousel look?
- How should the carousel function?
- What HTML is necessary?
- What basic CSS is necssary?
- What should the JavaScript do?
- Make the JS do its thing!
How should the carousel look?
- Will it have next/previous buttons?
- Will it have the navigation dots?
- Will it have text for each item?
Create a very basic wireframe sketch.
How should the carousel function?
- Will the items slide in? Slide down?
- Will the items simply replace the previous?
- Will one item fade into another?
Create a very small storyboard.
What HTML is necessary?
- What tags will be needed?
- How are the buttons created semantically?
- Do the
<img>tags have surrounding<div>or<figure>tags?
Code out the necessary HTML.
What basic CSS is necssary?
- Do the items need to be
absolute? - Do the items need to be side-by-side?
- How are the buttons positioned on the screen?
Code out the necessary CSS.
What should the JavaScript do?
- Does the carousel run automatically?
- What maniplulations to the HTML need to be made?
- How do the buttons change the slide, CSS-wise?
Write, in English, what the JS is doing.
Make the JS do its thing!
- What order does the code need to be in?
- What elements in the HTML need to be selected?
- What CSS classes need to be manipulated?
Write, in a new JS file, the necessary code.
jQuery
// Select an HTML tag; using CSS selectors
$('.dino')
// Add a class to an element
.addClass('visible')
// Remove a class from an element
.removeClass('visible')
// Add or remove a class
.toggleClass('visible')
// Check if an element has a class
.hasClass('visible')
// Get an HTML element’s attribute
.attr('href');
// Change the element’s attribute
.attr('data-state', 'hidden');
jQuery
// Count how many elements are selected
$('img').length();
// Get an element’s parent
$('.dino').parent();
$('.dino').parents('figure');
// Find element children
$('.dino').find('figcaption');
// Replace HTML inside element
$('.dino').html('<img src="" alt="">');
// When an HTML element is clicked
$('.dino').on('click', function () {
// Do maniplulations here…
});
JavaScript
// Make a new variable
var count = 0;
// Add onto a variable
count++;
// Change a variable
count = 1;
// Code branching: if-statement
if (count < 10) {
// True path
} else {
// False path
}
jQuery
// Use a variable
$('.dino').eq(count).attr('src');
// Combine plain JavaScript with pre-written jQuery functions
$('.btn').on('click', function () {
if (count <= 3) {
$('.dino').eq(count).addClass('thing');
} else {
$('.dino:first-child').addClass('thing');
}
});