Dev em Dobro Watch on YouTube

Intensivo do Zero ao Código: Construindo um projeto de programação completo - PROJETO ONE PIECE

3 min read 6 months ago

Published on Aug 17, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial guides you through creating a complete programming project inspired by One Piece using HTML, CSS, and JavaScript. You'll learn step-by-step how to build a character selector website from scratch, making it a great resource for beginners looking to enhance their web development skills.

Step 1: Set Up Your Project

Create a new folder on your computer for the project.
Inside this folder, create three subfolders:
- html
- css
- js
In the html folder, create an index.html file.
In the css folder, create a styles.css file.
In the js folder, create a script.js file.

Step 2: Structure Your HTML

Open the index.html file and set up a basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/styles.css">
    <title>One Piece Character Selector</title>
</head>
<body>
    <header>
        <h1>One Piece Character Selector</h1>
    </header>
    <main>
        <div id="character-select">
            <!-- Character options will be added here -->
        </div>
    </main>
    <script src="../js/script.js"></script>
</body>
</html>

This sets up the header and main section where the character selector will be displayed.

Step 3: Style Your Page with CSS

Open the styles.css file and add styles for your header and main sections:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

#character-select {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

This will give your page a clean and organized look.

Step 4: Add Character Data in JavaScript

Open the script.js file and create an array of character objects:

const characters = [
    { name: "Monkey D. Luffy", image: "luffy.jpg" },
    { name: "Roronoa Zoro", image: "zoro.jpg" },
    { name: "Nami", image: "nami.jpg" },
    // Add more characters as needed
];

Ensure you have images corresponding to the characters in a folder accessible from your project.

Step 5: Dynamically Generate Character Elements

In the script.js file, write a function to display characters:

function displayCharacters() {
    const characterSelectDiv = document.getElementById('character-select');
    characters.forEach(character => {
        const charDiv = document.createElement('div');
        charDiv.innerHTML = `
            <h2>${character.name}</h2>
            <img src="${character.image}" alt="${character.name}" />
        `;
        characterSelectDiv.appendChild(charDiv);
    });
}

displayCharacters();

This function loops through the character array and creates HTML for each character.

Step 6: Test Your Project

Open index.html in a web browser to see your character selector in action.
Ensure that all images load correctly and that the layout appears as intended.

Conclusion

In this tutorial, you've learned how to create a character selector website using HTML, CSS, and JavaScript. You structured your project, styled it, and dynamically generated content using JavaScript. As a next step, consider adding interactive features, such as a selection mechanism or additional character details. Keep experimenting and expanding your skills in web development!

Table of Contents

Recent