Number Fun
About this app
A fun interactive web app that reacts to number preferences.
Number Fun Number Fun 🎉 Do you like number 2 or hate it? Let's find out! I ❤️ Number 2 Or tell me a number you dislike! I Hate It!
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
<!DOCTYPE html>
<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>Number Fun</title>
<meta name="description" content="A fun interactive web app that reacts to number preferences.">
<meta name="keywords" content="number fun, interactive, web app, javascript, dislike numbers">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<script type="text/javascript">
// Save and load methods for localStorage.
function saveLocal(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
function loadLocal(key) {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : null;
}
document.addEventListener("DOMContentLoaded", function() {
const dislikedNumbers = [5, 10, 15, 60];
const likedNumber = 2;
$('#like-btn').click(function() {
$('#response').text('😄 Number 2? Great Choice!').css('color', 'green');
});
$('#hate-btn').click(function() {
const number = parseInt($('#number-input').val(), 10);
if (dislikedNumbers.includes(number)) {
$('#response').html('🤬 Number ' + number + '??? No way!').css('color', 'red');
} else {
$('#response').html('😌 Number ' + number + ' is fine.').css('color', 'black');
}
});
});
</script>
<style>
body {
font-family: 'Press Start 2P', cursive;
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
color: #333;
text-align: center;
}
#main-container {
padding: 30px;
}
button {
background-color: #f0f0f0;
border: none;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #e1e1e1;
}
#response {
display: block;
margin-top: 20px;
font-size: 1.2rem;
min-height: 50px;
}
.number-input {
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Number Fun 🎉</h1>
<p>Do you like number 2 or hate it? Let's find out!</p>
<button id="like-btn">I ❤️ Number 2</button>
<p>Or tell me a number you dislike!</p>
<input id="number-input" type="number" class="number-input" placeholder="Number"/>
<button id="hate-btn">I Hate It!</button>
<span id="response"></span>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!