Extra. Discuss a key learning or journey you experienced as a result of student lessons. Describe something from lessons that you plan to user or apply in future project.
A basic example of implementation
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barbie Characters</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
body {
background-color: #ffe1f4; /* Barbie Pink */
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
border: 1px solid #e66b8f; /* Barbie Pink */
padding: 10px;
text-align: left;
}
th {
background-color: #ff8bbd; /* Barbie Pink */
color: white;
}
button {
background-color: #ff8bbd; /* Barbie Pink */
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
}
button:hover {
background-color: #e66b8f; /* Lighter Barbie Pink */
}
</style>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Player</th>
<th>Team</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Data will be dynamically added here -->
</tbody>
</table>
<button id="create-btn">Add New Player</button> //creates
<script>
const initialData = [
{ id: 1, player: 'Lebron James', team: 'Lakers' },
{ id: 2, player: 'Steph Curry', team: 'Golden State Warriors' }
];
function renderData(data) {
const tableBody = $('#data-table tbody');
tableBody.empty();
data.forEach(item => {
const row = `
<tr>
<td>${item.id}</td>
<td>${item.player}</td>
<td>${item.team}</td>
<td>
<button class="update-btn" data-id="${item.id}">Update</button>
<button class="delete-btn" data-id="${item.id}">Delete</button>
</td>
</tr>
`;
tableBody.append(row);
});
}
function createBarbieCharacter() {
const newPlayer = prompt('Enter the name of the Player:');
const newTeam = prompt('Enter the name of the Team:');
const newId = initialData.length > 0 ? initialData[initialData.length - 1].id + 1 : 1;
const newData = [...initialData, { id: newId, player: newPlayer, team: newTeam }];
renderData(newData); //read, generate rows based on the data
}
$('#create-btn').on('click', createBarbieCharacter);
$('#data-table').on('click', '.delete-btn', function() { //delete
const idToDelete = $(this).data('id');
const newData = initialData.filter(item => item.id !== idToDelete);
renderData(newData);
});
$('#data-table').on('click', '.update-btn', function() { //update
const idToEdit = $(this).data('id');
const updateIndex = initialData.findIndex(item => item.id === idToEdit);
// Assuming you want to prompt the user for new values
const newPlayer = prompt('Enter the updated Player:');
const newTeam = prompt('Enter the updated Team:');
// Update the data
initialData[updateIndex].player = newPlayer;
initialData[updateIndex].team = newTeam;
// Re-render the table
renderData(initialData);
});
// Initial rendering
renderData(initialData);
</script>
</body>
Extra. Discuss a key learning or journey you experienced as a result of student lessons. Describe something from lessons that you plan to user or apply in future project.
A basic example of implementation
Runtime