diff --git a/simple-api-2/css/styles.css b/simple-api-2/css/styles.css new file mode 100644 index 0000000..7faf74e --- /dev/null +++ b/simple-api-2/css/styles.css @@ -0,0 +1,101 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + background-color: #f5f7fa; + color: #333; +} + +header { + background-color: #2c3e50; + color: white; + padding: 10px 20px; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +nav .logo { + font-size: 24px; + font-weight: bold; +} + +nav ul { + display: flex; + list-style: none; +} + +nav li { + margin: 0 15px; + font-size: 18px; + cursor: pointer; + display: flex; + align-items: center; + gap: 5px; + color: white; + transition: color 0.3s ease; +} + +nav li:hover { + color: #ffcc00; +} + +main { + text-align: center; + padding: 40px 20px; +} + +main h1 { + font-size: 28px; + margin-bottom: 20px; + color: #2c3e50; +} + +label { + display: block; + font-weight: bold; + margin: 15px 0; +} + +p{ + margin: 15px 0px +} + +input[type="text"] { + width: 60%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #2980b9; + color: white; + margin-top: 10px; + padding: 10px 20px; + font-size: 16px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #1a5276; +} + +ul { + list-style-type: disc; + margin: 20px auto; + padding: 0; + width: 80%; + text-align: left; +} diff --git a/simple-api-2/index.html b/simple-api-2/index.html new file mode 100644 index 0000000..9c082d7 --- /dev/null +++ b/simple-api-2/index.html @@ -0,0 +1,36 @@ + + + + + + + + Simple API #2 + + + + + +
+ +
+
+
+

Search for a historical event and get some important facts!

+ +

Note: Year: -45 = Year: 45 B.C.

+ + + + + + \ No newline at end of file diff --git a/simple-api-2/js/main.js b/simple-api-2/js/main.js new file mode 100644 index 0000000..12150f1 --- /dev/null +++ b/simple-api-2/js/main.js @@ -0,0 +1,35 @@ +document.querySelector('button').addEventListener('click', getHistory) + + +function getHistory(){ + + const historyEvent = document.querySelector('input').value + + const apiKey = '0tHj+S4vc1MB63o6bQVHRw==e2NEFPOhTwG3Em9S' + const url = `https://api.api-ninjas.com/v1/historicalevents?text=${historyEvent}` + + fetch(url, { + headers: { + "X-Api-Key": apiKey // Include the API key in the Authorization header inside the fetch parameter + } + }) + .then(res => res.json()) + .then(data => { + console.log(data) + + const factsList = document.querySelector('#factsUl'); + //clear previous events + factsList.innerText = '' + + // Iterate through the events and display all details + data.forEach((event) => { + const listItem = document.createElement('li'); + listItem.innerText = `Year: ${event.year}, Month: ${event.month}, Day: ${event.day}, Event: ${event.event}`; + factsList.appendChild(listItem); + }); + + }) + .catch(err =>{ + console.log(`error ${err}`) + }); +}