📱🧩 3. Data Picker App

🌟 What is this app about?

• This app has a clean and colourful design with a cyan banner on top.
• It features a label that will display the current date.
•  The layout is simple and user-friendly, perfect for a personal organizer app.

️Components used in this app
Date picker:

• 📅 Date Picker – It’s like a magic calendar in your app that lets you pick any day you want!
• 🌈 Colors and Style – You can make it look cool with your favourite colours and style it just how you like.
•  🎉 Special Days – Pick your birthday, holidays, or any special day you’re excited for.
•  🤖 Easy to Use – Just tap on it, and it pops up, waiting for you to choose a date, easy-peasy!
•  🚀 Make Plans – It helps you plan ahead for fun activities or important reminders.

Horizontal Arrangement:

• 📱 The Horizontal Arrangement component in App Inventor is like a magic box where you can line up things side by side, like your toys on a shelf!
•  It helps you arrange buttons, images, or text in a row from left to right, making your app look neat and tidy.
• 🎨 You can change its colour, size, and even how spaced out your items are, making your app super cool and unique.
• 🛠️ Think of it as your tool for creating the perfect layout for your game or story app, where everything fits just right.
•  🌈 With Horizontal Arrangement, you’re the boss of your app’s design, creating fun and awesome screens that everyone will love!

👩‍💻 Designing the App:

1. 🚀 Start with the Screen:
   ⦁ Open App Inventor and create a new project. You’ll start with a blank screen named “Screen1.”
2. ➕ Add a Horizontal Arrangement:
   ⦁ Drag a Horizontal Arrangement component from the layout section and drop it at the top of your screen.
3.  🎨 Style the Horizontal Arrangement:
   ⦁ Set the Align Horizontal property to Centre to ensure the contents are centred.
   ⦁ Change the Background Color to cyan for that cool sky-like feel.
4. 🏷️ Insert a Label into the Horizontal Arrangement:
   ⦁ Drag a Label component and place it inside the Horizontal Arrangement.
   ⦁ With the Label selected, change the Font Bold property to Checked to make the text stand out.
   ⦁ Adjust the Font Size to 18 to make it easily readable.
   ⦁ Set the Text Colour to blue to complement the cyan colour of the Horizontal Arrangement.
5.  📅 Add a Date Picker:
   ⦁ Drag a Date Picker component below the Horizontal Arrangement if you want users to select a date.
6. Final Touches:
   ⦁ You can add more components like buttons or text inputs depending on what your app is about.
   ⦁ Test your app using the emulator or connect a device to see how it looks and functions.

👩‍💻 Coding the App:

When the App Starts:

🌟 When ‘Screen1’ initializes (this means when you first open the app):

• The Label1 text is set to show the current date from the DatePicker1.
• It uses the join block to put together the day, month (in words), and year with slashes in between, like “10/July/2024”.

When You Pick a Date:

📅 When a new date is picked (after you change the date in DatePicker1):

• The Label1 is updated to show the new date you selected.
• Just like before, it joins the day, month, and year with slashes so it’s easy to read.

The Blocks:

• 🧩 Each join block acts like a piece of string tying words together. It takes the day, a “/”, the month, another “/”, and the year, then ties them into one neat phrase.
• 🎨 The Month In Text block makes sure the month shows up as a word (like “July”) instead of a number (like “7”), which is way friendlier to read!

So, when you start the app or pick a new date, the label at the top of your app will show it in a nice, easy-to-understand way. Just think of it as your app saying, “Hey, here’s the date today!” or “Got it, this is the new date you picked!” 📆✨
And that’s how the code works, like a smart little robot in your app, always ready to show you the date in a way that’s super easy to understand!

🚀 What other similar apps you can create?

• 🗓️ Create a homework planner app where kids can add and track their school assignments.
• 🌟 Design an app for daily fun facts or motivational quotes with a similar banner style.
• 🎨 Develop an art portfolio app where kids can display their artwork with the date they created it.

Remember, App Inventor is a powerful tool that lets you be creative and bring your app ideas to life. Have fun exploring and building!