Demo Mode

Quote of the Day

:information_source: Info Project Information Difficulty Level: Beginner
Estimated Time: 30-45 minutes
Skills Practiced:

DOM manipulation
Working with object properties
Using external APIs (LottieFiles)
String handling with escape characters

Download your material

What you'll do: Open the project and familiarize yourself with the interface

Open the StackBlitz template: Quote of The Day
Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

Package files
Any other files you didn't create

ONLY EDIT the necessary files.

Project Overview

Let's create a "Quote of the Day" website with animations!

Find a quote that you like from brainyquote.com or write your own quote.
Find an animation you like from lottiefiles.com. All you need is the src link of the animation.

:emoji:️ Project Roadmap

mermaid

graph LR
    A[Phase 1: Setup] --> B[Phase 2: Find Resources]
    B --> C[Phase 3: Code Implementation]
    C --> D[Phase 4: Test & Submit]
    
    style A fill:#e1f5fe
    style B fill:#ffecb3
    style C fill:#c8e6c9
    style D fill:#f8bbd0

Phase Breakdown:

Setup (5 min): Open the template and explore the files
Find Resources (10 min): Choose your quote and animation
Code Implementation (20 min): Write JavaScript to update the page
Test & Submit (10 min): Verify everything works and submit

Challenge Instructions

Here is the challenge:

You are given the index.html code for this project and you must not change or remove any code in the index.html file.
You must use DOM to change the default "Loading quote" to your own quote.
You must also use DOM to set the attribute of the <lottie-player> tag src attribute to any animation link you like.

:warning: Common Pitfalls to Avoid

Don't modify the HTML file - All changes must be done through JavaScript!

Remember to use escape characters - If your quote contains quotes, use \" to escape them

Check your animation link - Make sure you copy the full src URL from LottieFiles

Script placement matters - Ensure your JavaScript runs after the DOM is loaded

:emoji: Milestone Checkpoint #1

Before moving to find your animation, ensure you:

Have opened the StackBlitz template
Can see the "Loading quote" text on the page
Have located the script.js file where you'll write your code

Finding Animation

Search for an animation you like from lottiefiles.com.

tip Pro Tip Choose an animation that matches the mood of your quote! For inspirational quotes, try searching for:

"star", "success", or "rocket" animations
"nature" or "sunrise" for peaceful quotes
"heart" or "smile" for happiness quotes

To get the src link of your preferred animation, click on Use this animation in <HTML>:

You will be directed to the Generated Code page of the animation. The src link is the first row:

:information_source: Info What to Look For The src link should look something like this:

vbnet

https://lottie.host/...long-string-of-characters...json

Copy the entire URL!

If you have done it correctly, it should look something like this:

:emoji: Milestone Checkpoint #2

Before coding, make sure you have:

Selected a meaningful quote (with the author's name)
Found an animation that complements your quote
Copied the complete src URL from LottieFiles

Tips

2. Handling Quotes Within Quotes

To use double quotes in a string, you can write with the escape character \":

javascript

// Example: A quote that contains quotation marks
const myQuote = "Einstein said, \"Imagination is more important than knowledge.\"";

Learn about escape characters

3. Setting the Animation Source

Use the .setAttribute method to set the src with the animation link:

javascript

// Example: Set an attribute on an element
element.setAttribute('src', 'your-animation-url-here');

Learn more about setAttribute

tip Best Practice Always test your code step by step! First change the quote, then add the animation. This makes debugging easier.

:bug: Debugging Tips

Having trouble? Here's a debugging checklist:

Quote not appearing?
- Check if you selected the correct element ID
- Verify your quote string is properly formatted
- Open the browser console (F12) to check for errors
Animation not loading?
- Ensure you copied the complete URL
- Check if the URL starts with https://
- Try the URL directly in your browser first
Nothing happens when you run the code?
- Make sure your script.js file is saved
- Refresh the preview window
- Check that you're editing the right file

:warning: Remember The most common mistake is forgetting to save your changes! Always save (Ctrl+S or Cmd+S) before testing.

Advanced Challenge

Rather than write the quote and the author directly in the .text-content property, let's use an object variable to hold the value of the quote, the author and the link of the animation too.

Tips:

At the top, create an object variable called myQuote with 3 properties:

javascript

// Structure your object like this:
const myQuote = {
    quote: "Your inspiring quote here",
    author: "Author Name",
    link: "https://lottie.host/your-animation-url.json"
};

Then use the object properties to update your page:

javascript

// Example of using object properties
document.getElementById('quote').textContent = myQuote.quote + " - " + myQuote.author;

tip Why Use Objects? Objects help organize related data together. This makes your code cleaner and easier to update - you only need to change values in one place!

:rocket: Extension Challenges

Ready for more? Try these extra challenges to level up your project:

Challenge One: Random Quote Generator

Create an array of quote objects and display a random one each time the page loads:

javascript

const quotes = [
    { quote: "Quote 1", author: "Author 1", link: "animation1.json" },
    { quote: "Quote 2", author: "Author 2", link: "animation2.json" },
    // Add more quotes...
];

Challenge 2: Add a Button

Add a button that changes the quote when clicked (you'll need to modify the HTML for this advanced challenge).

Challenge 3: Style Enhancement

Use JavaScript to add CSS classes that create a fade-in effect when the quote appears.

Challenge 4: Time-Based Quotes

Display different quotes based on the time of day (morning, afternoon, evening).

:information_source: Info Going Beyond These extension challenges require additional JavaScript concepts. Don't worry if they seem difficult - they're meant to inspire you to keep learning!

:emoji: Final Milestone Checkpoint

Before submitting, verify:

Your quote displays correctly (with proper formatting)
The animation loads and plays
You've tested in the preview window
Your code is clean and commented
You've saved all your changes

Project Submission

:tada: Congratulations! You've built your own Quote of the Day website with animations!

When you have completed your "Quote of the Day" project, submit it using the link below:

Submit Your Project Here

tip Before You Submit Make sure to test your webpage before submitting to ensure all required elements are working properly! Share your project with a friend or family member - they'll be impressed by what you've created!

What You've Learned

Through this project, you've gained valuable skills in:

DOM Manipulation - Changing webpage content with JavaScript
Working with Objects - Organizing data efficiently
External Resources - Integrating animations from LottieFiles
Problem Solving - Debugging and fixing issues

Keep coding and creating amazing projects! :rocket:

Project 2: Quote of The Day

Project 2: Quote of The Day