Tutorial : News App
Creating Pages

Creating Pages

1. Creating the Home/Top Headlines Page

In the Pages/Home.js Create a skeleton for news app:

//use inline html vs code extension to write html like these in template strings. Don't forget write /*html*/ or /*css*/
//before template string after installing inline html extention.
import Navbar from "../components/Navbar/Navbar.js"
const Home = /*html*/ `
<div class="Text">
    <div id="headAndNav">
        <h1 class="title">Top Headlines 🌐</h1>
        <div class="bg">${Navbar()}</div>
    </div>
    <div id="top-news-articles">
 
    </div>
</div>
`;
export default Home;

2. Similarly create a CNN news page(Pages/Cnn.js) :

 
//use inline html vs code extension to write html like these in template strings. Don't forget write /*html*/ or /*css*/
//before template string after installing inline html extention.
import Navbar from "../components/Navbar/Navbar.js"
const Cnn = /*html*/ `
<div class="Text">
    <div id="headAndNav">
        <h1 class="title">CNN news 🌐</h1>
        <div class="bg">${Navbar()}</div>
    </div>
    <div id="cnn-news-articles">
 
    </div>
</div>
`;
export default Cnn;

3. Edit the Navbar to point to your pages :

const Navbar = () =>{
  return(
      /*html*/`
  <link rel="stylesheet" href="./components/Navbar/Navbar.css">
  <ul id="navbar">
      <li onclick="Home()">Headlines</li>
      <li onclick="Cnn()">News from Cnn</li>
  </ul>
`
  )
}
export default Navbar
Creating ComponentsAdding Logic