Skip to content

Commit b0d900d

Browse files
w24351789w24351789
committed
finish
1 parent 2a9f32f commit b0d900d

17 files changed

+11037
-4347
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎assets/css/modules/_global.css

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.container {
2+
3+
display: grid;
4+
grid-template-rows: repeat(2, 300px);
5+
grid-template-columns: repeat(4, 300px);
6+
grid-gap: 20px;
7+
8+
9+
}
10+
11+
.item{
12+
background-color: black;
13+
}
14+
15+
.item__1 {
16+
17+
background-color: orange;
18+
grid-row: 1 / 2 ;
19+
grid-column: 1 / 2;
20+
}
21+
.item__2 {
22+
background-color: orange;
23+
grid-row: 1 / 2 ;
24+
grid-column: 2 / 3;
25+
}
26+
.item__3 {
27+
background-color: orange;
28+
grid-row: 1 / 2 ;
29+
grid-column: 3 / 4;
30+
}
31+
.item__4 {
32+
background-color: orange;
33+
grid-row: 1 / -1 ;
34+
grid-column: 4 / 5;
35+
}
36+
.item__5 {
37+
background-color: orange;
38+
grid-row: 2 / 3 ;
39+
grid-column: 1 / 2;
40+
}
41+
.item__6 {
42+
background-color: orange;
43+
grid-row: 2 / 3 ;
44+
grid-column: 2 / 4;
45+
}
46+
47+
img{
48+
width: 100%;
49+
height: 100%;
50+
object-fit: cover;
51+
display: block;
52+
}

‎assets/css/stylc.css

Whitespace-only changes.

‎assets/css/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "./modules/_global.css";

‎assets/index.html

+6-8
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@
1010

1111
<body>
1212
<div class='container'>
13-
<h1>SocialNews</h1>
14-
<ul id='socialNews' class='list-group'></ul>
15-
<h1>EntertainmentNews</h1>
16-
<ul id='entertainmentNews' class='list-group'></ul>
17-
<h1>SportNews</h1>
18-
<ul id='sportNews' class='list-group'></ul>
19-
<h1>TaiwanNews</h1>
20-
<ul id='taiwanNews' class='list-group'></ul>
13+
<div id='socialNews' class='item item__1 list-group'></div>
14+
<div id='entertainmentNews' class='item item__2 list-group'></div>
15+
<div id='sportNews' class='item item__3 list-group'></div>
16+
<div id='taiwanNews' class='item item__4 list-group'></div>
17+
<div id='nbaNews' class='item item__5 list-group'></div>
18+
<div id='nycNews' class='item item__6 list-group'></div>
2119
</div>
2220
</body>
2321

‎assets/js/app.js

+23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import $ from "jquery";
22
import 'bootstrap-css-only';
3+
import '../css/style.css';
34
import gNews from './modules/gNews';
45
import { newsTemplate } from './modules/templates';
56

@@ -43,7 +44,29 @@ const getTaiwanNews = async () => {
4344
}
4445
};
4546

47+
const getNbaNews = async () => {
48+
try {
49+
let resp = await gNews("/everything?q=nba");
50+
let newsList = resp.data.articles.map(news => newsTemplate(news));
51+
$("#nbaNews").html(newsList);
52+
} catch (error) {
53+
console.log(error);
54+
}
55+
};
56+
57+
const getNycNews = async () => {
58+
try {
59+
let resp = await gNews("/everything?q=nyc");
60+
let newsList = resp.data.articles.map(news => newsTemplate(news));
61+
$("#nycNews").html(newsList);
62+
} catch (error) {
63+
console.log(error);
64+
}
65+
};
66+
4667
getSocialNews();
4768
getEntertainmentNews();
4869
getSportNews();
4970
getTaiwanNews();
71+
getNbaNews();
72+
getNycNews();

‎assets/js/modules/gNews.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import axios from 'axios';
2-
const apiKey = "127c5255e73042c29827cffc2091d4bf";
2+
const apiKey = "1a1e3f52668d4687ae7e585116f09f7e";
33

44
export default axios.create({
55
method: "get",
66
baseURL: "https://newsapi.org/v2",
77
params: {
8-
pageSize: 4
8+
pageSize: 1
99
},
1010
headers: {
1111
Authorization: apiKey

‎assets/js/modules/templates.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
export const newsTemplate = news => `
2-
<li class="list-group-item">
3-
<h2>${news.title}</h2>
42
<img src="${news.urlToImage}" alt="newsImage">
5-
<p>${news.description}</p>
6-
</li>
73
`;

‎dist/bundle.1992cd6fc3052f4a7eaa.js

+46
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle.795727d4eb1717b59dc2.js

-468
This file was deleted.

‎dist/css/style.202caac19a515259dfb7.css

+63
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/style.2f2907125bd0f1fcf39d.css

-6
This file was deleted.

‎dist/index.html

+8-10
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,17 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<title>NewsWeb</title>
9-
<link href="css/style.2f2907125bd0f1fcf39d.css" rel="stylesheet"></head>
9+
<link href="css/style.202caac19a515259dfb7.css" rel="stylesheet"></head>
1010

1111
<body>
1212
<div class='container'>
13-
<h1>SocialNews</h1>
14-
<ul id='socialNews' class='list-group'></ul>
15-
<h1>EntertainmentNews</h1>
16-
<ul id='entertainmentNews' class='list-group'></ul>
17-
<h1>SportNews</h1>
18-
<ul id='sportNews' class='list-group'></ul>
19-
<h1>TaiwanNews</h1>
20-
<ul id='taiwanNews' class='list-group'></ul>
13+
<div id='socialNews' class='item item__1 list-group'></div>
14+
<div id='entertainmentNews' class='item item__2 list-group'></div>
15+
<div id='sportNews' class='item item__3 list-group'></div>
16+
<div id='taiwanNews' class='item item__4 list-group'></div>
17+
<div id='nbaNews' class='item item__5 list-group'></div>
18+
<div id='nycNews' class='item item__6 list-group'></div>
2119
</div>
22-
<script type="text/javascript" src="polyfill.8f5d238492dbb014fbbe.js"></script><script type="text/javascript" src="bundle.795727d4eb1717b59dc2.js"></script></body>
20+
<script type="text/javascript" src="polyfill.320713513f6ba0bce8ff.js"></script><script type="text/javascript" src="bundle.1992cd6fc3052f4a7eaa.js"></script></body>
2321

2422
</html>

‎dist/polyfill.320713513f6ba0bce8ff.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)