Rick And Morty Characters: College Project Repository

by Alex Johnson 54 views

Hey there, fellow students and Rick and Morty enthusiasts! 👋 Are you ready to dive into a fun and engaging college project? This article will guide you through the creation of a dynamic character display for the popular animated show, using HTML, CSS, JavaScript, and the Rick and Morty API. We'll explore how to fetch data, style the content, and create an interactive user experience. This project isn't just about coding; it's about bringing your favorite characters to life on the web! Let's get started!

Setting Up the Project: The Foundation

First things first, let's create the basic structure. We'll start with the HTML file (index.html). This file will define the overall layout, including the header, main content area, and any loading indicators or error messages. Make sure you have a good code editor (like VS Code or Sublime Text) to help with coding.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rick and Morty — Personagens</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Personagens de Rick and Morty</h1>
        <p>Desenhos animados dos anos 90/2000 - Dados em tempo real da API</p>
    </header>
    <main>
        <div id="controls">
            <div id="loading" class="loading hidden" role="status" aria-live="polite">Carregando personagens...</div>
            <div id="error" class="error hidden" role="alert"></div>
        </div>
        <div id="characters-container" aria-live="polite"></div>
    </main>
    <script src="js/script.js" defer></script>
</body>
</html>

In this initial structure, we've set up the basic HTML elements: a header for the title, a main section to hold our character cards, and a script tag to link our JavaScript file (script.js). The <link> tag is crucial as it connects our CSS file (style.css), which handles the design and appearance of our character cards. The use of defer in the script tag ensures that the JavaScript runs after the HTML has been parsed, which is a good practice.

Ensure that you save this HTML file in your project directory. Also, make sure to create the css folder and the js folder, which will be where you will save the css and javascript files respectively. This structure helps you stay organized and makes debugging easier. Think of the HTML as the bones of your project, the structure upon which everything else is built. Proper setup is important for everything to work seamlessly.

Styling with CSS: Giving it Some Flair

Next, let's add some style! The style.css file is where you’ll put all of your design choices. Here's a basic CSS structure to get you started. This will help you get familiar with styling elements and creating a visually appealing experience.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    color: #333;
}
header {
    text-align: center;
    background-color: #4CAF50;
    color: white;
    padding: 20px;
}
main {
    padding: 20px;
    display: flex;
    justify-content: center;
}
#characters-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}
.character-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s;
}
.character-card:hover {
    transform: scale(1.05);
}
.character-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.character-card h3 {
    margin: 10px 0;
    font-size: 1.2em;
}
.character-card p {
    margin: 5px 0 15px;
    color: #666;
}

With this CSS, we've set up a clean and functional design. The background, fonts, and card styles are all defined here. We've utilized grid to create a responsive layout that adapts to different screen sizes, which is important for a good user experience. The hover effect on the character cards adds a touch of interactivity.

Experiment with different colors, fonts, and layouts to customize your character cards and make them visually appealing. Consider using CSS variables for colors, which allows for easier modification and theming. Understanding CSS is vital for controlling how your project looks. Don't be afraid to experiment, that's the best way to learn!

Fetching Data with JavaScript: Bringing in the Characters

Time to bring the characters to life! This is where the JavaScript magic happens. In script.js, we'll use the Rick and Morty API to fetch character data and dynamically create the character cards.

const container = document.getElementById('characters-container');

// Função para consumir a API
async function fetchCharacters() {
    try {
        const response = await fetch('https://rickandmortyapi.com/api/character');
        const data = await response.json();
        displayCharacters(data.results);
    } catch (error) {
        console.error('Erro ao consumir a API:', error);
    }
}

// Função para exibir os personagens
function displayCharacters(characters) {
    characters.forEach(character => {
        // Criar elementos dinamicamente
        const card = document.createElement('div');
        card.classList.add('character-card');

        const img = document.createElement('img');
        img.src = character.image;
        img.alt = character.name;

        const name = document.createElement('h3');
        name.textContent = character.name;

        const status = document.createElement('p');
        status.textContent = `Status: ${character.status} | Espécie: ${character.species}`;

        // Anexar ao card
        card.appendChild(img);
        card.appendChild(name);
        card.appendChild(status);

        // Anexar ao container
        container.appendChild(card);
    });
}

// Chamar a função ao carregar a página
fetchCharacters();

This script fetches character data from the API using the fetch function. It then parses the JSON response and calls the displayCharacters function. The displayCharacters function dynamically creates HTML elements for each character, including an image, name, and status. It then appends these elements to the container in the HTML. The use of async and await makes the code clean and easy to read. Error handling is also included to catch any potential issues.

The fetchCharacters() function uses the fetch API to retrieve data from the Rick and Morty API. This is a key part of your project. If you're new to APIs, don't worry! They are essentially a way to get data from a server. The API then returns a list of characters, and your script processes this data and displays it on your page.

Making it Interactive: Enhancing the User Experience

To make your project even better, consider adding features like character filtering and searching. You can add a search bar where users can type in a character's name to find them quickly. For filtering, you can provide options to filter characters based on their status (Alive, Dead, Unknown) or species (Human, Alien, etc.). These features require you to modify your JavaScript to handle user input and filter the characters displayed accordingly.

For the search functionality, you can use the .filter() method to sift through your data. For the filter, you can create dropdown menus that update your content based on the selected option. These additions can significantly improve the usability and overall appeal of your project.

Advanced Features

If you want to go the extra mile, try implementing the following features:

  • Character Details: Add the ability to click on a character card to view more detailed information, such as their origin, location, and episodes they appear in. You would need to make another API call to fetch this detailed information.
  • Pagination: Implement pagination to handle a large number of characters. The Rick and Morty API supports pagination, so you can fetch characters in smaller batches.
  • Error Handling: Improve error handling to provide more informative messages to the user if the API request fails.

These advanced features will showcase your programming skills and help you create a more complete and professional project.

Conclusion: Your College Project Adventure

And there you have it! 🎉 You've learned how to create a dynamic Rick and Morty character display using HTML, CSS, and JavaScript. From setting up the HTML structure to fetching data from an API and styling the character cards, you've covered a lot of ground. Remember, the best way to learn is by doing. Experiment with the code, try new things, and make the project your own.

By building this project, you've gained practical experience with essential web development technologies and learned how to work with APIs. This project is a great addition to your portfolio and a fun way to show off your skills. Keep learning, keep building, and most importantly, have fun! Happy coding!

For more in-depth information about APIs and web development, check out the resources below:

This project not only enhances your coding skills but also lets you show off your passion for Rick and Morty. Happy coding! 😉