Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@garrying
garrying committed Jun 5, 2024
1 parent f7b960b commit e5c7b5c
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 80 deletions.
94 changes: 48 additions & 46 deletions assignments/news-feed-template/index.html
View file
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>
62 changes: 28 additions & 34 deletions assignments/weather-feed-template/index.html
View file
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>

0 comments on commit e5c7b5c

Please sign in to comment.