Friday, 21 February 2025
Thursday, 20 February 2025
Monday, 17 February 2025
Sunday, 16 February 2025
How to Use Multiple Screens in MIT App Inventor & Pass Data Between Screens
How to Use Multiple Screens in MIT App Inventor & Pass Data Between Screens
Saturday, 15 February 2025
MIT App Inventor: Build Your Own Quiz App (Easy Tutorial)
MIT App Inventor is a beginner-friendly, visual programming platform that allows users to create Android apps without extensive coding knowledge. In the "Create a Quiz App From Scratch" tutorial, you'll learn step-by-step how to build a fully functional quiz app using MIT App Inventor.
This tutorial covers:
✅ Designing an interactive user interface
✅ Adding multiple-choice questions
✅ Implementing score tracking
✅ Using logical conditions to check answers
✅ Enhancing the app with visuals and sound
By the end of the tutorial, you'll have a working quiz app and a solid understanding of MIT App Inventor's drag-and-drop coding system, making it easy for anyone to build mobile applications. Perfect for students, beginners, and hobbyists! ๐
Join this channel to get access to perks:
https://www.youtube.com/channel/UCyNJURC5bvqIQ9vO9PBrYrA/join
#quizapp #mitappinventor #appinventortutorial
Wednesday, 12 February 2025
Build Your Own Valentine’s Website in Minutes! ๐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Will You Be My Valentine?</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffebee;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.container {
text-align: center;
position: relative;
}
h1 {
font-size: 2rem; /* Smaller font size for mobile */
color: #d32f2f;
margin: 0 10px; /* Add margin for small screens */
}
.buttons {
margin-top: 20px;
}
button {
padding: 15px 30px; /* Larger buttons for mobile */
font-size: 1.2rem;
margin: 0 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease;
}
#yesButton {
background-color: #4caf50;
color: white;
}
#noButton {
background-color: #f44336;
color: white;
position: relative;
}
#message {
margin-top: 20px;
font-size: 1.2rem; /* Smaller font size for mobile */
color: #d32f2f;
display: none;
}
.balloon {
position: absolute;
font-size: 2rem;
color: #d32f2f;
animation: float 6s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(50px, -50px); }
50% { transform: translate(-50px, 50px); }
75% { transform: translate(50px, 50px); }
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(3); opacity: 0; }
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #ff4081;
animation: confetti-fall 2s linear infinite;
}
@keyframes confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); }
100% { transform: translateY(100vh) rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>Will You Be My Valentine?</h1>
<div class="buttons">
<button id="yesButton">Yes</button>
<button id="noButton">No</button>
</div>
<div id="message">
I knew you'd say yes! ๐<br>
Let's meet today at <strong>Hotel Paradise</strong> at <strong>7:00 PM</strong>.
</div>
<!-- Balloons -->
<div class="balloon" style="top: 10%; left: 20%;">๐</div>
<div class="balloon" style="top: 30%; left: 70%;">๐</div>
<div class="balloon" style="top: 50%; left: 40%;">๐</div>
<div class="balloon" style="top: 70%; left: 10%;">๐</div>
<div class="balloon" style="top: 90%; left: 60%;">๐</div>
</div>
<script>
const noButton = document.getElementById('noButton');
const yesButton = document.getElementById('yesButton');
const message = document.getElementById('message');
// Function to move the "No" button
const moveNoButton = () => {
const x = Math.random() * 80 - 40; // Smaller movement range for mobile
const y = Math.random() * 80 - 40; // Smaller movement range for mobile
noButton.style.transform = `translate(${x}px, ${y}px)`;
};
// Add event listeners for both mouse and touch events
noButton.addEventListener('mouseover', moveNoButton);
noButton.addEventListener('touchstart', moveNoButton);
noButton.addEventListener('click', () => {
// Reset the button's position if clicked
noButton.style.transform = 'translate(0, 0)';
});
yesButton.addEventListener('click', () => {
// Show the message
message.style.display = 'block';
document.querySelector('.buttons').style.display = 'none';
// Surprise animation: Balloons explode and confetti falls
const balloons = document.querySelectorAll('.balloon');
balloons.forEach(balloon => {
balloon.style.animation = 'explode 1s forwards';
});
// Add confetti
for (let i = 0; i < 50; i++) { // Fewer confetti for mobile performance
const confetti = document.createElement('div');
confetti.classList.add('confetti');
confetti.style.left = `${Math.random() * 100}vw`;
confetti.style.animationDelay = `${Math.random() * 2}s`;
confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
document.body.appendChild(confetti);
}
});
</script>
</body>
</html>
Subscribe to:
Posts (Atom)
