-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
News App to be up to date over the world
- Loading branch information
1 parent
82f6f47
commit 8848405
Showing
4 changed files
with
284 additions
and
284 deletions.
There are no files selected for viewing
File renamed without changes
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,58 +1,58 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE-edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>News App</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <!-- navigation bar --> | ||
| <nav> | ||
| <div class="navbar container flex"> | ||
| <a href="#" class="app-logo"> | ||
| <img src="images/VS.png" alt="app-logo"> | ||
| </a> | ||
|
|
||
| <div class="nav-items"> | ||
| <ul class="flex"> | ||
| <li class="hover-link nav-item" id="ipl" onclick="onNavItemClick('ipl')">IPL</li> | ||
| <li class="hover-link nav-item" id="finance" onclick="onNavItemClick('finance')">Finance</li> | ||
| <li class="hover-link nav-item" id="politics" onclick="onNavItemClick('politics')">Politics</li> | ||
| <li class="hover-link nav-item" id="technology" onclick="onNavItemClick('technology')">Technology</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="search-box flex"> | ||
| <input id="search-text" type="text" class="news-input" placeholder="e.g. Stocks"> | ||
| <button id="search-button" class="search-button">Search</button> | ||
| </div> | ||
|
|
||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- main body --> | ||
| <main> | ||
| <div class="cards-container container flex" id="cards-container" > | ||
|
|
||
| </div> | ||
| </main> | ||
|
|
||
| <template id="template-news-card"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <img src="https://via.placeholder.com/400x200" alt="news-img" id="news-img"> | ||
| </div> | ||
| <div class="card-content"> | ||
| <h3 id="news-title">This is the title</h3> | ||
| <h6 class="news-source" id="news-source">end gadget</h6> | ||
| <p class="news-desc" id="news-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis recusandae porro quos unde libero obcaecati repellat id asperiores perferendis iusto deleniti autem, dolores aut maiores quod inventore enim incidunt nobis!</p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script src="script.js"></script> | ||
|
|
||
| </body> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE-edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>News App</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <!-- navigation bar --> | ||
| <nav> | ||
| <div class="navbar container flex"> | ||
| <a href="#" class="app-logo"> | ||
| <img src="images/VS.png" alt="app-logo"> | ||
| </a> | ||
|
|
||
| <div class="nav-items"> | ||
| <ul class="flex"> | ||
| <li class="hover-link nav-item" id="ipl" onclick="onNavItemClick('ipl')">IPL</li> | ||
| <li class="hover-link nav-item" id="finance" onclick="onNavItemClick('finance')">Finance</li> | ||
| <li class="hover-link nav-item" id="politics" onclick="onNavItemClick('politics')">Politics</li> | ||
| <li class="hover-link nav-item" id="technology" onclick="onNavItemClick('technology')">Technology</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="search-box flex"> | ||
| <input id="search-text" type="text" class="news-input" placeholder="e.g. Stocks"> | ||
| <button id="search-button" class="search-button">Search</button> | ||
| </div> | ||
|
|
||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- main body --> | ||
| <main> | ||
| <div class="cards-container container flex" id="cards-container" > | ||
|
|
||
| </div> | ||
| </main> | ||
|
|
||
| <template id="template-news-card"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <img src="https://via.placeholder.com/400x200" alt="news-img" id="news-img"> | ||
| </div> | ||
| <div class="card-content"> | ||
| <h3 id="news-title">This is the title</h3> | ||
| <h6 class="news-source" id="news-source">end gadget</h6> | ||
| <p class="news-desc" id="news-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis recusandae porro quos unde libero obcaecati repellat id asperiores perferendis iusto deleniti autem, dolores aut maiores quod inventore enim incidunt nobis!</p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script src="script.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,73 +1,73 @@ | ||
|
|
||
| const API_KEY="e6fb14e684cb4a158f110841c41e5a49"; | ||
| const url="https://newsapi.org/v2/everything?q="; | ||
|
|
||
| window.addEventListener("load",() => fetchnews("India")); | ||
|
|
||
| function reload() { | ||
| window.location.reload(); | ||
| } | ||
|
|
||
|
|
||
| async function fetchnews(query){ | ||
| const res = await fetch(`${url}${query}&apikey=${API_KEY}`); | ||
| const data = await res.json(); | ||
| bindData(data.articles); | ||
| } | ||
|
|
||
| function bindData(articles){ | ||
| const cardscontainer =document.getElementById('cards-container'); | ||
| const newscardTemplate=document.getElementById('template-news-card'); | ||
|
|
||
| cardscontainer.innerHTML=''; | ||
|
|
||
| articles.forEach((article) => { | ||
| if(!article.urlToImage)return; | ||
| const cardClone = newscardTemplate.content.cloneNode(true); | ||
| fillDataInCard(cardClone,article); | ||
| cardscontainer.appendChild(cardClone); | ||
| }); | ||
| } | ||
|
|
||
| function fillDataInCard(cardClone,article){ | ||
| const newsImg = cardClone.querySelector('#news-img'); | ||
| const newsTitle = cardClone.querySelector('#news-title'); | ||
| const newsSource = cardClone.querySelector('#news-source'); | ||
| const newsDesc = cardClone.querySelector('#news-desc'); | ||
|
|
||
| newsImg.src = article.urlToImage; | ||
| newsTitle.innerHTML = article.title; | ||
| newsDesc.innerHTML = article.description; | ||
|
|
||
| const date = new Date(article.publishedAt).toLocaleString("en-US",{ | ||
| timeZone: "Asia/Jakarta" | ||
| }); | ||
|
|
||
| newsSource.innerHTML = `${article.source.name} · ${date}`; | ||
|
|
||
| cardClone.firstElementChild.addEventListener("click",() => { | ||
| window.open(article.url,"_blank"); | ||
| }); | ||
| } | ||
|
|
||
| let curSelectedNav = null; | ||
| function onNavItemClick(id){ | ||
| fetchnews(id); | ||
| const navItem = document.getElementById(id); | ||
| curSelectedNav?.classList.remove("active"); | ||
| curSelectedNav = navItem; | ||
| curSelectedNav.classList.add("active"); | ||
| } | ||
|
|
||
| const searchButton = document.getElementById("search-button"); | ||
| const searchText = document.getElementById("search-text"); | ||
|
|
||
| searchButton.addEventListener("click", () => { | ||
| const query = searchText.value; | ||
| if (!query) return; | ||
| fetchnews(query); | ||
| curSelectedNav?.classList.remove("active"); | ||
| curSelectedNav = null; | ||
| }); | ||
|
|
||
|
|
||
| const API_KEY="e6fb14e684cb4a158f110841c41e5a49"; | ||
| const url="https://newsapi.org/v2/everything?q="; | ||
|
|
||
| window.addEventListener("load",() => fetchnews("India")); | ||
|
|
||
| function reload() { | ||
| window.location.reload(); | ||
| } | ||
|
|
||
|
|
||
| async function fetchnews(query){ | ||
| const res = await fetch(`${url}${query}&apikey=${API_KEY}`); | ||
| const data = await res.json(); | ||
| bindData(data.articles); | ||
| } | ||
|
|
||
| function bindData(articles){ | ||
| const cardscontainer =document.getElementById('cards-container'); | ||
| const newscardTemplate=document.getElementById('template-news-card'); | ||
|
|
||
| cardscontainer.innerHTML=''; | ||
|
|
||
| articles.forEach((article) => { | ||
| if(!article.urlToImage)return; | ||
| const cardClone = newscardTemplate.content.cloneNode(true); | ||
| fillDataInCard(cardClone,article); | ||
| cardscontainer.appendChild(cardClone); | ||
| }); | ||
| } | ||
|
|
||
| function fillDataInCard(cardClone,article){ | ||
| const newsImg = cardClone.querySelector('#news-img'); | ||
| const newsTitle = cardClone.querySelector('#news-title'); | ||
| const newsSource = cardClone.querySelector('#news-source'); | ||
| const newsDesc = cardClone.querySelector('#news-desc'); | ||
|
|
||
| newsImg.src = article.urlToImage; | ||
| newsTitle.innerHTML = article.title; | ||
| newsDesc.innerHTML = article.description; | ||
|
|
||
| const date = new Date(article.publishedAt).toLocaleString("en-US",{ | ||
| timeZone: "Asia/Jakarta" | ||
| }); | ||
|
|
||
| newsSource.innerHTML = `${article.source.name} · ${date}`; | ||
|
|
||
| cardClone.firstElementChild.addEventListener("click",() => { | ||
| window.open(article.url,"_blank"); | ||
| }); | ||
| } | ||
|
|
||
| let curSelectedNav = null; | ||
| function onNavItemClick(id){ | ||
| fetchnews(id); | ||
| const navItem = document.getElementById(id); | ||
| curSelectedNav?.classList.remove("active"); | ||
| curSelectedNav = navItem; | ||
| curSelectedNav.classList.add("active"); | ||
| } | ||
|
|
||
| const searchButton = document.getElementById("search-button"); | ||
| const searchText = document.getElementById("search-text"); | ||
|
|
||
| searchButton.addEventListener("click", () => { | ||
| const query = searchText.value; | ||
| if (!query) return; | ||
| fetchnews(query); | ||
| curSelectedNav?.classList.remove("active"); | ||
| curSelectedNav = null; | ||
| }); | ||
|
|
||
|
|
Oops, something went wrong.