Home
Guest book / comments widget:
DOWNLOAD | Guest book scripts (PHP/JS) | v1.3instructions:
- download & extract zipped folder inside your project3/ -folder
- upload all the files to your server
- test guest book under project3/guestbook/index.php
- embed the guest book via iframe in your website:
<iframe style="width: 300px; overflow-x: hidden; height: 300px; overflow-y: scroll;" src="./guestbook/" frameborder="0"></iframe>
DEMO:
NOTE: to see it embedded -> Check out Exercise demo 3.5...at the bottom inside the widget
Gotcha: Fixing the fixed position of the header & nav on mobile!
Add these 2 lines to the head sections of your 2 index files (en & fr):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
ex 3.5 basic SPA & Weather Widget
Include this weather widget via iframe and change it to the park's location
<iframe id="weather" src="../openweathermap/index.html" frameborder="0"></iframe>
ex 3.4 basic SPA & Language Switch
Make site bilingual
ex 3.3 basic SPA & @media -queries
Make web site responsive...
ex 3.2 basic SPA & Scroll Animation
Include animations based on scrolling.
ex 3.1 basic SPA
Create a demo page for a basic SPA.
SPA + PWA (French course collab)
Description
In Teams of 2-3, or alone, create a bilingual single page app (SPA) promoting a NATIONAL PARK activity, adventure, park. (Or equivalent for a museum / public institution of your choice)
Create a one-page design that visually represents "pages" or sections.
Integrate SPA features and technologies like the fetch API, animation, smooth scrolling.
Your site should promote outdoor activities, destinations or adventures, ideally for the upcoming spring and summer seasons.
The tone & POV should be aimed at the user i.e. You can tour some of the world's most magnificent fjords by bike. vs We offer bike tours through some of the world's most magificent fjords.
Add a way to collect user input (as in a database). It can be a poll, favourites, comments, contact info or similar.
Tasks
- call(s) to action
- description of the destination (park)
- description of activities, adventures (2 each, 4 total)
- ability to switch between languages (ideally without losing your position on the page)
- SPA features including:
- "page" sections
- smooth scrolling (css)
- animations on scroll (js)
- fetch( ) API
- routing (optional)
- location with directions using the mapping API
- testimonials? client list?
- sign up? reservations? contest? comments?
Don't panic - we'll go step-by-step,
Peter
FIND A NATIONAL PARK:
National Parks Canada
National Parks Quebec
National Parks USA
Web4://SPAs & Mobile Apps @WS2022
Section 1:
MarkAlyssa
Jérémy
Hanif
Tracy
Julian
Eleni
Makaela
Julius
Michael
Damian
Iliyana
Jason
section 2:
ZeynepAmanda
Robin
Christopher
Kayla
Bianca
Veronica
Florence
Ezrie
Angelica
Berj
Jessica
Isabella
Minh
Maham
Dylan
API Demos
cat-apicocktail-api
wine-api
cat-api
mealdb-api
monster-sanctuary
news-api
to be continued...
