Computer Science 318

Fundamentals of Web Design

Lab 15 Transitions

Goal

Learn

<template> - is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the template element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

<template id="template">
  <div>Click me</div>
</template>

<dialog> - represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. JavaScript should be used to display the <dialog> element.

<dialog>
    <p>Thank you for ordering</p>
</dialog>

<select> - represents a control that provides a menu of options.

<option> - is used to define an item contained in a select.

HTML

<label for="pet-select">Choose a pet:</label> <select name="pets" id="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select>

Preview

p:before{
    content:url(images/image1.jpg);
}
p:after{
    content:url(images/image2.jpg);
}

After and before pseudo classes are used to add content with CSS before or after the content of a HTML element. Before and after can only be used with container elements. This means the element must have an opening and closing tag.

Today you will be using before and after with the content property to add icons to different elements. Content can also be used to add text, quotes, a number counter, or a gradient.

See content property uses here

header{
    background-color:red;
    transition-property:background-color;
    transition-duration:5s;
    transition-timing-function:ease-in;
    transition-delay:1s;
}

CSS Transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

What properties can be transitioned?

ALL OF THESE!

Transition Properties

transition-property:background-color;

transition-property

Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed in the declaration are animated during transitions; changes to all other properties occur instantaneously as usual.

transition-duration:2s;

transition-duration

Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

transition-timing-function:ease-in;

transition-timing-function

Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. Here is a web page showing the various timings you can use.

transition-delay:1s;

transition-delay

Defines the wait between the time a property is changed and the transition actually begins.

transition: <property> <duration> <timing-function> <delay>;

transition

The shorthand CSS declaration for all of the properties above. Below is the order of the values.

So for example, the following two declarations accomplish the exact same thing.

header{
    background-color:red;
    transition-property:background-color;
    transition-duration:5s;
    transition-timing-function:ease-in;
    transition-delay:1s;
}
header{
    background-color:red;
    transition:background-color 5s ease-in 1s;
}

Practice

Experiment Try adding a transition on the <a> for the background color with a 1 second duration with a timing function of ease-in-out. Once you have added the transition hover over the a. Notice how the color takes time changing from light to dark and back again.
Now add a font color of blue to the paragraph when you hover. Then add a transition to the paragraph that will delay the font color for .5 seconds and take .7 seconds to change.

HTML

<a href=https://uwec.edu>UWEC</a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

a{ background-color:#f72127; color:#fff; padding:2rem; display:inline-block; } a:hover{ background-color:#811216; }

Preview

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab15

Create a new files called index.html, about.html, menu.html, and order.html in the lab15 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML files

Change Document in the <title> elements to "Brunch"

Add a <header>, <main> and <footer> on every document.

All HTML documents will have the same header

<header>

All HTML documents will have the same footer

<footer>

Index.html.

In the main

<section> with class of headline

<section> class="purple"

<section> class="gallery"

&lt;

&gt;

Lab 15 - Index setup

About.html

In the main:

<section> class="about"

In the section:

<h2> - About Brunch

<p> - Our Mission - is to satisfy our neighbor's need for coffee and community by providing high quality, direct trade coffee that we all can feel good about.

<img>

<p> - Our Beans - are the result of direct trade. With a handshake, the farmer's crop is purchased for more than they could get on the open market. Through the Friend2Farmer initiative, better coffee is being created, along with a better quality of life for the farmers, their families and their community. Due to the strong relationships being built, we are able to play a part in helping fund local schools and other life-enriching projects within these communities. We believe that nothing's better than waking up and knowing the delicious coffee you're drinking is helping to brew better lives, better coffee and better communities all over the world.

<img>

<p> - Distinctive and Bold - is to inspire a culture of generosity and authenticity; helping to create the kind of community (local + worldwide) that we all want to call home. Locally, by partnering and building strong relationships with local non-profits and businesses to meet the needs of our neighbors. Worldwide, by ensuring that the farmers who provide us our coffee beans, and the communities in which they are apart, are treated equitably.

Lab 15 - About html

Menu.html

In the main:

Add a <section> class="menu" in main

In the section:

h2 - Menu

h3 - Coffee

<table> - In the table add:

In <thead>

<tr>

In <tbody>.
*Each number is a <tr>, each bullet point is a <td> in the row

    • Drip Coffee
    • $1.95
    • $2.45
    • Cafe Au Lait
    • $3.50
    • $4.25
    • Americano
    • $2.75
    • $3.25
    • Cappuccino
    • $4.25
    • $4.55
    • Latte
    • $3.95
    • $4.25
    • Chai
    • $4.45
    • $4.75
    • Matcha
    • $4.25
    • $4.75
    • Mocha
    • $4.75
    • $5.25
    • Cold Brew
    • $3.95
    • $4.45
    • Hot Chocolate
    • $3.00
    • $3.50
    • Shot in the Dark
    • $3.75
    • $3.95
    • Espresso Shots
    • single $2.00
    • double $2.50
    • Cafe con Miel
    • $4.25
    • $4.55
    • Breve
    • $4.55
    • $5.00
    • Dirty Chai
    • $5.25
    • $5.75
    • Peppermint Mocha
    • $5.25
    • $5.75
    • Affogato
    • $7.25
    • $7.75

This is the end of the table

<h3> Waffles

<table>

in the <table> add

In <tbody>.
*Each number is a <tr>, each bullet point is a <td> in the row

    • Waffle (Basic)
    • $6.75
    • Waffle (One-topping)
    • $7.75
    • Waffle (Two-topping)
    • $8.75
    • Lil' Whip
    • $0.25
    • Extra Whip
    • $0.99
    • Extra Topping
    • $0.99

<p> - Toppings: ~ sweetened cream cheese, blueberry pie filling, strawberry pie filling, yogurt, fresh berries, maple syrup, butter, powdered sugar, Oreo crumble, graham cracker crumble, granola, ham, cheddar, lettuce, herb goat cheese, peanut butter, marshmallow fluff, raspberry jam, banana, pecans

Lab 15 - Menu html

Order.html

In the main:

<section> class="order"

In the section:

<form>

In the form:

<h2> - Place Order

<div> with class="cloner"

In cloner <div> add:

<div> with class="container"

<template>

<div>

In template add:

<div> with class="row"

In <div> after </template> add:

<a>

Copy entire cloner div. Then paste it into the <form> after the first cloner div. Change the "<span>+</span> Add Coffee" to "<span>+</span> Add Waffle" in the second cloner div.

In first <div> with class="row" add:

<label> Coffee

<select> - In the select add an <option> for each bullet point. This first part is the content, the second part is the value attribute you need to add to the <option>

<label> - Size

<select> - In the select add an <option> for each bullet point. This first part is the content, the second part is the value attribute you need to add to the <option>

<label> Quantity

<input>

<a> - x

In second <div> with class="row" add:

<label> Waffle

<input>

<label> Topping 1

<select> - In the select add an <option> for each bullet point. This first part is the content, the second part is the value attribute you need to add to the <option>

<label> Topping 2

Copy entire topping 1 select and paste below Topping 2 label

The <a> delete should be after the second select.

Right before the closing </form> add:

- <a>

- <dialog>

In dialog add:

<a>

<p>

Lab 15 - Order Page

In the <head> on each document add the following code to link to two different Google Fonts we will be using

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400&display=swap" rel="stylesheet">

CSS - Mobile

Narrow browser screen to about 500 pixels

body

font-family: 'Oswald', sans-serif;

font-weight 300

margin 1rem

img

max-width 100%

h1

display none

Lab 15 - body and h1 css

header

display flex

justify-content space-between

align-items center

padding 1rem

border-bottom .25rem solid #9a82e8

header img

width 5rem

display block

Lab 15 - Brunch header

nav>a

color #9a82e8

border-bottom 1px solid white

text-decoration none

margin .5rem

nav>a:hover

color #3b325a

border-bottom-color #3b325a

Lab 15 nav css

nav>a

transition: all .2s ease-in-out

section

padding 1rem 2rem

.purple

background-color #9a82e8

color #fff

Lab 15 section css

footer

background-color #9a82e8

padding 1rem

display flex

flex-wrap wrap

justify-content space-between

margin-top 1rem

footer a

color #fff

.social

flex-basis 100%

.social img

width 4rem

margin .25rem

Lab 15 footer css

section.headline

background-image

background-size cover

background-color rgb(23,0,65)

padding 5rem 2rem

color #fff

Lab 15 headline css

.headline h2

font-size 6rem

font-family: 'Bebas Neue', sans-serif;

margin-left 1rem

margin-bottom 0

text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);

.headline p

background-color rgba(0,0,0,.6)

padding 1rem

max-width calc(100% - 2rem)

width 20rem

Lab 15 headline p css

.button

padding .5rem 1rem

border-radius 3rem

background-color #fff

color #3b325a

text-decoration none

display inline-block

box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);

cursor:pointer;

font-family: 'Bebas Neue', sans-serif;

border none

button:hover

box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.6);

Lab 15 button css

Go to order.html and look at the submit button. It needs a different background color and font color

form .button

background-color #9a82e8

color #fff

Lab 15 - Order button

Back to index page

Create new file called scripts.js and paste in code below.

// gallery component
document.addEventListener('DOMContentLoaded', function(){
	var rotate = function(component, step){
		// figure out width of container
		var slide = component.querySelector('.slide');
		let slideWidthVw = ((slide.offsetWidth / document.documentElement.clientWidth)-1) * 100;
		var left = Number(slide.style.left.replace('vw', ''));
		left += step * 100;
		if(left > 0) left = 0;
		if(left < -slideWidthVw) left = -slideWidthVw;
		slide.style.left = left+'vw';
	};

	var components = document.querySelectorAll('.gallery');
	for(var i = 0; i < components.length; i++){
		var component = components[i];
		component.querySelector('.left').addEventListener('click', function(){
			rotate(component, 1);
		});
		component.querySelector('.right').addEventListener('click', function(){
			rotate(component, -1);
		});
	}
});

Add <script src="scripts.js"></script> to the index.html <head>

.gallery

position relative

width calc(100% - 4rem)

max-width 100%

height calc(100vw / 1.778)
Hint: This is the calculation for a 16:9 aspect ratio

.gallery .slide

display flex

position absolute

top 0

left 0

margin-top 1rem

Now you should have horizontal scroll bar. We will eliminate that with the overflow property.

.gallery

overflow:hidden;

.gallery .slide

overflow:hidden;

.arrow

position absolute

font-size 3rem

font-family: 'Bebas Neue', sans-serif;

color #fff

text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);

cursor pointer

z-index 1

top calc(50% - 1.5rem)

.left

left .5rem

.right

right .5rem

.gallery img

max-width 100.025vw

height calc(100.25vw / 1.778)

Lab 15 arrow css

If you have everything setup correctly you will be able to click on the arrows to move the images.

Look at the menu page now for the CSS

td, th

padding .25rem .75rem

td:first-child, th:first-child

text-align right

h3

background-color #9a82e8

color #fff

padding .25rem 0 .25rem .25rem

Lab 15 h2 styles

.menu h2, .about h2, .order h2

padding 2rem 0

text-align center

position relative

.menu h2:after, .menu h2:before, .about h2:before, .about h2:after, .order h2:after, .order h2:before

position absolute

width 5rem

height 5rem

top .5rem

.menu h2:after, .about h2:after, .order h2:after

right 0

.menu h2:before, .about h2:before, .order h2:before

left 0

.menu h2:after, .menu h2:before

content

.about h2:after, .about h2:before

content

.order h2:after, .order h2:before

content

width 2rem

top 1.5rem

Lab 15 Menu before and after

Look at Order page

In the scripts.js paste in code below.

document.addEventListener('DOMContentLoaded', function(){
	document.querySelectorAll('.cloner').forEach(function(cloner){
		cloner.querySelector('.add-button').addEventListener('click', function(e){
			cloneRow(cloner);
		});
		cloneRow(cloner);
	});
});

function cloneRow(cloner){
	let container = cloner.querySelector('.container');
	let template = cloner.querySelector('template');
	let clon = template.content.cloneNode(true);
	container.appendChild(clon);
}

function removeRow(e){
	let button = e.target;
	let row = button.closest('.row');
	row.remove();
}

Add <script src="scripts.js"></script> to the order.html <head>

form

padding 1rem

.row

display flex

gap .5rem

align-items center

flex-wrap wrap

margin .5rem 0

background-color #ebebeb

padding .5rem 2rem .5rem .5rem

position relative

Lab 15 form css

.delete, .close

background-color rgb(255,49,49)

color #fff

border-radius 1rem

text-align center

font-family sans-serif

padding .25rem .5rem

pointer cursor

Lab 15 delete button

.delete:hover, .close:hover

background-color rgb(171,36,36)

.delete, .close

transition background .2s ease-in-out.
Hint: The word background will be red in VSC, don't sweat it. It is still valid.

.delete, .close

position absolute

top .5rem

right .5rem

.add-button

cursor pointer

display inline-block

margin 0 0 .5rem

.add-button>span

color #9a82e8

font-size 1.25rem

transition color .2s ease-in-out

.add-button>span:hover

color #3b325a

Lab 15 form css delete button

*You should be able to click on Add Coffee or Add Waffle to add another row in the form, or click on delete to remove a row.

Lab 15 Order Javascript demo

In the scripts.js paste in code below.

//dialog box
document.addEventListener("DOMContentLoaded", function(){
	document.querySelector('form a[href="#"]').addEventListener('click', function(){
		document.querySelector('form dialog').classList.toggle('show');
	});
	document.querySelector('.close').addEventListener('click', function(){
		document.querySelector('form dialog').classList.toggle('show');
	});
});

dialog.show

display block

Lab 15 dialog box

*Now when you click on Order a box should display saying Thanks

dialog.show

position absolute

top 50%

z-index 2

background color #9a82e8

color #fff

padding 2rem

form

position relative

dialog p

margin 0

Lab 15 Dialog box finished

CSS - Desktop

Add media query for 1000px - All CSS from here will be in the media query

.gallery img

max-width 50vw

height calc(50vw / 1.778)

.gallery

height calc(50vw / 1.778)

Lab 15 gallery css desktop

.about

display grid

grid-template-columns 2fr 1fr

gap 1rem

.about h2

Use grid-column to get the h2 to span two columns

.about img:nth-child(3)

grid-area:2/2/4/3

.about img:nth-child(5)

grid-area:4/2/6/3

Lab 15 About desktop css

section

max-width 50rem

margin 1rem auto

Lab 15 index finished

Lab 15 Menu page

Lab 15 About page

Lab 15 Order page

Final Steps

Validate your HTML.

Lint your CSS at jigsaw.w3.org. This is a new up to date validator.

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab15 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab15