How ChatGPT Built My App in Minutes
How ChatGPT Built My App in Minutes
reference from : https://www.youtube.com/@WebsiteLearners
https://www.youtube.com/watch?v=EsRyyJmO-u8
1 Get the code from ChatGPT
https://chat.openai.com/
2 Save our code to the computer
https://codepen.io/trending
3 Upload our app online
https://tiny.host
4 Convert the web app into mobile app
https://www.webintoapp.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.container {
text-align: center;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
border: 2px solid #333;
cursor: pointer;
}
.cell.taken {
pointer-events: none;
}
.message {
font-size: 1.5em;
margin-top: 10px;
}
.reset {
padding: 10px 20px;
font-size: 1em;
background-color: #333;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
@media (max-width: 400px) {
.board {
grid-template-columns: repeat(3, 80px);
grid-template-rows: repeat(3, 80px);
}
.cell {
width: 80px;
height: 80px;
font-size: 1.5em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Tic-Tac-Toe</h1>
<div class="board" id="board"></div>
<div class="message" id="message"></div>
<button class="reset" onclick="resetGame()">Reset</button>
</div>
<script>
const board = document.getElementById("board");
const message = document.getElementById("message");
let currentPlayer = "X";
let cells = Array(9).fill(null);
function checkWinner() {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
for (let combination of winningCombinations) {
const [a, b, c] = combination;
if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
message.textContent = `Player ${cells[a]} Wins!`;
document.querySelectorAll(".cell").forEach(cell => cell.classList.add("taken"));
return true;
}
}
if (!cells.includes(null)) {
message.textContent = "It's a Draw!";
return true;
}
return false;
}
function handleClick(index) {
if (!cells[index]) {
cells[index] = currentPlayer;
document.getElementById(`cell-${index}`).textContent = currentPlayer;
if (!checkWinner()) {
currentPlayer = currentPlayer === "X" ? "O" : "X";
message.textContent = `Player ${currentPlayer}'s Turn`;
}
}
}
function resetGame() {
cells.fill(null);
board.innerHTML = "";
message.textContent = "Player X's Turn";
currentPlayer = "X";
createBoard();
}
function createBoard() {
board.innerHTML = "";
cells.forEach((_, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.id = `cell-${index}`;
cell.addEventListener("click", () => handleClick(index));
board.appendChild(cell);
});
}
createBoard();
message.textContent = "Player X's Turn";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #ff7e5f, #feb47b);
margin: 0;
}
.container {
text-align: center;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
border: 2px solid #333;
cursor: pointer;
}
.cell.taken {
pointer-events: none;
}
.message {
font-size: 1.5em;
margin-top: 10px;
}
.reset, .new-game {
padding: 10px 20px;
font-size: 1em;
background-color: #333;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
.winner-screen {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 2em;
}
@media (max-width: 400px) {
.board {
grid-template-columns: repeat(3, 80px);
grid-template-rows: repeat(3, 80px);
}
.cell {
width: 80px;
height: 80px;
font-size: 1.5em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Tic-Tac-Toe</h1>
<div class="board" id="board"></div>
<div class="message" id="message"></div>
<button class="reset" onclick="resetGame()">Reset</button>
<button class="new-game" onclick="startNewGame()">New Game</button>
</div>
<div class="winner-screen" id="winnerScreen">
<div id="winnerMessage"></div>
<button class="new-game" onclick="startNewGame()">New Game</button>
</div>
<script>
const board = document.getElementById("board");
const message = document.getElementById("message");
const winnerScreen = document.getElementById("winnerScreen");
const winnerMessage = document.getElementById("winnerMessage");
let currentPlayer = "X";
let cells = Array(9).fill(null);
function checkWinner() {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
for (let combination of winningCombinations) {
const [a, b, c] = combination;
if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) {
winnerMessage.textContent = `Player ${cells[a]} Wins!`;
winnerScreen.style.display = "flex";
return true;
}
}
if (!cells.includes(null)) {
winnerMessage.textContent = "It's a Draw!";
winnerScreen.style.display = "flex";
return true;
}
return false;
}
function handleClick(index) {
if (!cells[index]) {
cells[index] = currentPlayer;
document.getElementById(`cell-${index}`).textContent = currentPlayer;
if (!checkWinner()) {
currentPlayer = currentPlayer === "X" ? "O" : "X";
message.textContent = `Player ${currentPlayer}'s Turn`;
}
}
}
function resetGame() {
cells.fill(null);
board.innerHTML = "";
message.textContent = "Player X's Turn";
currentPlayer = "X";
createBoard();
}
function startNewGame() {
winnerScreen.style.display = "none";
resetGame();
}
function createBoard() {
board.innerHTML = "";
cells.forEach((_, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.id = `cell-${index}`;
cell.addEventListener("click", () => handleClick(index));
board.appendChild(cell);
});
}
createBoard();
message.textContent = "Player X's Turn";
</script>
</body>
</html>