Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trivia API #376

Merged
merged 3 commits into from
Aug 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions New_APIs/Trivia API/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Trivia API Viewer App

A simple web application to interact with the Trivia API and view trivia questions.

## Features
- Fetch and display trivia questions
- Deploy new trivia apps
- Scale trivia app resources
- Retrieve logs from trivia apps

## Installation
1. Clone the repository:
```bash
git clone https://github.com/username/TriviaAPIApp.git

## Contributor
### Revanth
31 changes: 31 additions & 0 deletions New_APIs/Trivia API/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Trivia API Viewer</title>
</head>
<body>
<h1>Trivia API Viewer</h1>
<div id="app">
<h2>Trivia Questions</h2>
<div id="triviaQuestions"></div>
<h2>Deploy</h2>
<input type="text" id="deployAppName" placeholder="App Name">
<input type="text" id="deploySourceUrl" placeholder="Source URL">
<button id="deployButton">Deploy</button>
<h2>Scale</h2>
<input type="text" id="scaleAppName" placeholder="App Name">
<input type="text" id="scaleDynoType" placeholder="Dyno Type">
<input type="number" id="scaleQuantity" placeholder="Quantity">
<button id="scaleButton">Scale</button>
<h2>Logs</h2>
<input type="text" id="logsAppName" placeholder="App Name">
<button id="logsButton">Get Logs</button>
<ul id="results"></ul>
</div>

<script src="index.js"></script>
</body>
</html>
57 changes: 57 additions & 0 deletions New_APIs/Trivia API/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
document.addEventListener('DOMContentLoaded', function () {
fetchTriviaQuestions();

document.getElementById('deployButton').addEventListener('click', async () => {
const appName = document.getElementById('deployAppName').value;
const sourceUrl = document.getElementById('deploySourceUrl').value;
const response = await fetch('/deploy', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ app_name: appName, source_url: sourceUrl })
});
const result = await response.json();
console.log(result);
});

document.getElementById('scaleButton').addEventListener('click', async () => {
const appName = document.getElementById('scaleAppName').value;
const dynoType = document.getElementById('scaleDynoType').value;
const quantity = document.getElementById('scaleQuantity').value;
const response = await fetch('/scale', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ app_name: appName, dyno_type: dynoType, quantity: parseInt(quantity) })
});
const result = await response.json();
console.log(result);
});

document.getElementById('logsButton').addEventListener('click', async () => {
const appName = document.getElementById('logsAppName').value;
const response = await fetch(`/logs?app_name=${appName}`);
const result = await response.json();
const results = document.getElementById('results');
results.innerHTML = JSON.stringify(result, null, 2);
});
});

async function fetchTriviaQuestions() {
const endpoint = 'https://opentdb.com/api.php?amount=5';

fetch(endpoint)
.then(response => response.json())
.then(data => {
const triviaQuestions = document.getElementById('triviaQuestions');
data.results.forEach(question => {
const questionItem = document.createElement('div');
questionItem.className = 'questionItem';
questionItem.innerHTML = `
<h3>${question.question}</h3>
<p>Category: ${question.category}</p>
<p>Difficulty: ${question.difficulty}</p>
`;
triviaQuestions.appendChild(questionItem);
});
})
.catch(error => console.error('Error fetching trivia questions:', error));
}
15 changes: 15 additions & 0 deletions New_APIs/Trivia API/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"short_name": "TriviaApp",
"name": "Trivia API Viewer App",
"icons": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
45 changes: 45 additions & 0 deletions New_APIs/Trivia API/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions New_APIs/Trivia API/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "trivia-api-app",
"version": "1.0.0",
"description": "A simple app to view Trivia questions",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"author": "Your Name",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}

52 changes: 52 additions & 0 deletions New_APIs/Trivia API/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #89fffd, #ef32d9);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

#app {
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

h2 {
margin-top: 20px;
font-size: 1.5em;
}

input, button {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: none;
}

button {
background: #ef32d9;
color: #fff;
cursor: pointer;
}

button:hover {
background: #a726c1;
}

#triviaQuestions .questionItem {
margin-bottom: 15px;
}

#results {
margin-top: 20px;
}
Loading