Project 4: Adding Animations and Interactivity

Instructions:

Start with Your Project 3 Files:

• Create a new folder named "Project4"
• Copy your three HTML files and styles.css from Project 3 into this folder

Add CSS Animations:

• Add these animation styles to your CSS file:

  
  /* Hover effects */
  nav a:hover {
      transform: scale(1.1);
      transition: transform 0.3s ease;
  }
  
  /* Fade in animation */
  section {
      animation: fadeIn 1s ease-in;
  }
  
  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  
  /* Smooth transitions */
  img {
      transition: transform 0.3s ease;
  }
  
  img:hover {
      transform: scale(1.05);
  }
                

Add JavaScript:

• Create a new file named "script.js" and add this code:

  
  // Add a click counter to each page
  let clickCount = 0;
  
  document.addEventListener('click', function() {
      clickCount++;
      if (clickCount === 5) {
          alert('You've clicked 5 times!');
          clickCount = 0;
      }
  });
                

• Add this line before the closing </body> tag in each HTML file:

  
  <script src="script.js"></script>
                

Test Your Website:

1. Run Your Project with Live Server:
   • Right-click on your "index.html" file
   • Select "Open with Live Server"
   • This will open your web page in your browser
2. Check that all animations work on each page
3. Test the click counter on each page
4. Make sure everything still works on mobile devices

Submission:

• Make sure your Project4 folder contains:
  • index.html file
  • page2.html file
  • page3.html file
  • styles.css file
  • script.js file
• Compress your "Project4" folder into a zip file
• Submit your zip file here: Submit Project 4