<!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"> <link rel="stylesheet" href="project1.css"> <title>Mobil shop1</title> </head> <body> <header> <div class="container"> <h1 class="logo text-whit">hp</h1> <div class="main-contain"> <p class="p-contain text-red">This webpag is contant shell smart-phone,<br> descount wiht smart-phone,<br> go to by smart-phone now</p> </div> <div class="form"> <form action=""> <label for="Name">Name</label> <input type="text" name="Name" id="Name" required><br> <label for="Email">Email</label> <input type="text" name="Email" id="Email" required><br> <label for="Co.Number">Co.number</label> <input type="text" name="Co.Number" id="Co.Number" required><br> <label for="Phone name">Phone name</label> <input type="text" name="Phone name" id="Phone name" required><br> <input class='button text-green' type="submit" value="bay now"> </form> </div> <div class="head-photo"> <div class="photo photo1"> <img src="./apple.png" alt="this photo is sell phone"> <div class="photo1-ditail"> <p class="text-whit">Name=iphone 12 and pro 5G</p> <p class="text-whit">Rame=6GB</p> <p class="text-whit">Storage=128GB</p> <p class="text-red">Price=1,00,000</p> </div> </div> <div class="photo photo2"> <img src="./oppo.png" alt="this photo is sell phone"> <div class="photo2-ditail"> <p class="text-whit">Name=oppo A31</p> <p class="text-whit">Rame=6GB</p> <p class="text-whit">Storage=128GB</p> <p class="text-red">Price=12,490</p> </div> </div> <div class="photo photo3"> <img src="./Redmi.png" alt="this photo is sell phone"> <div class="photo3-ditail"> <p class="text-whit">Name=Mi 10i 5G</p> <p class="text-whit">Rame=8GB</p> <p class="text-whit">Storage=128GB</p> <p class="text-red">Price=21,990</p> </div> </div> <div class="photo photo4"> <img src="./vivo.png" alt="this photo is sell phone"> <div class="photo4-ditail"> <p class="text-whit">Name=vivo V21e 5G</p> <p class="text-whit">Rame=8GB</p> <p class="text-whit">Storage=128GB</p> <p class="text-red">Price=24,990</p> </div> </div> </div> </div> </header> </body> </html>
*{ margin: 0; padding: 0; box-sizing: border-box; } .text-whit{ color: #fff; } .text-red{ color: red; } .text-green{ color: green; } .container{ /* border: 2px solid blue; */ width: 85%; margin: 0 auto; } /* ################ coding of imag ################## */ header{ height: 100vh; width: 100%; background: linear-gradient(rgb(0,0,0,0.6),rgb(0,0,0,0.6)),url('./pexels-pixabay-531880.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .main-contain{ display:inline-block; } .p-contain{ font-size: 1.5rem; font-weight: 700; letter-spacing: 0.1rem; padding-top: 2rem; margin-left: 1rem; } /* ###################### form coding ############## */ .form{ float: right; color: #fff; font-size: 1.5rem; margin-top: 5rem; width: 40%; } form::after{ contain: ''; display: block; clear: both; } label{ margin-bottom: 1rem; } input{ margin-bottom: 1rem; width: 60%; border: 2px solid red; } .button{ width: 20%; border-radius: 20%; height: 4vh; } /* ######################### apple phon ######################### */ .photo1 img{ border: 2px solid #fff; border-radius: 10%; margin-top: 3rem; margin-left: 1rem; height: 180px; } .photo1-ditail{ float: right; margin-top: 5rem; margin-right: 10rem; font-size: 1.4rem; } /* ######################### oppo phon ######################### */ .photo2{ float: left; } .photo2 img{ border-radius: 10%; margin-top: 3rem; margin-left: 10rem; height: 200px; } .photo2-ditail{ margin-left: 10rem; font-size: 1.3rem; } /* ######################### mi phon ######################### */ .photo3{ float: left; } .photo3 img{ border-radius: 10%; margin-top: 3rem; margin-left: 10rem; height: 200px; } .photo3-ditail{ margin-left: 10rem; font-size: 1.3rem; } /* ######################### vivo phon ######################### */ .photo4{ float: right; } .photo4 img{ border-radius: 10%; margin-top: 3rem; margin-right: 10rem; height: 200px; } .photo4-ditail{ margin-right: 10rem; font-size: 1.3rem; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- link bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/c6c6473cc1.js" crossorigin="anonymous"></script> <!-- link css file --> <link rel="stylesheet" href="news.css"> <title>News page</title> </head> <body> <nav class="navbar navbar-dark bg-dark"> <div class="container news_navbar col-md-4"> <img src="./360_F_88435823_c3MiOAvV8gFwtQzTGlsLt6I6mFvQuQmN.png" alt="" class="newsLogo"> <h1 class="head">News headline (Day to Day)</h1> </div> </nav> <div class="container country col-md-8"> <div class="newsTitle "> <h2 class="my-2 title">Select <span class="badge btn-success"> Country</span></h2> </div> <div class="selectNewsApp"> <div class="form-check my-1 mx-2"> <input class="form-check-input" type="radio" name="Country" id="India"> <label class="form-check-label" for="flexRadioDefault1"> India </label> </div> <div class="form-check my-1 mx-2"> <input class="form-check-input" type="radio" name="Country" id="UnitedKingdom" checked> <label class="form-check-label" for="flexRadioDefault2"> United Kingdom </label> </div> <div class="form-check my-1 mx-2"> <input class="form-check-input" type="radio" name="Country" id="Australia" checked> <label class="form-check-label" for="flexRadioDefault2"> Australia </label> </div> <div class="form-check my-1 mx-2"> <input class="form-check-input" type="radio" name="Country" id="Argentina" checked> <label class="form-check-label" for="flexRadioDefault2"> Argentina </label> </div> <div class="form-check my-1 mx-2"> <input class="form-check-input" type="radio" name="Country" id="NewZealand" checked> <label class="form-check-label" for="flexRadioDefault2"> New Zealand </label> </div> </div> <div class="showNews my-3 mx-2"> <button type="button" id="newsbtn" class="btn btn-success">N e w s</button> </div> <div id="collepsNews"> </div> </div> <div id="sectionBar"> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> <!-- link java script file --> <script src="news.js"></script> </html>
*{ margin: 0px; padding: 0px; box-sizing: border-box; } .navbar .news_navbar .newsLogo{ height: 43px; width: 43px; border-radius: 50%; } .navbar .news_navbar .head{ color: whitesmoke; font-size: 1.8rem; margin: auto 0; } .container .newsTitle h2.title{ font-size: 1.8rem; } .showNews #news{ font-weight: bold; font-size: 1.1rem; } #sectionBar{ position: absolute; bottom: 0; margin: auto; width: 100%; height: 8%; background-color: rgb(36, 34, 34); } #sectionh1{ text-align: center; color: red; font-size: 1.3rem; } #sectionBar a{ font-size: 1.2rem; font-weight: bolder; color: white; text-decoration: none; } /* ################################## midia qurey ####################### */ @media (min-width:1100px) and (max-width:1290px){ .navbar .news_navbar .newsLogo{ height: 39px; width: 39px; } .navbar .news_navbar .head{ font-size: 1.5rem; } #sectionBar{ height: 7%; } #sectionh1{ font-size: 1.1rem; } } @media (min-width:866px) and (max-width:1100px){ .navbar .news_navbar .newsLogo{ height: 32px; width: 32px; } .navbar .news_navbar .head{ font-size: 1.1rem; } #sectionBar{ height: 7%; } #sectionBar{ height: 7%; } #sectionh1{ font-size: 1.1rem; } .container .newsTitle h2.title{ font-size: 1.7rem; } #collepsNews #news p button{ font-size: 1rem; } } @media (min-width:200px) and (max-width:866px){ .navbar .news_navbar .newsLogo{ height: 28px; width: 28px; } .navbar .news_navbar .head{ font-size: 1rem; } #sectionBar{ height: 7%; } #sectionh1{ font-size: 1rem; } #sectionBar a{ font-size: 1.1rem; padding-top: 0.3rem; } .container .newsTitle h2.title{ font-size: 1.5rem; } #collepsNews #news p button{ font-size: 0.9rem; font-weight: 500; font-family: Arial, Helvetica, sans-serif; } #collepsNews #news div{ font-size: 0.9rem; font-weight: 500; font-family: Arial, Helvetica, sans-serif; } .country{ width: 700px; } } @media (min-width:200px) and (max-width:580px){ #collepsNews #news p button{ font-size: 0.8rem; font-weight: 700; font-family: Arial, Helvetica, sans-serif; } #collepsNews #news div{ font-size: 0.7rem; font-weight: 600; font-family: Arial, Helvetica, sans-serif; } .country{ width: 100%; } }
// get checked button let india = document.getElementById('India'); let unitedKingdom = document.getElementById('UnitedKingdom'); let australia = document.getElementById('Australia'); let argentina = document.getElementById('Argentina'); let newZealand = document.getElementById('NewZealand'); function getData() { // api key let ApiKey = "hear past your API key i.e 8e2____7b0d____10d"; // the radio button checked for if else condtion if (india.checked) { url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=${ApiKey}`; // use fetch api fetch(url).then((response) => { return response.json(); }).then((data) => { // get div and add news in that div.collepsNews let collepsNews = document.getElementById('collepsNews'); let articles = data.articles; let NewHtml = ''; articles.forEach(function (element, index) { let news = ` <div style="text-align: left; margin: 1rem;" class="cared" id="news"> <p> <button style="width: 100%; text-align: left;" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample${index + 1}" aria-expanded="false" aria-controls="collapseWidthExample"> <img style="width: 100px; border: 2px solid whitesmoke;" src="${element.urlToImage}" alt=""> ${index + 1} ${element.title} </button> </p> <div style="margin: auto;" class="collapse collapse-horizontal " id="collapseWidthExample${index + 1}"> <div class="card card-body" style="margin: auto;width: 100%;" > ${element.content} <a href="${element.url}" target="_blank"> Read More </a> </div> </div> </div> ` NewHtml += news; }); collepsNews.innerHTML = NewHtml; }) } else if (unitedKingdom.checked) { url = `https://newsapi.org/v2/top-headlines?country=gb&apiKey=${ApiKey}`; fetch(url).then((response) => { return response.json(); }).then((data) => { let collepsNews = document.getElementById('collepsNews'); let articles = data.articles; let NewHtml = ''; articles.forEach(function (element, index) { let news = ` <div style="text-align: left; margin: 1rem;" class="cared" id="news"> <p> <button style="width: 100%; text-align: left;" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample${index + 1}" aria-expanded="false" aria-controls="collapseWidthExample"> <img style="width: 100px; border: 2px solid whitesmoke;" src="${element.urlToImage}" alt=""> ${index + 1} ${element.title} </button> </p> <div style="margin: auto;" class="collapse collapse-horizontal " id="collapseWidthExample${index + 1}"> <div class="card card-body" style="margin: auto;width: 100%;" > ${element.content} <a href="${element.url}" target="_blank"> Read More </a> </div> </div> </div> ` NewHtml += news; }); collepsNews.innerHTML = NewHtml; }) } else if (australia.checked) { url = `https://newsapi.org/v2/top-headlines?country=au&apiKey=${ApiKey}` fetch(url).then((response) => { return response.json(); }).then((data) => { let collepsNews = document.getElementById('collepsNews'); let articles = data.articles; let NewHtml = ''; articles.forEach(function (element, index) { let news = ` <div style="text-align: left; margin: 1rem;" class="cared" id="news"> <p> <button style="width: 100%; text-align: left;" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample${index + 1}" aria-expanded="false" aria-controls="collapseWidthExample"> <img style="width: 100px; border: 2px solid whitesmoke;" src="${element.urlToImage}" alt=""> ${index + 1 } ${element.title} </button> </p> <div style="margin: auto;" class="collapse collapse-horizontal " id="collapseWidthExample${index + 1}"> <div class="card card-body" style="margin: auto;width: 100%;" > ${element.content} <a href="${element.url}" target="_blank"> Read More </a> </div> </div> </div> ` NewHtml += news; }); collepsNews.innerHTML = NewHtml; }) } else if (argentina.checked) { url = `https://newsapi.org/v2/top-headlines?country=ar&apiKey=${ApiKey}` fetch(url).then((response) =>{ return response.json(); }).then((data) => { let collepsNews = document.getElementById('collepsNews'); let articles = data.articles; let NewHtml = ''; articles.forEach(function (element, index) { let news = ` <div style="text-align: left; margin: 1rem;" class="cared" id="news"> <p> <button style="width: 100%; text-align: left;" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample${index + 1}" aria-expanded="false" aria-controls="collapseWidthExample"> <img style="width: 100px; border: 2px solid whitesmoke;" src="${element.urlToImage}" alt=""> ${index + 1} ${element.title} </button> </p> <div style="margin: auto;" class="collapse collapse-horizontal " id="collapseWidthExample${index + 1}"> <div class="card card-body" style="margin: auto;width: 100%;" > ${element.content} <a href="${element.url}" target="_blank"> Read More </a> </div> </div> </div> ` NewHtml += news; }); collepsNews.innerHTML = NewHtml; }) } else { url = `https://newsapi.org/v2/top-headlines?country=nz&apiKey=${ApiKey}` fetch(url).then((response) => { return response.json(); }).then((data) => { let collepsNews = document.getElementById('collepsNews'); let articles = data.articles; let NewHtml = ''; articles.forEach(function (element, index) { let news = ` <div style="text-align: left; margin: 1rem;" class="cared" id="news"> <p> <button style="width: 100%; text-align: left;" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample${index + 1}" aria-expanded="false" aria-controls="collapseWidthExample"> <img style="width: 100px; border: 2px solid whitesmoke;" src="${element.urlToImage}" alt=""> ${index + 1} ${element.title} </button> </p> <div style="margin: auto;" class="collapse collapse-horizontal " id="collapseWidthExample${index + 1}"> <div class="card card-body" style="margin: auto;width: 100%;" > ${element.content} <a href="${element.url}" target="_blank"> Read More </a> </div> </div> </div> ` NewHtml += news; }); collepsNews.innerHTML = NewHtml; }) } } // get sectionh1 in sectionBar const sectionBar = document.getElementById('sectionBar'); // get year for date function let date = new Date(); let year = date.getFullYear(); // add <h2> and two <a> tag let section = ` <h2 id="sectionh1"> Copyright side © ${year} <br> <a class="fa-brands fa-instagram" href=""></a> <a class="fa-brands fa-facebook" href=""></a> </h2> ` ; // change innerHTML sectionBar.innerHTML = section; // get button let newsbtn = document.getElementById('newsbtn'); // add click event on newsbtn newsbtn.addEventListener('click', showNews); // showNews function function showNews() { getData(); sectionBar.style.bottom = '100vh'; }