HistoricalEventAPI

dishamodi0910 · Oct 1, 2023 · 75533cf · 75533cf
1 parent daaf240
commit 75533cf
Show file tree

Hide file tree

Showing 4 changed files with 389 additions and 0 deletions.
diff --git a/Existing_API_Collection/HistoricalEventsAPI/README.md b/Existing_API_Collection/HistoricalEventsAPI/README.md
@@ -0,0 +1,8 @@
+<h1>Historical Events API🌟</h1>
+<h3>This API is used to get information about major events of history.</h3>
+<h2>Use of API👀</h2>
+<p>User can access information about any major historical events of any country with accurate date, month, and year.</p>
+<h2>Future Scope Of API📌</h2>
+<p>Knowledge enhancement with information of major history events with it's accurate timeline.</p>
+<h2>Preview🤩</h2>
+<img src="https://github.com/dhruvishavaghani/demo/assets/109460833/7e330949-f061-4758-8caf-af944f0f0fb2">
diff --git a/Existing_API_Collection/HistoricalEventsAPI/index.html b/Existing_API_Collection/HistoricalEventsAPI/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Historical_Events_API</title>
+    <script src="script.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section class="article-section">
+        <div class="article-component">
+          <div class="article__img">
+            <img id="img" >
+          </div>
+          <div class="article__content">
+            <h1 class="article__title">Historical Events</h1>
+            <p id= "desc" class="article__desc">United Nations cease-fire takes effect in Kashmir from one minute before midnight. War between India and Pakistan stops accordingly</p>
+            <div class="article__user">
+              <div class="user__info">
+                <!-- <div class="user__img">
+                  <img src="https://kellychi22.github.io/frontend-mentor-solutions/16-article-preview-component/images/avatar-michelle.jpg" alt="">
+                </div> -->
+                <div class="user__details">
+                  <h2 id="year" class="user__name">Year: 1949</h2>
+                  <h3 id="dm" class="user__date">Day: 01  Month: 01</h3>
+                </div>
+              </div>
+                <div class="share__social-media">
+                    <button class="button" onclick="fun()" >Next -></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- <footer class="attribution">
+        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
+        Coded by <a href="#">Kelly CHI</a>.
+      </footer> -->
+</body>
+</html>
diff --git a/Existing_API_Collection/HistoricalEventsAPI/script.js 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
+    }
+  }
+
+}
diff --git a/Existing_API_Collection/HistoricalEventsAPI/style.css 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;
+  }
+}