source files for html,css and javascript

VivekShahare04 · Nov 5, 2023 · 82f6f47 · 82f6f47
1 parent 438d3d9
commit 82f6f47
Show file tree

Hide file tree

Showing 3 changed files with 285 additions and 0 deletions.
diff --git a/News App/index.html b/News App/index.html
@@ -0,0 +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>
+</html>
diff --git a/News App/script.js b/News App/script.js
@@ -0,0 +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;
+});	
+
+
diff --git a/News App/style.css b/News App/style.css
@@ -0,0 +1,154 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@500&display=swap");
+
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+:root{
+    --primary-text-color: #183b56;
+    --secondary-text-color: #577592;
+    --accent-color: #2294ed;
+    --accent-color-dark: #1d69a3;
+}
+
+body{
+    font-family: "Poppins", sans-serif;
+    color: var(--primary-text-color);
+}
+
+p{
+    font-family: "Roboto",sans-serif;
+    color: var(--secondary-text-color);
+    line-height: 1.4rem;
+}
+
+a{
+    text-decoration: none;
+}
+
+ul{
+    list-style: none;
+}
+
+.flex{
+    display: flex;
+    align-items: center;
+}
+
+.container{
+    max-width: 1180px;
+    margin-inline: auto;
+    overflow: hidden;
+}
+
+nav{
+    background-color: #f3faff;
+    box-shadow: 0 0 4px #bbd0e2;
+    position: fixed;
+    top: 0;
+    z-index: 99;
+    left: 0;
+    right: 0;
+}
+
+.navbar{
+    justify-content: space-between;
+    padding-block: 10px;
+}
+
+.app-logo img{
+    width: 100px;
+}
+
+.nav-items ul{
+    gap: 20px;
+}
+
+.hover-link{
+    cursor: pointer;
+}
+
+.hover-link:hover{
+    color: var(--accent-color-dark);
+}
+
+.hover-link:active{
+    color: brown;
+}
+
+.nav-items.active{
+    color: var(--accent-color);
+}
+
+.search-box{
+    height: 32px;
+    gap: 8px;
+}
+
+.news-input{
+    width: 200px;
+    height: 100%;
+    padding-inline: 12px;
+    border-radius: 4px;
+    border: 2px solid #bbd0e2;
+    font-family: "Roboto",sans-serif;
+}
+
+.search-button{
+    background-color: var(--accent-color);
+    color:white;
+    padding: 8px 24px;
+    border:none;
+    border-radius: 4px;
+    font-family: "Roboto",sans-serif;
+}
+
+.search-button:hover{
+    background-color: var(--accent-color-dark);
+}
+
+main{
+    padding-block: 20px;
+    margin-top: 120px;
+}
+
+.cards-container{
+    justify-content: space-between;
+    flex-wrap: wrap;
+    row-gap: 20px;
+    align-items: start;
+}
+
+.card{
+    width: 360px;
+    min-height: 400px;
+    box-shadow: 0 0 4px #d4effd;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: #f3faff;
+    overflow: hidden;
+    transition: all .5s ease;
+}
+
+.card:hover{
+    box-shadow: 1px 1px 8px #d4effd;
+    background-color: #f9fdff;
+    transform: translateY(-2px);
+}
+
+.card-header img{
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+}
+
+.card-content{
+    padding: 12px;
+}
+
+.news-source{
+    margin-block: 13px;
+}
+