You got money prank app creation walk through

Do you got money as much as you want? Don’t think! You’ll never have that much. It is a bitter truth. But look at the bright side and have some fun with it. Imagine you got that money. You can with this prank app:

You got money! waiting for you

A useless prank app that is oddly satisfying. No need to invest anything as there is no money involved and you can not expect to earn any money here. This is a completely useless app made for fun and its only purpose is to have a little fun, prank your friends and perhaps use it as a screensaver.

you got money waiting for you

How this prank was made

First of all the idea was to create something that is completely useless.

After several subjects, money always came the most interesting to play with and it is a great deal to prank some one without doing any harm with (or without) a purpose.

Subject: Money. Checked!

It has to be about money

What depicts money more then a currency symbol? Dollar sign of course – $$$. How about more $$$, a lot more…

A whole screen filled with dollars!? Yeah, that may work.

How about the colors? It has to be green as a dollar bill itself or similar to that. The background should be quite in contrast to the wording and look great in combination with green. White or light gray on black background will work. A different combination may be good too but must have the green.

Colors: solved!

The audience

Should we create and pack for mobile devices or just create a responsive web app . Choice was clear: web app! Easier to create, available on any device, everywhere.

Prank app creation

Next step was the coding. As decided, we were about to make a simple web page, nothing more!

This is the technical part that took the most time even if you’re creating something simple like a single page prank site or a landing page.

If want to create a website and never done it before, don’t worry AI is here to help. You don’t have to be a prompt engineer to tell ChatGPT to create a single webpage. It is enough to describe what do you need, how would you like the page to look and what functionality to be added. It is just easy as that to ask AI to show you the code. If not satisfied with the result, add more specifics and rerun. That’s it! AI will generate all the necessary code and files. It is up to you to review and make the changes to suit your vision.

We’ve taken another approach starting in the old harder way manually coding the page layout. What layout!? A blank black screen! 🙂

It was enough for a beginning.

On a second thought we would need some buttons. How about circle ones. Buttons: circled! done.

To achieve some effects, colors, circle buttons, rounded corners and stuff like that would have to use some CSS. This means custom coding HTML and CSS.

Why bother with that when there are lot of free HTML frameworks (think: Bootstrap, W3CSS, Tailwind ….) that have those things built in.

At the end of the day you’ll have to combine them.

So lets look at the code till now:

<!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=”https://www.w3schools.com/w3css/4/w3.css”>

<title>You got money</title>

</head>

A web page, even a prank should contain some text and a focus area. This prank app we called You got money is no exception. Header shoud say that and right bellow it in the center of the screen should be the focus area where the amount of money you’ve got is to displayed. We called this section “number-box”

Some text bellow should work fine too.

Adding the main area where the prank message will appear:

Adding some CSS in the header:

.number-box {
font-size: 48px;
padding: 15px;
padding-right: 50px;
padding-left: 50px;
border-radius: 10px;
background-color: #333;
text-align: center;
margin: 20px;
z-index: 10; /* Keep it above the falling dollars */
}

And add this code in HTML body to display it:

<div class=”w3-container” id=”content”>
<h1 class=”w3-center”>You got money!</h1>
<div class=”number-box w3-green” id=”numberBox”>
<!– Random number will be displayed here –>
</div>
<h2 class=”w3-center”>waiting for you</h2>
</div>

Also adding a footer with some buttons that will do something (or nothing). Just to spice the look:

In the CSS:

footer {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
background-color: black;
color: white;
position: absolute;
bottom: 0;
}
.footer-section {
flex: 1; /* Each section takes equal space */
}

In the HTML, bellow the previously added code:

<div class=”footer-section w3-center” id=”visitCounter”><span id=”counter”>50</span></span> visitors have grabbed some <button id=”messageLink” class=”w3-button w3-circle w3-dark-grey”>$</button></div>

<div class=”w3-right”>Get the money → <button id=”toggleButton” class=”w3-button w3-circle w3-red”>$</button></div> <!– Right symbol –>

</footer>

Adding a message

Since we had a footer section and some buttons we should make one able to display info about this prank app. Instead of creating a new page/html document it can be done with a modal that displays visible over the main page it runs bellow it.

CSS for the modal:

.modal {
display: none; /* Hide by default */
position: fixed;
z-index: 1000; /* On top of other content */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
justify-content: center;
align-items: center;
padding: 20px;
}
.message-card {
width: 100%;
max-width: 400px; /* Set a max-width for the card */
background-color: #fff; /* Card background */
color: black; /* Text color inside card */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

HTML for the modal:

<div class=”modal w3-modal-content w3-card-4 w3-animate-zoom” id=”messageModal”>
<div class=”w3-container”>
<span onclick=”document.getElementById(‘messageModal’).style.display=’none'” class=”w3-button w3-red w3-display-topright”>×</span>
<h1>No money here actually!!!</h1>
<p>This is a prank app and it doesn’t make or give you anything</p>
<p>This page is made by the <a href=”https://nonconfirmed.com/about-this-website-and-the-noncon-team/#NonCon” target=”_blank”>NonCon Team</a> for fun only</p>
<p>If you wish to make money online here are <a href=”https://nonconfirmed.com/?s=online+income” target=”_blank”>some ideas</a></p>

<p>Like it? Share it! Or <a href=”~~a link to our donate button~~” target=”_blank”>buy us a coffee</a></p>
<br/>
<button onclick=”document.getElementById(‘messageModal’).style.display=’none'” class=”w3-button w3-red w3-center” id=”closeCard”>Close</button>

</div>
</div>

Ah, we add some about info, sharing buttons to share it with your friends, and a donate button 🙂 in case you like this prank app so much to support us in creating the next one 🙂

What is a money prank if money doesn’t rain

Since now almost all the HTML and CSS was ready. Only need the dollars falling.

Adding the CSS first:

.dollar {
position: absolute;
top: -50px; /* Start above the viewport */
font-size: 24px;
color: green;
animation: fall linear infinite;
z-index: 5; /* Below the number box but above the background */
}
@keyframes fall {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}

To animate $$$ falling through the screen there are several ways but doing it with javascript sounds most logical.

We love (and hate) Javascript. All the functionalities the websites have are achieved through Javascript. But we really hate debugging it! So with a little help here is the code:

function createDollar() {

const dollar = document.createElement(‘div’);

dollar.className = ‘dollar’;

dollar.textContent = ‘$’;

// Randomize the starting position

dollar.style.left = Math.random() * window.innerWidth + ‘px’;

// Randomize the animation duration

dollar.style.animationDuration = Math.random() * 3 + 2 + ‘s’; // 2 to 5 seconds

document.body.appendChild(dollar);

// Remove dollars after animation completes

dollar.addEventListener(‘animationend’, () => {

dollar.remove();

});

}

// Reload the page when the left dollar button is pressed

document.getElementById(‘reloadButton’).addEventListener(‘click’, () => {

location.reload();

});

A dollar rain is achieved. But didn’t we forgot something!?

The focus area where the amount should be displayed is achieved with this Javascript code:

function generateRandomNumber() {
const digits = Math.floor(Math.random() * 6) + 2; // Randomly choose 5, 6, or 7 digits
const min = Math.pow(10, digits – 1); // Minimum value
const max = Math.pow(10, digits) – 9; // Maximum value
const randomNumber = Math.floor(Math.random() * (max – min + 1)) + min;
document.getElementById(‘numberBox’).textContent = randomNumber + ‘$’;
}

Just in case we’ve added this too:

// Generate a random number when the page loads
window.onload = () => {
generateRandomNumber();
setInterval(createDollar, 300); // Create a new dollar every 300ms
};

Modal window functionality:

// Show message modal when link is clicked
document.getElementById(‘messageLink’).addEventListener(‘click’, (e) => {
e.preventDefault(); // Prevent the default link behavior
document.getElementById(‘messageModal’).style.display = ‘flex’; // Show the modal
});

// Close the message modal
document.getElementById(‘closeCard’).addEventListener(‘click’, () => {
document.getElementById(‘messageModal’).style.display = ‘none’; // Hide the modal
});

Code for the button in the left corner:

// Reload the page when the dollar button is pressed
document.getElementById(‘reloadButton’).addEventListener(‘click’, () => {
location.reload();
});

And the code for the button in the right corner:

// Toggle visibility of content and footer
document.getElementById(‘toggleButton’).addEventListener(‘click’, () => {
const content = document.getElementById(‘content’);
const footer = document.getElementById(‘footer’);
const isHidden = content.style.display === ‘none’;

content.style.display = isHidden ? ‘flex’ : ‘none’;
footer.style.display = isHidden ? ‘block’ : ‘none’;
});

And that would be all the coding. Made manually with a little help of AI.

The next thing was to make you got money prank more SEO friendly.

Sharing buttons were already added using service of AddToAny website allowing to place free sharing buttons on your website, anywhere in the HTML code.

Next was to add a favicon. Basically you need to create an icon for your website. Any graphic creation app will do. Have to be square iszed. Just save your image as .PNG or .ICO and place this code in the head of your html/web page.

Add META and Open Graph tags for Facebook and Twitter. You can write the meta tags yourself directly into the HEAD of the HTML. Generating the OG tags can be done online for free. Here are ours:

<title>You got money</title>
<meta name=”title” content=”You got money” />
<meta name=”description” content=”You got money to grab. A prank app somewhat oddly satisfying that involves money in your pocket or not. It is not confirmed that you’ll get any. Use it for fun and to prank your friends” />

<!– Open Graph / Facebook –>
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”https://nonconfirmed.com/you-got-money/” />
<meta property=”og:title” content=”You got money” />
<meta property=”og:description” content=”You got money to grab. A prank app somewhat oddly satisfying that involves money in your pocket or not. It is not confirmed that you’ll get any. Use it for fun and to prank your friends” />
<meta property=”og:image” content=”you-got-money.png” />

<!– Twitter –>
<meta property=”twitter:card” content=”summary_large_image” />
<meta property=”twitter:url” content=”https://nonconfirmed.com/you-got-money/” />
<meta property=”twitter:title” content=”You got money” />
<meta property=”twitter:description” content=”You got money to grab. A prank app somewhat oddly satisfying that involves money in your pocket or not. It is not confirmed that you’ll get any. Use it for fun and to prank your friends” />
<meta property=”twitter:image” content=”you-got-money.png” />

This was the final step of creating You got money prank app.

Almost forgot, we used some PHP code to count views.

Hope you’ll like it so much to help us in creating the next one.

In case you have an idea and need something created contact us right now and we might make something for you.

Share this with the world: