From 70250d97776414e535bca6eb4d371ffe612aadab Mon Sep 17 00:00:00 2001 From: Sylvie Barjolo <144256707+sylviesworldcss@users.noreply.github.com> Date: Tue, 7 Oct 2025 11:42:36 -0400 Subject: [PATCH] completed-simple-api-app --- index.html | 26 ++++++++++++++++++++++++++ main.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ styles.css | 17 +++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf77a90 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + Michael Scott Translation Generator + + +

+ Michael Scott Translation Generator +

+ + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..e00f840 --- /dev/null +++ b/main.js @@ -0,0 +1,44 @@ +// working off of my simple-api-two and plugging in the new info and then deleted what's not needed reverse engineering for this project. +// https://github.com/sameerkumar18/corporate-bs-generator-api +//Call +const descriptionDiv = document.querySelector('.description'); +const getOfficeButton = document.querySelector('button'); +getOfficeButton.addEventListener('click', getOffice); +const resetBtn = document.querySelector('#resetBtn'); +resetBtn.addEventListener('click', reset); + +//API's Used +const url = 'https://corporatebs-generator.sameerkumar.website/'; + +//Function +async function getOffice() { + const options = { + method: "GET", + }; + try { + const response = await fetch(url, options); + const result = await response.json(); + descriptionDiv.innerText = ""; + const corpBsCard = document.createElement("div"); + const corpBsText = document.createElement("h2"); + corpBsText.innerText = result.phrase; + corpBsCard.appendChild(corpBsText); + descriptionDiv.appendChild(corpBsCard); + + console.log(result); + } catch (error) { + console.error(error); + } +} +function reset() { + descriptionDiv.innerText = ''; +} + + + + + + +//SOURCES +//Worked on with Maureen Zitouni RC 2025B and used simple api two as template to plug in relevant info and delete what's not needed +//referenced @Leon Noel Lecture, @mdn @dcode https://www.youtube.com/watch?v=X6MFUagtKiQ \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7e17a5c --- /dev/null +++ b/styles.css @@ -0,0 +1,17 @@ +*{ + box-sizing: border-box; +} +body{ + background-color: #087FC2; + color: rgb(255, 255, 255); + font-family: Arial, Helvetica, sans-serif; + text-align: center; + margin-top: 160px; +} + +/* pseudo code +I want the h1 to have an outline of solid black. +I want the input and submit button to be bigger. +I want the whole page to center in the middle of the page +I want an office background picture +I want it to be responsive */