Peppa Pig Episode Creator
About this app
Create your own fun Peppa Pig episodes with characters, scenes, and dialogues!
Peppa Pig Episode Creator Peppa Pig Episode Creator Episode Title: Select Character: Select a character Peppa Pig George Pig Succulent Pig Dad Pig Mummy Pig Scene: Dialogue: Add Episode Episode List
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Peppa Pig Episode Creator</title>
<meta name="description" content="Create your own fun Peppa Pig episodes with characters, scenes, and dialogues!">
<meta name="keywords" content="Peppa Pig, episode creator, cartoon, children, stories, fun, interactive, creativity">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
</script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
let episodes = [];
document.addEventListener("DOMContentLoaded", function () {
const addEpisodeButton = document.getElementById("add-episode");
const episodeList = document.getElementById("episode-list");
const titleInput = document.getElementById("episode-title");
const characterSelect = document.getElementById("character-select");
const sceneInput = document.getElementById("scene");
const dialogInput = document.getElementById("dialogue");
addEpisodeButton.addEventListener("click", function () {
const episodeTitle = titleInput.value.trim();
const selectedCharacter = characterSelect.value;
const scenery = sceneInput.value.trim();
const dialogue = dialogInput.value.trim();
if (episodeTitle && selectedCharacter && scenery && dialogue) {
const episode = {
title: episodeTitle,
character: selectedCharacter,
scene: scenery,
dialogue: dialogue
};
episodes.push(episode);
updateEpisodeList();
clearInputs();
} else {
alert("Please fill in all fields!");
}
});
function updateEpisodeList() {
episodeList.innerHTML = '';
episodes.forEach((ep, index) => {
const li = document.createElement("li");
li.className = "list-group-item";
li.innerHTML = `<strong>${ep.title}</strong> - ${ep.character} in ${ep.scene}: "${ep.dialogue}"`;
episodeList.appendChild(li);
});
}
function clearInputs() {
titleInput.value = '';
characterSelect.selectedIndex = 0;
sceneInput.value = '';
dialogInput.value = '';
}
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #f3ec78, #af4261);
color: #444;
}
#main-container {
margin-top: 20px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
h1 {
color: #f39c12;
}
.btn-custom {
background-color: #e74c3c;
color: white;
}
.btn-custom:hover {
background-color: #c0392b;
}
.list-group-item {
background: #fdfdfd;
border: 1px solid #eaeaea;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">Peppa Pig Episode Creator</h1>
<div class="form-group">
<label for="episode-title">Episode Title:</label>
<input type="text" class="form-control" id="episode-title" placeholder="Enter episode title">
</div>
<div class="form-group">
<label for="character-select">Select Character:</label>
<select class="form-control" id="character-select">
<option value="" disabled selected>Select a character</option>
<option>Peppa Pig</option>
<option>George Pig</option>
<option>Succulent Pig</option>
<option>Dad Pig</option>
<option>Mummy Pig</option>
</select>
</div>
<div class="form-group">
<label for="scene">Scene:</label>
<input type="text" class="form-control" id="scene" placeholder="Describe the scene">
</div>
<div class="form-group">
<label for="dialogue">Dialogue:</label>
<input type="text" class="form-control" id="dialogue" placeholder="Enter dialogue">
</div>
<button id="add-episode" class="btn btn-custom">Add Episode</button>
<h3 class="mt-4">Episode List</h3>
<ul id="episode-list" class="list-group"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!