Topics:

• the "Back-up" talk
• user accounts
• meet the lab, lab rules
• meet the computers
• exactly what does "monitors OFF!" mean?
• printing

Students are responsible for saving back-up copies of all their work. It is useful to have a GMail account and a USB drive.

Topics to be Covered

1. PWA Development
2. Google Maps API
3. More Advanced Programming in JS
4. Firebase

Complete these CSS animation tutorials before starting the Animation Assignment.

• Rotate an image in 3D using CSS Perspective and JS
• Falling Text using CSS Animation Property
• Pulsing Circles

Original Source and lots of other little animation projects: 25 cool CSS animation examples to recreate.

Objective:
Design and implement an engaging animated webpage using the skills you learned in the CSS animation tutorials.

---

Assignment Requirements:

1. Concept:

   • Create a theme or purpose for your animated webpage (e.g., a promotional page, a portfolio feature, or a fun interactive animation).

2. CSS Animation Features:
   Your webpage must include:

   • 3D Rotation Animation: Use CSS Perspective and/or JavaScript to animate an object (e.g., an image, card, or text).
   • Text Animation: Implement falling or moving text using the CSS Animation Property.
   • Pulsing Effect: Add at least one pulsing element, like a button or a decorative shape.

3. Additional Enhancements:

   • Include at least two original animations of your own design. Examples: bouncing, fading, sliding, or scaling.
   • Use transitions for smoother effects.
   • Ensure animations are functional on both desktop and mobile views.

4. Technical Requirements:

   • Use HTML, CSS, and JavaScript.
   • Write clear and clean code, using comments to explain your animations.
   • Ensure your webpage is responsive.

5. Presentation:

   • Submit a brief write-up (150-200 words) explaining your design choices, the purpose of your webpage, and how you implemented the animations.

---

Marking Criteria (Out of 45 Marks):

Category	Criteria	Marks
Functionality	All animations work as intended without bugs or errors. No JS errors.	10
Creativity	The design is visually appealing, creative, and original. Animations enhance the user experience.	10
Use of Tutorials	Proper implementation of 3D rotation, falling text, and pulsing circles from tutorials.	10
Additional Features	Includes at least two original animations and smooth transitions.	5
Code Quality	HTML and CSS Validate. Code is well-written, clean, and properly commented.	5
Write-up	Explains your design choices, the purpose of your webpage, and how you implemented the animations.	5

---

Submission Details:

• Submit your HTML, CSS, and JavaScript files and your write up into WearIT > Hand-in > Web Dev 12 > CSS Animation

This assignment is to warm up your Javascript Programming Skills and Responsive Design.

Step 1: Watch Ms. Wear's Video Lesson on How to Write a Hexadecimal Color Code Game.

Step 2: Add functionality so that the game asks exactly 10 questions.

Step 3: Add functionality so that the game there are 3 levels: Level 1 - two choices for the correct answer, Level 2 - four choices for the correct answer, Level 3 - eight choices for the correct answer. Redesign the interface so that it works with all 3 options.

Step 4: Add functionality so that the game has two options: the one shown in the video AND another one where the color code is shown, and the user has to click on the correct color.

Step 5: Host it on Glitch.

Step 6: Turn it into a PWA using these instructions: Web Dev 11 PWA Unit.

Step 7: Hand in on Google Classroom.

Marking Criteria (/40)

• Game From Video Finished, Asks 10 Questions, and Has 3 Levels (/10)
• Second Game Created (Step 4) (/10)
• PWA and Lighthouse Criteria Passed (/5)
• RWD works on Phone and Laptop (/5)
• Overall User Interface (/5)
• Code Quality - HTML and CSS Validate, code clean and commented (/5)

What is Pairs Programming?
Pairs programming is a collaborative software development technique where two programmers work together at the same computer. One is the "driver," who writes the code, while the other is the "navigator," who reviews each line of code and provides suggestions or alternative ideas. The roles are frequently switched during the process.

---

How Pairs Programming Works:

1. Driver:
   The driver is responsible for typing the code. They focus on the immediate task at hand, following the plan and guidelines set by the navigator.

2. Navigator:
   The navigator reviews the code, thinking about the bigger picture. They might suggest improvements, find errors, or think ahead about future code structures. This person guides the driver and ensures the quality and efficiency of the solution.

3. Role Switching:
   Partners should switch roles regularly to maintain engagement and share the cognitive load. This also prevents fatigue and ensures both members stay involved in the process. Ms. Wear usually suggests switching every 5 minutes.

---

Why is Pairs Programming Important?

1. Improved Code Quality:
   With two people working on the same code, mistakes are more likely to be caught early. The navigator's oversight ensures fewer bugs make it into the final product.

2. Better Problem Solving:
   Pairs programming promotes creative brainstorming. Having two perspectives often leads to faster solutions, as one person can offer an alternative approach while the other focuses on implementation.

3. Knowledge Sharing:
   Pairs programming is an effective way to share knowledge between team members. Beginners can learn from more experienced developers, and even seasoned developers can gain new insights from their partner's approach.

4. Increased Efficiency:
   While two people are working on one task, the combined efforts often lead to higher efficiency. The driver benefits from the navigator’s strategic thinking, while the navigator learns from the driver’s coding decisions.

5. Stronger Team Collaboration:
   Pairs programming fosters a sense of teamwork. Communication and collaboration skills improve, making the development process more fluid and enjoyable.

---

Conclusion: Pairs programming is more than just a coding technique—it’s a tool for improving code quality, enhancing collaboration, and accelerating learning. It might feel slow at first, but the benefits of reduced errors and faster problem-solving make it a valuable practice for both beginners and experienced developers.

Objective:

Using Pairs Programming, you and a partner will build an interactive To-Do list application that allows users to add, edit, delete, and mark tasks as completed. The tasks should persist across page reloads by storing them in local storage. Read the W3 Local Storage Tutorial.

---

Steps:

1. Create the basic structure (HTML):

   • Create an index.html file.
   • Inside the body, create a form to input a new task with an input field and a button to add the task.
   • Add a container (e.g., ul or div) where tasks will be displayed.
   • For each task, you will need to display the task name, a checkbox to mark it as completed, an "edit" button, and a "delete" button.

2. Style the application (CSS):

   • Use basic styles to make the To-Do list look neat and easy to interact with.
   • Ensure tasks are visually distinct when marked as completed (e.g., strike-through style for completed tasks).

3. Basic functionality to add with JavaScript:

   • Write a function to add new tasks:

     • Get the task input value.
     • Add the task to the displayed list.
     • Store the new list in local storage.

   • Write a function to delete a task:

     • Add functionality to the delete button for each task.
     • When the delete button is clicked, remove the task from both the list and local storage.

   • Write a function to edit a task:

     • Implement a button that allows the user to edit the text of a task.
     • When editing, update both the task in the list and in local storage.

   • Write a function to mark a task as completed:

     • Add functionality to the checkbox for each task.
     • When checked, mark the task as completed by applying a CSS class (e.g., strikethrough).
     • Store the completion status in local storage to persist the change.

4. Persist tasks across page reloads:

   • When the page loads, use JavaScript to check if there are any tasks saved in local storage.
   • If tasks are found, display them on the page.
   • Ensure the completed tasks' status is also saved and persists across reloads.

---

Advanced Functionality (pick one of the following):

1. Add priority levels: Allow users to assign a priority level to tasks (e.g., Low, Medium, High). Display tasks in order of priority.
2. Search/filter functionality: Implement a search bar to filter tasks based on keywords or completion status.
3. Task deadline: Allow users to set a deadline for tasks, and visually show overdue tasks.

---

Evaluation Criteria (/30):

• Functionality (5 points): All core features work (add, edit, delete, mark as completed).
• Local Storage (5 points): Tasks are saved to and loaded from local storage.
• User Interface (5 points): The application is user-friendly and visually appealing.
• Advanced Functionality (5 points): One of the 3 advanced features is implemented.
• Code Quality (5 points): Practice separation of languages, HTML and CSS Validate and no JS errors in console.
• Pairs Programming (5 points): Pairs Programming principles practiced during entire project development.

An interval timer allows you to set two (or more) periods of time of different lengths. One period is for work (high intensity) and one period is for rest or active recovery (low intensity). By alternating these two time periods, you've set up the intervals of your workout.

A typical HIIT timer has a set number of high intensity intervals separated by low intensity intervals. Optionally, you can provide a warmup and cooldown period by including a duration.

1. Search 'HIIT workout' on Youtube and see the variety of workouts available.
2. Learn about HIIT Training
3. Read Principle of Design
4. Design and write an extremely easy to use responsive HIIT interval timer in JavaScript. Here is an example of a Tabata Timer. Tabata is a very intensive type of hiit workout.
5. Appearance, usability, flexibility, robustness, and application will be considered in the assessment.
6. Turn it into a PWA. Get green in all 4 categories on the Lighthouse test.
7. Submit link on Google Classroom.

Deadlines:

• Prototype 1 - Real User Test tba
• Final Project Due tba

Marking Criteria (/30):

1. Interval Timer Created working interval timer as defined above (/5)
2. Usability as a HIIT Timer for a Specific HIIT Workout - create a HIIT Timer as defined above. Usability refers to ease of programming a specific workout and use during workout . Ms Wear will try and program in a specific workout and do the workout to your timer(/5)
3. Application of Principles of Design to Interface (/5)
4. HTML and CSS Validate, no JS Errors (/5)
5. All PWA Criteria Met and 4 Greens on Lighthouse Test (/5)