Create Mobile App
Step 1:
Get the code from https://chat.openai.com/ Login using your google A/C.
Give prompts :
P1: I want to create Reservation of a Smart class room app. Please generate the mobile responsive code for HTML, CSS and JavaScript. Add gradient background color
You will get 3 code snippets index.html, style.css, script.js.
Copy only the styles.css code, paste to new directory say "ALLOTSCR" in the name styles.css and save.
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #4facfe, #00f2fe);
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
}
h1 {
text-align: center;
color: #333;
}
.form {
margin-top: 20px;
}
label, input, select, button {
display: block;
margin-bottom: 10px;
}
input, select, button {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4caf50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
p#message {
margin-top: 10px;
text-align: center;
}
P2: Please add code for view the reserved dates and restrict reservation if it is already reserved.
You will get modified code for html and js files. Again you type the below as prompt in chatGPT.
P3: Add functionalities in the above mobile app. To display reserved date and time slot, to restrict reserve if already time slot and date is reserved
You will get again html and Js modified files. Now you copy the index.html and script.js in seperate files in the above directory as index.html and script.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Classroom Reservation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Smart Classroom Reservation</h1>
<div class="form">
<label for="date">Select Date:</label>
<input type="date" id="date" name="date">
<label for="time">Select Time Slot:</label>
<select id="time" name="time">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<button onclick="checkReservation()">Check Reservation</button>
<p id="reservation-status"></p>
<button onclick="reserveClassroom()">Reserve</button>
<p id="message"></p>
</div>
<div class="reserved-dates">
<h2>Reserved Dates and Time Slots:</h2>
<ul id="reserved-list">
<!-- Reserved dates and time slots will be dynamically added here -->
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
var reservations = [];
function checkReservation() {
var date = document.getElementById("date").value;
var time = document.getElementById("time").value;
var reservationStatus = document.getElementById("reservation-status");
// Check if the selected date and time slot are already reserved
if (reservations.find(r => r.date === date && r.time === time)) {
reservationStatus.innerText = "This time slot is already reserved.";
} else {
reservationStatus.innerText = "This time slot is available for reservation.";
}
}
function reserveClassroom() {
var date = document.getElementById("date").value;
var time = document.getElementById("time").value;
var message = document.getElementById("message");
// Check if date and time are selected
if (date && time) {
// Check if the selected date and time slot are already reserved
if (reservations.find(r => r.date === date && r.time === time)) {
message.innerText = "This date and time slot are already reserved.";
} else {
reservations.push({ date: date, time: time });
message.innerText = "Classroom reserved for " + date + " " + time + ".";
updateReservedSlots();
}
} else {
message.innerText = "Please select both date and time.";
}
}
function updateReservedSlots() {
var reservedList = document.getElementById("reserved-list");
reservedList.innerHTML = "";
reservations.forEach(function(reservation) {
var listItem = document.createElement("li");
listItem.innerText = "Date: " + reservation.date + ", Time: " + reservation.time;
reservedList.appendChild(listItem);
});
}
Save all theree files. Compress these 3 files to to a zip file.
Step2:
go to https://wl.tools/tiiny_host.
Login thru your google a/c
Upload/Drag and dropy your zip file. It will give online URL. Copy the https://orange-marylynne-81.tiiny.site/ (in my case)
Step 3: Convert to play store app
Go to https://www.webintoapp.com/.
Go to app maker tab. Give URL as your copied URL (as above), mobile for Simulator and Press Make APP.
It will do some process and give URL. Copy that URL for this App, If you paste into browser you may get similar screen as shown below:
In dashboard, click Maker Tab. It will give screen like this.
One it is done, you will get Mobile APP like this
Wow You have done it in Just 5 Minutes.!!!!
You can download zip file and store it in your PC. You can extract. You can see apk file. which can be used in installing in Android phones.
Have fun by modifying the above code!!!
YTC referred : https://www.youtube.com/watch?v=EsRyyJmO-u8
Web sites refrred:
https://chat.openai.com/
https://codepen.io/
https://wl.tools/tiiny_host
https://www.webintoapp.com/app-maker 😂😂😂😂😂🎈yaxh180223$@gmail.com
No comments:
Post a Comment