-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
76 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,49 @@ | ||
| <!doctype html> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>News Feed</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="stylesheet" href="styles/style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <!-- Articles will be placed in this div as a visitor opens the page --> | ||
| <div class="articles-feed"> | ||
| </div> | ||
|
|
||
| <template id="template"> | ||
| <!-- Start of the template --> | ||
| <article class="article"> | ||
| <div class="article-image"> | ||
| <!-- Show and image if there is one. When there is no image show a placeholder image (images/placeholder.png) --> | ||
| <img src="${article.urlToImage ? article.urlToImage : 'images/placeholder.png'}" alt=""> | ||
| </div> | ||
| <header> | ||
| <h1 class="article-title">${article.title}</h1> | ||
| <!-- Show the author if one is present. Otherwise, leave blank --> | ||
| <h2 class="article-author">${article.author ? article.author : '' }</h2> | ||
| <!-- Articles have a source object. Inside source there is a name key --> | ||
| <h3 class="article-source">${article.source.name}</h3> | ||
| </header> | ||
| <div class="content"> | ||
| <p>${article.description}</p> | ||
| </div> | ||
| <!-- Use the article url as the href for a link at the bottom of the article block --> | ||
| <a href="${article.url}" target="_blank" class="article-link">Read more</a> | ||
| </article> | ||
| <!-- End of the template --> | ||
| </template> | ||
|
|
||
| <!-- jQuery is required to retrieve the articles --> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | ||
| <script src="js/main.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>News Feed</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
|
|
||
| <link rel="stylesheet" href="styles/style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Articles will be placed in this div as a visitor opens the page --> | ||
| <div class="articles-feed"></div> | ||
|
|
||
| <template id="template"> | ||
| <!-- Start of the template --> | ||
| <article class="article"> | ||
| <div class="article-image"> | ||
| <!-- Show and image if there is one. When there is no image show a placeholder image (images/placeholder.png) --> | ||
| <img | ||
| src="${article.urlToImage ? article.urlToImage : 'images/placeholder.png'}" | ||
| alt="" | ||
| /> | ||
| </div> | ||
| <header> | ||
| <h1 class="article-title">${article.title}</h1> | ||
| <!-- Show the author if one is present. Otherwise, leave blank --> | ||
| <h2 class="article-author"> | ||
| ${article.author ? article.author : '' } | ||
| </h2> | ||
| <!-- Articles have a source object. Inside source there is a name key --> | ||
| <h3 class="article-source">${article.source.name}</h3> | ||
| </header> | ||
| <div class="content"> | ||
| <p>${article.description ? article.description : ''}</p> | ||
| </div> | ||
| <!-- Use the article url as the href for a link at the bottom of the article block --> | ||
| <a href="${article.url}" target="_blank" class="article-link" | ||
| >Read more</a | ||
| > | ||
| </article> | ||
| <!-- End of the template --> | ||
| </template> | ||
|
|
||
| <!-- jQuery is required to retrieve the articles --> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | ||
| <script src="js/main.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,29 @@ | ||
| <!doctype html> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Current Weather</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="stylesheet" href="styles/style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <!-- The weather display will be place in the div below --> | ||
| <div class="weather-display"> | ||
| </div> | ||
|
|
||
| <template id="template"> | ||
| <!-- Start of the template --> | ||
| <h1 class="weather-details">Weather in ${location.name} / | ||
| ${weather.description} / | ||
| ${current.temp}°C / | ||
| feels like ${current.feels_like}°C / | ||
| ${current.humidity}% humidity / | ||
| pressure ${current.pressure * 0.1} kPa</h1> | ||
| <!-- End of the template --> | ||
| </template> | ||
|
|
||
| <!-- jQuery is required to retrieve the weather data --> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | ||
| <script src="js/main.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Current Weather</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
|
|
||
| <link rel="stylesheet" href="styles/style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- The weather display will be place in the div below --> | ||
| <div class="weather-display"></div> | ||
|
|
||
| <template id="template"> | ||
| <!-- Start of the template --> | ||
| <h1 class="weather-details"> | ||
| Weather in ${location.name} / ${weather.description} / ${current.temp}°C | ||
| / feels like ${current.feels_like}°C / ${current.humidity}% humidity / | ||
| pressure ${current.pressure * 0.1} kPa | ||
| </h1> | ||
| <!-- End of the template --> | ||
| </template> | ||
|
|
||
| <!-- jQuery is required to retrieve the weather data --> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | ||
| <script src="js/main.js"></script> | ||
| </body> | ||
| </html> |