Skip to content
Snippets Groups Projects
Commit 44db71b1 authored by Silas Meister's avatar Silas Meister
Browse files

Add php and replace news with the news from the json file

parent 11418de5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Assignment 1.pdf → Assignments/Assignment 1.pdf
+ 0
− 0
View file @ 44db71b1
File moved
Assignments/Assignment 2.pdf 0 → 100644
+ 0
− 0
View file @ 44db71b1
File added
data/news_01.json 0 → 100644
+ 19
− 0
View file @ 44db71b1
{
"news":[
{
"title":"SpaceX's Next Starship Prototype Taking Shape ",
"imgurl":"",
"content":"Construction of the test craft is proceeding apace, as two new photos posted on Twitter today (Sept. 17) by company founder and CEO Elon Musk reveal."
},
{
"title":"NASA's Juno Mission Cheks Out Eclipse on Jupiter",
"imgurl":"img/astronaut.jpg",
"content":"All is well on our largest neighbor; NASA's Juno spacecraft just managed to spot the shadow of Jupiter's moon, Io, passing over its marbled clouds."
},
{
"title":"Europe Wants Ideas for Cave-Spelumking Moon Robots",
"imgurl":"img/nasa_launch.jpg",
"content":"As NASA makes a big push to land humans on the moon's surface by 2024, the European Space Agency (ESA) wants to learn more about the lunar caves that lie beneath."
}
]
}
\ No newline at end of file
data/news_02.json 0 → 100644
+ 19
− 0
View file @ 44db71b1
{
"news":[
{
"title":"NASA Events",
"imgurl":"",
"content":"Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV"
},
{
"title":"Expedition 48",
"imgurl":"img/astronaut.jpg",
"content":"NASA's Record-braking Astronaut Crewmates Safely Return to Earth"
},
{
"title":"NASA to Launch First U.S. Asteroid Sample Return Mission",
"imgurl":"img/nasa_launch.jpg",
"content":"Launching on Sept. 8, 2016 OSIRIS-REx will travel to a near-Earth asteroid called Bennu and bring a small sample back for study."
}
]
}
\ No newline at end of file
first.php 0 → 100644
+ 13
− 0
View file @ 44db71b1
<html>
<?php
ini_set("display_errors", 0);
ini_set("display_startup_errors", 0);
?>
<head></head>
<body>
<?php
echo "Hello World, this is my first PHP";
?>
</body>
</html>
\ No newline at end of file
index.php 0 → 100644
+ 197
− 0
View file @ 44db71b1
<?php declare(strict_types=1);
ini_set("display_errors", 1);
ini_set("display_startup_errors", 1);
$fileContents = file_get_contents('data/news_01.json');
if ($fileContents === NULL)
return;
$json = json_decode($fileContents, true);
$newsList = $json["news"];
?>
<!DOCTYPE html>
<html lang="de">
<head>
<title>NASA</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functions.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body onload="">
<header>
<img class="nasa-img" src="img/nasa.png" />
<nav>
<ul class="top-nav">
<li><a href="#">Missions</a></li>
<li><a href="#">Galleries</a></li>
<li><a href="#">NASA TV</a></li>
<li><a href="#">Follow NASA</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">NASA Audiences</a></li>
<li>
<form class="search-form" method="post" accept-charset="UTF-8">
<input type="search" placeholder="Search" />
<input type="button" />
</form>
</li>
<li><img src="img/share_icon.png" /></li>
</ul>
<ul class="center-nav">
<li><a href="#">International Space Station</a></li>
<li><a href="#">Journey to Mars</a></li>
<li><a href="#">Earth</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Aeronautics</a></li>
<li><a href="#">Solar System and Beyond</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Benefits to You</a></li>
</ul>
</nav>
</header>
<main>
<article class="content-large">
<div>
<div class="article-content-container">
<a class="article-link" href="#"></a>
<img id="slide-image" class="article-image" src="img/nasa_news_1.jpg" />
<div class="article-content">
<div id="slide-container" class="news-headline">
<h3>Space Station</h3>
<h2>Expedition 48 Crew Lands Safely on Earth</h2>
</div>
<div class="camera-triangle"></div>
<img class="camera-img" src="img/camera.png" />
</div>
</div>
</div>
</article>
<article class="content-small">
<div>
<div class="article-content-container">
<a class="article-link" href="#"></a>
<div class="article-content nasa-events-container">
<div class="nasa-events-top">
<?php
$news = $newsList[0];
$title = htmlspecialchars($news["title"]);
$imageurl = htmlspecialchars($news["imgurl"]);
$content = htmlspecialchars($news["content"]);
?>
<p class="nasa-events-title"><?= $title ?></p>
<div class="line"></div>
<a class="nasa-event" href="#"><?= $content ?></a>
</div>
<div class="nasa-events-bottom">
<div class="line"></div>
<div class="nasa-events-bottom-horizontal">
<a href="#">Calendar</a>
<a href="#">Launches and Landings</a>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="content-small">
<div>
<div class="article-content-container">
<?php
$news = $newsList[1];
$title = htmlspecialchars($news["title"]);
$imageurl = htmlspecialchars($news["imgurl"]);
$content = htmlspecialchars($news["content"]);
?>
<a class="article-link" href="#"></a>
<img class="article-image" src="<?= $imageurl ?>"></img>
<div class="article-content overlay">
<h4 class="overlay-title"><?= $title ?></h4>
<h4 class="overlay-description"><?= $content ?></h4>
</div>
</div>
</div>
</article>
<article class="content-medium">
<div>
<div class="article-content-container">
<?php
$news = $newsList[2];
$title = htmlspecialchars($news["title"]);
$imageurl = htmlspecialchars($news["imgurl"]);
$content = htmlspecialchars($news["content"]);
?>
<a class="article-link" href="#"></a>
<img class="article-half-image" src="<?= $imageurl ?>"></img>
<div class="article-triangle"></div>
<div class="article-content-second-half nasa-launch">
<h4><?= $title ?></h4>
<p><?= $content ?></p>
<div class="nasa-launch-links">
<a href="#">Mission Site</a>
<a href="#">Briefing Schedule</a>
<a href="#">Launch Updates</a>
<a href="#">Video to Bennu and Back</a>
</div>
</div>
</div>
</div>
</article>
<article class="content-small">
<div>
<div class="article-content-container">
<a class="article-link" href="#"></a>
<div class="article-content">
<iframe src="https://www.youtube.com/embed/XY6idnRlPsU?si=HnFL8-if6-zB6tU2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</article>
<article class="content-medium">
<div>
<div class="article-content-container">
<a class="article-link" href="#"></a>
<img class="article-image" src="img/ocean_worlds.jpg"></img>
</div>
</div>
</article>
<article class="content-small">
<div>
<div class="article-content-container">
<a class="article-link" href="#"></a>
<img class="article-image article-image-full" src="img/tweet.png"></img>
</div>
</div>
</article>
</section>
</body>
</html>
\ No newline at end of file
styles.css
+ 7
− 14
View file @ 44db71b1
...@@ -357,24 +357,17 @@ main { ...@@ -357,24 +357,17 @@ main {
opacity: 0.85; opacity: 0.85;
margin: 0; margin: 0;
padding: 0.5rem; padding: 0.5rem;
} font-weight: 500;
max-height: 2.9rem;
.overlay-description > * { line-height: 1.1rem;
overflow: hidden;
color: #111111; color: #111111;
margin: 0;
font-size: 0.9rem; font-size: 0.9rem;
} }
.overlay-description > h4 { .overlay > .overlay-description:hover {
font-weight: 500; max-height: 100%;
} overflow: visible;
.overlay-description > p {
display: none;
}
.overlay-description:hover > p {
display: block;
} }
.overlay > .overlay-additional-information { .overlay > .overlay-additional-information {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment