From 75533cfdacf8c964c2f2857ec8bd6798afcda829 Mon Sep 17 00:00:00 2001 From: dhruvishavaghani Date: Sun, 1 Oct 2023 15:05:53 +0530 Subject: [PATCH] HistoricalEventAPI --- .../HistoricalEventsAPI/README.md | 8 + .../HistoricalEventsAPI/index.html | 45 +++ .../HistoricalEventsAPI/script.js | 40 +++ .../HistoricalEventsAPI/style.css | 296 ++++++++++++++++++ 4 files changed, 389 insertions(+) create mode 100644 Existing_API_Collection/HistoricalEventsAPI/README.md create mode 100644 Existing_API_Collection/HistoricalEventsAPI/index.html create mode 100644 Existing_API_Collection/HistoricalEventsAPI/script.js create mode 100644 Existing_API_Collection/HistoricalEventsAPI/style.css diff --git a/Existing_API_Collection/HistoricalEventsAPI/README.md b/Existing_API_Collection/HistoricalEventsAPI/README.md new file mode 100644 index 0000000..d4ce1d3 --- /dev/null +++ b/Existing_API_Collection/HistoricalEventsAPI/README.md @@ -0,0 +1,8 @@ +

Historical Events API🌟

+

This API is used to get information about major events of history.

+

Use of API👀

+

User can access information about any major historical events of any country with accurate date, month, and year.

+

Future Scope Of API📌

+

Knowledge enhancement with information of major history events with it's accurate timeline.

+

Preview🤩

+ diff --git a/Existing_API_Collection/HistoricalEventsAPI/index.html b/Existing_API_Collection/HistoricalEventsAPI/index.html new file mode 100644 index 0000000..72050dd --- /dev/null +++ b/Existing_API_Collection/HistoricalEventsAPI/index.html @@ -0,0 +1,45 @@ + + + + + + + Historical_Events_API + + + + + +
+
+
+ +
+
+

Historical Events

+

United Nations cease-fire takes effect in Kashmir from one minute before midnight. War between India and Pakistan stops accordingly

+
+
+ +
+

Year: 1949

+

Day: 01 Month: 01

+
+
+ +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/Existing_API_Collection/HistoricalEventsAPI/script.js b/Existing_API_Collection/HistoricalEventsAPI/script.js new file mode 100644 index 0000000..c8768dd --- /dev/null +++ b/Existing_API_Collection/HistoricalEventsAPI/script.js @@ -0,0 +1,40 @@ + +function fun(){ +var i = Math.floor(Math.random() * 9+1) +$.ajax({ + method: 'GET', + url: 'https://api.api-ninjas.com/v1/historicalevents?month=0'+i, + headers: { 'X-Api-Key': '9SAecf5e8Llay9jfLxJbOw==Ic2yXmTIbcm2VldF'}, + contentType: 'application/json', + success: function(result) { + document.getElementById("desc").innerHTML = result[i].event + document.getElementById("year").innerHTML = "Year: "+result[i].year + document.getElementById("dm").innerHTML = "Day: "+result[i].day+" Month: "+result[i].month + }, + error: function ajaxError(jqXHR) { + console.error('Error: ', jqXHR.responseText); + } +}); + +fun1() +} + +function fun1(){ + + let temp = fetch('https://random.imagecdn.app/v1/image?category=historicalplace&format=json') + temp.then(res=>res.json()) + .then(res=>{document.getElementById("img").src = res.url + + var x = window.matchMedia("(min-width: 800px)") + myFunction(x) // Call listener function at run time +}) + +function myFunction(x) { + if (x.matches) { // If media query matches + document.getElementById("img").height = 300 + } else { + document.getElementById("img").height = 200 + } + } + +} \ No newline at end of file diff --git a/Existing_API_Collection/HistoricalEventsAPI/style.css b/Existing_API_Collection/HistoricalEventsAPI/style.css new file mode 100644 index 0000000..c5dfee6 --- /dev/null +++ b/Existing_API_Collection/HistoricalEventsAPI/style.css @@ -0,0 +1,296 @@ +@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"); + +/* CSS reset */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +html, +body { + height: 100%; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +/* general stylings */ + +:root { + --Very-Dark-Grayish-Blue: hsl(217, 19%, 35%); + --Desaturated-Dark-Blue: hsl(214, 17%, 51%); + --Grayish-Blue: hsl(212, 23%, 69%); + --Light-Grayish-Blue: hsl(210, 46%, 95%); +} + +body { + font-family: "Manrope", sans-serif; + font-size: 0.8rem; + background-color: var(--Light-Grayish-Blue); +} + +/* separate stylings */ + +.article-section { + margin: 4rem 0; +} + +.article__title{ + color: black; + font-size: 30px; +} + +.article-component { + display: flex; + flex-direction: column; + max-width: 350px; + margin: 0 auto; + border-radius: 1em; + box-shadow: 1rem 1rem 3rem rgba(0 0 0/ 0.1); + overflow: hidden; + background-color: white; +} + +.article__img { + height: 200px; + background-image: url("https://kellychi22.github.io/frontend-mentor-solutions/16-article-preview-component/images/drawers.jpg"); + background-size: cover; + background-position: center; +} + +.article__content { + padding: 2rem; + padding-bottom: 1.5rem; + color: var(--Very-Dark-Grayish-Blue); +} + +.article__desc { + margin: 1rem 0; + font-size: 15px; + color: var(--Desaturated-Dark-Blue); + line-height: 1.75em; +} + +.article__user { + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; + position: relative; +} + +.user__info { + display: flex; +} + +.user__details { + display: flex; + flex-direction: column; + justify-content: center; +} + +.user__img { + width: 3rem; + margin-right: 1rem; + border-radius: 50%; + overflow: hidden; +} + +.user__date { + margin-top: 0.2em; + color: var(--Grayish-Blue); +} + +.share-icon { + cursor: pointer; + display: grid; + place-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--Light-Grayish-Blue); + color: var(--Desaturated-Dark-Blue); + font-size: 1rem; +} + +.share-icon:hover { + opacity: 0.75; +} + +.share { + position: absolute; + top: 0; + left: -2rem; + width: calc(100% + 4rem); + height: calc(100% + 1.5rem); + + display: flex; + justify-content: space-between; + align-items: center; + + padding: 1.5rem 2rem; + background-color: var(--Very-Dark-Grayish-Blue); + color: var(--Grayish-Blue); + + display: none; +} + +.share__social-media { + display: flex; + align-items: center; + gap: 1rem; + color: black; + background-color: aliceblue; +} + +.button { + background-color: black; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + } + +.share__social-media span { + font-size: 1rem; + letter-spacing: 0.5ch; +} + +.share__social-media a { + color: var(--Light-Grayish-Blue); + font-size: 1.75em; +} + +.share__social-media a:hover { + opacity: 0.75; +} + +.share-icon.active { + position: absolute; + top: 18px; + left: 280px; + background-color: var(--Desaturated-Dark-Blue); + color: var(--Light-Grayish-Blue); +} + +.share-icon:hover.active { + opacity: 0.75; +} + +/* attribution styling */ + +footer { + width: 100%; + position: absolute; + top: 0; + text-align: center; +} + +.attribution { + font-size: 1em; + color: var(--Very-Dark-Grayish-Blue); +} + +.attribution a { + color: var(--Desaturated-Dark-Blue); + text-decoration: underline; +} + +.attribution a:hover { + color: var(--Grayish-Blue); +} + +/* media queries */ + +@media (min-width: 800px) { + body { + display: grid; + place-items: center; + } + + .article-component { + flex-direction: row; + max-width: 800px; + height: 300px; + overflow: visible; + } + + .article__img { + width: 40%; + height: inherit; + border-radius: 0.7rem 0 0 0.7rem; + } + + .article__content { + width: 60%; + height: inherit; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 2.5rem; + } + + .share { + position: absolute; + top: -80px; + left: 250px; + width: 62%; + height: 130%; + padding: 1rem 2rem; + border-radius: 1em; + justify-content: center; + } + + .share::before { + position: absolute; + top: 60px; + left: 118px; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 10px 10px 0 10px; + border-color: var(--Very-Dark-Grayish-Blue) transparent transparent + transparent; + } + + #share-icon-close { + position: absolute; + top: 83px; + left: 110px; + } +} \ No newline at end of file