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.

Sign up for GitHub

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

HistoricalEventAPI #21

Merged
merged 1 commit into from
Oct 3, 2023
Merged

HistoricalEventAPI #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 8 additions & 0 deletions Existing_API_Collection/HistoricalEventsAPI/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
45 changes: 45 additions & 0 deletions Existing_API_Collection/HistoricalEventsAPI/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
40 changes: 40 additions & 0 deletions Existing_API_Collection/HistoricalEventsAPI/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
}

}
296 changes: 296 additions & 0 deletions Existing_API_Collection/HistoricalEventsAPI/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading