Peppa Pig Characters

Info

Created On: July 29, 2023

Created By: @CalculatorTools

AI

Model: gpt-3.5-turbo-16k-0613

Time: 18 seconds

Prompt Tokens: 1243

Completion Tokens: 1323

Total Token Cost: 2566

Get This App On Your Website

<iframe src="https://calculators.tools/prompt/516c59b88e0ea682d436454529ada45e/iframe/" width="100%" height="100%" frameborder="0" scrolling="yes" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-downloads allow-presentation allow-pointer-lock allow-orientation-lock" allowfullscreen="true" allowpaymentrequest="true" frameborder="0"></iframe><br><a href="https://calculator.tools/prompt/2541/" target="_blank" style="font-size: 12px; text-decoration: none;" alt="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools" title="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools">Powered by Calculator Tools</a>

1. Copy the code above with the iframe and link.
2. Paste the code into your website.
3. Resize the iframe to fit your website.

Javascript, HTML, CSS Code

                    <html>

    <head>

		<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>



        <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 Characters</title>

        <meta name="description" content="Peppa Pig Characters">

        <meta name="keywords" content="Peppa Pig, Characters, Quotes, Episode Name">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <style>

            body {

                background-color: #f9f9f9;

                font-family: 'Roboto', sans-serif;

                color: #333;

            }



            .container {

                padding-top: 20px;

            }



            .card {

                margin-bottom: 20px;

                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

                transition: 0.3s;

            }



            .card:hover {

                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

            }



            .card-header {

                background-color: #ff5a5f;

                color: #fff;

                padding: 10px;

            }



            .card-body {

                padding: 20px;

            }



            .card-title {

                margin-bottom: 10px;

                font-size: 20px;

                font-weight: bold;

            }



            .card-text {

                margin-bottom: 20px;

                line-height: 1.5;

            }



            .btn {

                background-color: #ff5a5f;

                color: #fff;

                border: none;

                padding: 10px 20px;

                cursor: pointer;

                transition: background-color 0.3s;

            }



            .btn:hover {

                background-color: #cc4b50;

            }

        </style>

    

	<link rel="canonical" href="https://calculator.tools/prompt/2541/">

	<meta charset="utf-8">

</head>

    <body>

        <div id="main-container" class="container">

            <div id="character-list"></div>

        </div>



        <script type="text/javascript">

            // Character Data

            var characters = [

                {

                    name: "Peppa",

                    actor: "Harley Bird",

                    quote: "I'm Peppa Pig!",

                    episode: "Muddy Puddles",

                    biography: "Peppa is a loveable, cheeky little piggy who lives with her little brother George, Mummy Pig and Daddy Pig. Peppa's favorite things include playing games, dressing up, days out and jumping in muddy puddles. Her adventures always end happily with loud snorts of laughter.",

                },

                {

                    name: "George",

                    actor: "Oliver May & Alice May",

                    quote: "Dinosaur!",

                    episode: "The New Car",

                    biography: "George is Peppa's little brother. He loves playing with his big sister, Peppa, even though sometimes she can be a bit bossy. George's favorite thing is his toy dinosaur. He carries it everywhere with him and it goes on all of his adventures with Peppa.",

                },

                {

                    name: "Daddy Pig",

                    actor: "Richard Ridings",

                    quote: "I'm an expert at everything!",

                    episode: "Daddy Pig's Birthday",

                    biography: "Daddy Pig is Peppa and George's daddy. He is very jolly and laughs all the time, especially when he plays with Peppa and George. Daddy Pig reads the paper and gets excited about trips in the car. He loves cookies and pumpkin pie. Daddy Pig is a bit clumsy, but he always tries his best.",

                },

                {

                    name: "Mummy Pig",

                    actor: "Morwenna Banks",

                    quote: "I'm Mummy Pig!",

                    episode: "Mummy Pig at Work",

                    biography: "Mummy Pig is Peppa and George's mummy. She is very wise and takes good care of Peppa and George. Mummy Pig loves jumping in muddy puddles, just like Peppa. She also enjoys gardening and making pancakes. Mummy Pig is kind and caring, and she always knows how to make everyone feel better.",

                },

                // Add more characters here...

            ];



            // Generate Character Cards

            $(document).ready(function() {

                var characterList = $("#character-list");

                characters.forEach(function(character) {

                    var card = $("<div>").addClass("card");



                    var cardHeader = $("<div>").addClass("card-header").text(character.name);

                    card.append(cardHeader);



                    var cardBody = $("<div>").addClass("card-body");

                    var cardTitle = $("<h5>").addClass("card-title").text(character.name);

                    var cardText = $("<p>").addClass("card-text").text(character.biography);

                    var quoteButton = $("<button>").addClass("btn").text("Make Quote and Episode Name and Biography about the character");



                    cardBody.append(cardTitle, cardText, quoteButton);

                    card.append(cardBody);



                    characterList.append(card);

                });



                // Generate Character Quote, Episode Name, and Biography

                $(".btn").click(function() {

                    var characterName = $(this).siblings(".card-title").text();

                    var character = characters.find(function(character) {

                        return character.name === characterName;

                    });



                    var quote = character.quote;

                    var episode = character.episode;

                    var biography = character.biography;



                    alert("Quote: " + quote + "\nEpisode: " + episode + "\nBiography: " + biography);

                });

            });

        </script>

            <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +  "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>



        <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>

</body>

</html>

Peppa Pig Characters

Info

Tags

AI

Get This App On Your Website

Javascript, HTML, CSS Code

IMAGE TO APP (New!)

SCREENSHOT TO APP (New!)

FAQ

What is Calculator Tools?

What Do You Mean Make An App?

Does This Use ChatGPT?

Calculator Tools

Want Better Apps?