bjarneo · November 9, 2023 09:53
diff --git a/.html b/.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Norway Times - Article List</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f3f3f3;
        margin: 0;
        padding: 0;
      }
      .container {
        display: flex;
        justify-items: center;
        width: 60%;
        margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: 81px;
      }
      h1 {
        text-align: center;
        color: white;
      }
      .article-list {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
      }
      .article-list-item {
        display: flex;
        flex-flow: column;
        margin-bottom: 20px;
        border-style: solid;
        margin: 20px;
        /*width: 45%;*/
      }
      .article-title {
        font-size: 1.2em;
        color: #333;
      }
      .header {
        background-color: #12135d;
        position: fixed;
        width: 100%;
      }
      .box {
        display: flex;
        justify-content: center;
      }

      h2,
      p,
      time,
      a {
        margin-left: 10px;
        margin-right: 10px;
      }
      time {
        padding-bottom: 10px;
        color: rgb(80, 80, 80);
        font-size: 13px;
      }
      a {
        margin-bottom: 10px;
        margin-top: 10px;
        font-size: 20px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="header">
        <h1>Norway Times</h1>
      </div>

      <div class="container">
        <ul class="article-list"></ul>
      </div>
    </div>

    <script>
      const API = 'https://www.vg.no/feed/latest';

      const articleList = document.querySelector('.article-list');

      const getArticles = async () => {
        const response = await fetch(API);
        const data = await response.json();
        return data;
      };

      const handleArticles = async () => {
        try {
          const articles = await getArticles();

          articles.forEach((article) => {
            const articleListItem = document.createElement('li');
            articleListItem.classList.add('article-list-item');

            const articleDescription = document.createElement('p');
            articleDescription.classList.add('article-description');
            articleDescription.textContent = article.description;

            const articlePublish = document.createElement('time');
            articlePublish.classList.add('article-publish');
            Published = new Date(article.published);
            day = Published.getDay();
            const dayNames = [
              'Mandag',
              'Tirsdag',
              'Onsdag',
              'Torsdag',
              'Fredag',
              'Lørdag',
              'Søndag',
            ];
            date = Published.getDate();
            month = Published.getMonth();
            year = Published.getFullYear();
            articlePublish.textContent =
              dayNames[day - 1] + ' ' + date + '.' + month + '.' + year + '.';

            const articleLink = document.createElement('a');
            articleLink.classList.add('article-url');
            link = document.createTextNode(article.title);
            articleLink.appendChild(link);
            articleLink.title = article.title;
            articleLink.href = article.url;

            articleListItem.appendChild(articleLink);
            articleListItem.appendChild(articleDescription);
            articleListItem.appendChild(articlePublish);

            articleList.innerHTML += articleListItem.outerHTML;
          });
        } catch (error) {
          articleList.innerHTML =
            'Det skjedde en feil. Kunne ikke hente innhold.';
          console.error(error);
        }
      };

      handleArticles();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Norway Times - Article List</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f3f3f3;
	margin: 0;
	padding: 0;
	}
	.container {
	display: flex;
	justify-items: center;
	width: 60%;
	margin: 0 auto;
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-top: 81px;
	}
	h1 {
	text-align: center;
	color: white;
	}
	.article-list {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	}
	.article-list-item {
	display: flex;
	flex-flow: column;
	margin-bottom: 20px;
	border-style: solid;
	margin: 20px;
	/width: 45%;/
	}
	.article-title {
	font-size: 1.2em;
	color: #333;
	}
	.header {
	background-color: #12135d;
	position: fixed;
	width: 100%;
	}
	.box {
	display: flex;
	justify-content: center;
	}

	h2,
	p,
	time,
	a {
	margin-left: 10px;
	margin-right: 10px;
	}
	time {
	padding-bottom: 10px;
	color: rgb(80, 80, 80);
	font-size: 13px;
	}
	a {
	margin-bottom: 10px;
	margin-top: 10px;
	font-size: 20px;
	color: black;
	text-decoration: none;
	}
	</style>
	</head>
	<body>
	<div class="box">
	<div class="header">
	<h1>Norway Times</h1>
	</div>

	<div class="container">
	<ul class="article-list"></ul>
	</div>
	</div>

	<script>
	const API = 'https://www.vg.no/feed/latest';

	const articleList = document.querySelector('.article-list');

	const getArticles = async () => {
	const response = await fetch(API);
	const data = await response.json();
	return data;
	};

	const handleArticles = async () => {
	try {
	const articles = await getArticles();

	articles.forEach((article) => {
	const articleListItem = document.createElement('li');
	articleListItem.classList.add('article-list-item');

	const articleDescription = document.createElement('p');
	articleDescription.classList.add('article-description');
	articleDescription.textContent = article.description;

	const articlePublish = document.createElement('time');
	articlePublish.classList.add('article-publish');
	Published = new Date(article.published);
	day = Published.getDay();
	const dayNames = [
	'Mandag',
	'Tirsdag',
	'Onsdag',
	'Torsdag',
	'Fredag',
	'Lørdag',
	'Søndag',
	];
	date = Published.getDate();
	month = Published.getMonth();
	year = Published.getFullYear();
	articlePublish.textContent =
	dayNames[day - 1] + ' ' + date + '.' + month + '.' + year + '.';

	const articleLink = document.createElement('a');
	articleLink.classList.add('article-url');
	link = document.createTextNode(article.title);
	articleLink.appendChild(link);
	articleLink.title = article.title;
	articleLink.href = article.url;

	articleListItem.appendChild(articleLink);
	articleListItem.appendChild(articleDescription);
	articleListItem.appendChild(articlePublish);

	articleList.innerHTML += articleListItem.outerHTML;
	});
	} catch (error) {
	articleList.innerHTML =
	'Det skjedde en feil. Kunne ikke hente innhold.';
	console.error(error);
	}
	};

	handleArticles();
	</script>
	</body>
	</html>