apna-college · AchyuthaVikaram · Apr 19, 2024
diff --git a/Vikaram Achyutha/README.md b/Vikaram Achyutha/README.md
@@ -0,0 +1,15 @@
+# News Generator Project
+
+Upon Entering A topic name ,you can get varoius news articles related to that topic and upon cliking on the article card you will be directed to a webpage where you could find full details of that article
+
+try seaching for topics like... AI , Elon Musk , Web, apple , tesla ...etc
+
+# Technologies used:
+
+1. HTML
+2. CSS
+3. JavaScript
+
+#API used:
+
+Website For API:https://newsapi.org
diff --git a/Vikaram Achyutha/app.js b/Vikaram Achyutha/app.js
@@ -0,0 +1,83 @@
+const apikey="80dc4d48d5f04eb7b83412bcd2a2a352";
+let container=document.querySelector(".text");
+let input=document.querySelector("#search-text");
+let btn=document.querySelector("#search-btn");
+let result=document.querySelector(".result");
+let heading=document.querySelector("h1");
+btn.addEventListener("click",async()=>{
+    container.innerText="";
+    result.innerText="";
+    let query=input.value.trim();
+    console.log(query);
+    if(query !=""){
+        try{
+            heading.innerText=`Top Updates On ${query} Today`
+            await getNews(query);
+        }catch(err){
+            heading.innerText="Can't Fetch News";
+            result.innerText=`unable to fetch news by query..${err}`;   
+        }
+    }else{
+        heading.innerText="Can't Fetch News";
+        result.innerText=`Query is Empty....unable to fetch news..`;  
+    }
+})
+async function getNews(query){
+    try{
+        let url=`https://newsapi.org/v2/everything?q=${query}&apiKey=${apikey}`;
+        let res=await fetch(url);
+        console.log(res);
+        let validRes=await res.json();
+        console.log(validRes);
+        let arr=validRes.articles;
+        if(arr.length!=0){
+            console.log(arr);
+            MakeConatiner(arr);
+        }else{
+            result.innerText=`nothing to fetch about ${query}...please try aging with similar terms`;
+        }
+    }catch(err){
+        heading.innerText="Can't Fetch News";
+        result.innerText=`unable to fetch news..${err}`; 
+    }
+}
+function MakeConatiner(arr){
+    arr.forEach((article)=>{
+        if(article.title!="[Removed]"){
+              let card= createCard(article);
+            container.appendChild(card);
+            card.addEventListener("click",()=>{
+                window.open(article.url,"_blank");
+            })
+        }
+    })    
+}
+function createCard(article){
+    let card=document.createElement("div");
+    card.classList.add("card");
+    let img=document.createElement("img");
+    let title=document.createElement("p");
+    let text=document.createElement("p");
+    title.classList.add("title");
+    img.src=article.urlToImage;
+    img.alt=article.title;
+    const truncatedTitle=article.title.length > 30 ? article.title.slice(0,30)+"..." : article.title;
+    title.innerText=truncatedTitle;
+    const truncatedDesc=article.description.length > 150 ? article.description.slice(0,150)+"..." : article.title;
+    text.innerText=truncatedDesc;
+    card.append(img);
+    card.append(title);
+    card.append(text); 
+    return card;    
+}
+
+
+
+(async()=>{
+    await getNews("ai");
+})();
+
+
+
+
+
diff --git a/Vikaram Achyutha/index.html b/Vikaram Achyutha/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>News API Project</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav>
+        <div class="nav-bar">
+            <a href="index.html">News.</a>
+            <div class="search">
+                <input type="text" placeholder="enter something.." name="search" id="search-text">
+                <button id="search-btn"> search</button>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <div class="heading">
+            <h1>Top Updates On AI Today </h1>
+            <br><hr><br>
+        </div>
+
+        <section>
+            <div class="text ">
+            </div>
+            <p class="result"></p>
+        </section>
+    </main>
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Vikaram Achyutha/style.css b/Vikaram Achyutha/style.css
@@ -0,0 +1,107 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins", sans-serif;
+    font-weight: 400; 
+}
+.heading{
+    color:rgb(230, 6, 6);
+    text-shadow: 0.5px 0.5px 2px rgb(230, 6, 6);
+    text-align: center;
+    margin: 1.5rem 0;
+}
+.heading h1{
+  font-family:sans-serif  ;
+}
+.heading hr{
+    height: 2px;  
+    background-color: #2c6e49;  
+    border: none;
+    margin:0 2rem ;     
+}
+.nav-bar{
+    height: 4.5rem;
+    width: 100vw;
+    background-color: #2c6e49;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav-bar a{
+    text-decoration: none;
+    font-size: 1.5rem;
+    color:#fff;
+    font-weight: 500;
+    margin-left: 3rem;
+}
+.nav-bar .search input{
+   height:1.25rem;
+   border: none;
+   border-radius:0.25rem;
+   padding: 0.5rem 1rem;
+}
+.nav-bar .search button{
+    height: 2.2rem;
+    padding:0.4rem 1rem;
+    border-radius:0.25rem;
+    border: none;
+    background-color: #52b788;
+    color: white;
+    margin-right: 3rem;
+    margin-left:0.5rem;
+}
+section{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.text{
+    display: flex;
+    margin:1rem 4rem;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+.card{
+    width: 17.5rem;
+    border: 2px solid gray;
+    margin: 0.5rem;
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    cursor: pointer;
+    box-sizing: border-box;
+    height:25rem;
+    overflow: hidden;
+}
+.card img{
+    height:45%;
+    width: 100%;
+    border-radius:5px;
+}
+.card .title{
+    margin:0.75rem 0;
+    font-size: 1.12rem;
+    font-weight: 500;
+    color: #141414;
+}
+.card:hover{
+    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
+}
+
+@media (max-width:545px){
+    .nav-bar a{
+        font-size: 1rem;
+        margin-left:0.5rem;
+    }
+    .nav-bar .search input{
+        width:200px;
+        padding: 0.5rem 0.5rem;
+     }
+     .nav-bar .search button{
+        padding:0.4rem 0.4rem;
+        margin-right:0.5rem;
+        margin-left:0.25rem;
+    }
+
+}