JavaScript ,Map() ДЗ

Question

JavaScript ,Map() ДЗ

Danil Doroshenko Ученик (150), открыт 5 дней назад

Помогите, пожалуйста, не могу разобраться, как сделать задание, буду рад помощи.

Сохраните данные о статьях на главной странице (секция статьи) в отдельный массив внутри JS файла, храните там данные о заголовке, тексте, названии файла со статьей.

<section class="section-articles">
<h2>Статьи</h2>
<article class="section-element">
<h3>текст</h3>
<p>текст</p>
<a href="javascript.html">текст</a>
</article>
<article class="section-element">
<h3>текст</h3>
<p>текст</p>
<a href="technology.html">Читать</a>
</article> <
/section>

Добавляйте новые статьи в секцию со статьями динамически, с использованием данных из массива, который создали

Answer 1

Владислав Вагин Ученик (207) 5 дней назад

const articles = [
{
title: 'Заголовок статьи 1',
text: 'Краткое описание статьи 1...',
link: 'javascript.html'
},
{
title: 'Заголовок статьи 2',
text: 'Краткое описание статьи 2...',
link: 'technology.html'
},
// Добавьте другие статьи по аналогии
];

Danil DoroshenkoУченик (150) 5 дней назад

спасибо!!!

Владислав Вагин Ученик (207) // Получаем ссылку на секцию, куда будем добавлять статьи const articlesSection = document.querySelector('.section-articles'); // Перебираем массив статей articles.forEach(article => { // Создаём элемент статьи const articleElement = document.createElement('article'); articleElement.classList.add('section-element'); // Создаём заголовок статьи const titleElement = document.createElement('h3'); titleElement.textContent = article.title; // Создаём абзац с текстом статьи const textElement = document.createElement('p'); textElement.textContent = article.text;

Answer 2

OpenAI GPT-o1:

 const articles = [ 
  { 
    title: 'Введение в JavaScript', 
    text: 'JavaScript — это язык программирования, который используется для создания интерактивных элементов на веб-страницах.', 
    filename: 'javascript.html' 
  }, 
  { 
    title: 'Современные технологии веб-разработки', 
    text: 'В этой статье рассматриваются последние тенденции и технологии в области веб-разработки.', 
    filename: 'technology.html' 
  }, 
  { 
    title: 'Основы CSS Flexbox', 
    text: 'Flexbox — это модуль CSS, который позволяет легко выравнивать и распределять пространство между элементами внутри контейнера.', 
    filename: 'flexbox.html' 
  } 
  // Добавьте дополнительные статьи по необходимости 
]; 
 
function renderArticles() { 
  const section = document.querySelector('.section-articles'); 
 
  articles.forEach(article => { 
    const articleElem = document.createElement('article'); 
    articleElem.classList.add('section-element'); 
 
    const h3 = document.createElement('h3'); 
    h3.textContent = article.title; 
    articleElem.appendChild(h3); 
 
    const p = document.createElement('p'); 
    p.textContent = article.text; 
    articleElem.appendChild(p); 
 
    const a = document.createElement('a'); 
    a.href = article.filename; 
    a.textContent = 'Читать'; 
    articleElem.appendChild(a); 
 
    section.appendChild(articleElem); 
  }); 
} 
 
document.addEventListener('DOMContentLoaded', renderArticles);