Browse Source

feat(modules)

Joe Richardson 6 months ago
parent
commit
80cf4c8e8d
4 changed files with 64 additions and 60 deletions
  1. 8
    5
      css/style.css
  2. 2
    2
      index.html
  3. 52
    51
      js/main.js
  4. 2
    2
      scss/style.scss

+ 8
- 5
css/style.css View File

@@ -37,19 +37,22 @@ a {
37 37
   margin: 0 auto;
38 38
   padding: 10px;
39 39
   display: grid;
40
-  grid-gap: 10px;
41
-  grid-template-columns: repeat(4, 1fr); }
40
+  grid-gap: 15px;
41
+  grid-template-columns: repeat(12, 1fr); }
42 42
 
43 43
 .block {
44 44
   padding: 20px 30px;
45 45
   background-color: transparent;
46 46
   border: 1px solid #2B2B28;
47 47
   display: inline-block;
48
-  width: 100%; }
48
+  width: 100%;
49
+  grid-column: span 3; }
49 50
   .block-half {
50
-    grid-column: span 2; }
51
-  .block-full {
51
+    grid-column: span 6; }
52
+  .block-third {
52 53
     grid-column: span 4; }
54
+  .block-full {
55
+    grid-column: span 12; }
53 56
   .block-flush {
54 57
     padding: 0; }
55 58
 

+ 2
- 2
index.html View File

@@ -65,12 +65,12 @@
65 65
         <marquee id="sports" scrollamount="10"></marquee>
66 66
       </ul>
67 67
 
68
-      <ul class="block block-third">
68
+      <ul class="block block-half">
69 69
         <li class="header">~ NASA</li>
70 70
         <img width="100%" height="auto" id="nasa">
71 71
       </ul>
72 72
 
73
-      <ul class="block block-third" id="music">
73
+      <ul class="block block-half" id="music">
74 74
         <li class="header">~ Music</li>
75 75
       </ul>
76 76
     </div>

+ 52
- 51
js/main.js View File

@@ -1,19 +1,19 @@
1
-const city = `Loughborough`
2
-const API_KEY = `c17b224e52a70e931ce9dfad435ee274`
3
-const APP_ID = `fd8f5fd1`
4
-const WEATHER_URL = `http://api.weatherunlocked.com/api/current/52.7721,1.2062?app_id=${APP_ID}&app_key=${API_KEY}`
1
+const city = `Loughborough`;
2
+const API_KEY = `c17b224e52a70e931ce9dfad435ee274`;
3
+const APP_ID = `fd8f5fd1`;
4
+const WEATHER_URL = `http://api.weatherunlocked.com/api/current/52.7721,1.2062?app_id=${APP_ID}&app_key=${API_KEY}`;
5 5
 
6
-const NEWS_URL = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fnews.ycombinator.com%2Frss`
6
+const NEWS_URL = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fnews.ycombinator.com%2Frss`;
7 7
 
8 8
 const SPORTS_URL = `https://cors-anywhere.herokuapp.com/https://livescore-api.com/api-client/scores/live.json?key=OA2ITWWU33fWx7dD&secret=vN3cFHIpCa955krUUtCNqzIuCXqa5ENB`;
9 9
 
10 10
 const NASA_URL = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.nasa.gov%2Frss%2Fdyn%2Flg_image_of_the_day.rss`;
11 11
 
12
-const ITUNES_URL = `https://cors-anywhere.herokuapp.com/https://rss.itunes.apple.com/api/v1/gb/apple-music/new-releases/all/10/explicit.json`;
12
+const MUSIC_URL = `https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.rap-up.com%2Ffeed%2F`;
13 13
 
14
-let icon = document.querySelector('.icon');
15
-let temp = document.querySelector('.temp');
16
-let type = document.querySelector('.type');
14
+let icon = document.querySelector(".icon");
15
+let temp = document.querySelector(".temp");
16
+let type = document.querySelector(".type");
17 17
 
18 18
 const hn = document.getElementById(`hn`);
19 19
 const sports = document.getElementById(`sports`);
@@ -26,15 +26,15 @@ fetch(WEATHER_URL)
26 26
     return response.json();
27 27
   })
28 28
   .then(function(res) {
29
-    const image = `http://www.weatherunlocked.com/Images/icons/1/${res.wx_icon}`
30
-    let response = res
31
-    let degrees = response.temp_c
29
+    const image = `http://www.weatherunlocked.com/Images/icons/1/${res.wx_icon}`;
30
+    let response = res;
31
+    let degrees = response.temp_c;
32 32
     let label = response.wx_desc;
33 33
 
34 34
     type.innerHTML = label;
35 35
     temp.innerHTML = degrees;
36 36
 
37
-    icon.src = image
37
+    icon.src = image;
38 38
   });
39 39
 
40 40
 fetch(NEWS_URL)
@@ -43,79 +43,80 @@ fetch(NEWS_URL)
43 43
   })
44 44
   .then(function(res) {
45 45
     const items = res.items;
46
-    const template = function (item) {
46
+    const template = function(item) {
47 47
       return `
48 48
         <a class="limit" href="${item.link}" title="${item.title}">
49 49
           <span class="op5">${moment(item.pubDate).format(`D/M/YY`)}</span>
50
-          ${item.title.length > 65 ?
51
-          item.title.substring(0, 65 - 3) + "..." :
52
-          item.title}
50
+          ${item.title.length > 65 ? item.title.substring(0, 65 - 3) + "..." : item.title}
53 51
         </a>
54
-      `
55
-    }
52
+      `;
53
+    };
56 54
 
57 55
     items.map(function(item) {
58 56
       const listItem = document.createElement(`li`);
59
-      listItem.style.marginBottom = `5px`
60
-      listItem.innerHTML = template(item)
61
-      hn.appendChild(listItem)
57
+      listItem.style.marginBottom = `5px`;
58
+      listItem.innerHTML = template(item);
59
+      hn.appendChild(listItem);
62 60
     });
63
-  })
64
-
65
-  storage.addEventListener('keydown', function(event) {
66
-    localStorage.setItem(`newTabNotes`, event.target.value);
67 61
   });
68 62
 
63
+storage.addEventListener("keydown", function(event) {
64
+  localStorage.setItem(`newTabNotes`, event.target.value);
65
+});
66
+
69 67
 if (localStorage.getItem(`newTabNotes`)) {
70 68
   storage.innerText = localStorage.getItem(`newTabNotes`);
71 69
 }
72 70
 
73 71
 fetch(SPORTS_URL)
74 72
   .then(function(response) {
75
-    return response.json()
73
+    return response.json();
76 74
   })
77 75
   .then(function(res) {
78 76
     const items = res.data.match;
79
-    const template = function (item) {
77
+    const template = function(item) {
80 78
       return `
81 79
         <span><i>${item.home_name}</i> ${item.score} <i>${item.away_name}</i> (${item.time})</span>
82
-      `
83
-    }
80
+      `;
81
+    };
84 82
 
85
-    items.map(function (item) {
83
+    items.map(function(item) {
86 84
       const listItem = document.createElement(`li`);
87
-      listItem.innerHTML = template(item)
85
+      listItem.innerHTML = template(item);
88 86
       listItem.style.display = `inline-block`;
89 87
       listItem.style.marginRight = `15px`;
90
-      sports.appendChild(listItem)
88
+      sports.appendChild(listItem);
91 89
     });
92 90
   });
93 91
 
94 92
 fetch(NASA_URL)
95
-  .then(function (response) {
96
-    return response.json()
93
+  .then(function(response) {
94
+    return response.json();
97 95
   })
98
-  .then(function (res) {
99
-    nasa.src = res.items[Math.floor(Math.random() * 11)].enclosure.link
100
-    nasa.title = res.items[Math.floor(Math.random() * 11)].title
96
+  .then(function(res) {
97
+    nasa.src = res.items[Math.floor(Math.random() * 11)].enclosure.link;
98
+    nasa.title = res.items[Math.floor(Math.random() * 11)].title;
101 99
   });
102 100
 
103
-fetch(ITUNES_URL)
104
-  .then(function (response) {
105
-    return response.json()
101
+fetch(MUSIC_URL)
102
+  .then(function(response) {
103
+    return response.json();
106 104
   })
107
-  .then(function (res) {
108
-    const items = res.feed.results;
109
-    const template = function (item) {
105
+  .then(function(res) {
106
+    const items = res.items;
107
+    const template = function(item) {
110 108
       return `
111
-        <a href="${item.url}">${item.artistName} - ${item.name}</a>
112
-      `
113
-    }
109
+        <a class="limit" href="${item.link}" title="${item.title}">
110
+          <span class="op5">${moment(item.pubDate).format(`D/M/YY`)}</span>
111
+          ${item.title.length > 65 ? item.title.substring(0, 65 - 3) + "..." : item.title}
112
+        </a>
113
+      `;
114
+    };
114 115
 
115
-    items.map(function (item) {
116
+    items.map(function(item) {
116 117
       const listItem = document.createElement(`li`);
117
-      listItem.innerHTML = template(item)
118
+      listItem.innerHTML = template(item);
118 119
       listItem.style.marginBottom = `5px`;
119
-      music.appendChild(listItem)
120
+      music.appendChild(listItem);
120 121
     });
121
-  });
122
+  });

+ 2
- 2
scss/style.scss View File

@@ -78,7 +78,7 @@ a {
78 78
   }
79 79
 
80 80
   &-third {
81
-    grid-column: span 3;
81
+    grid-column: span 4;
82 82
   }
83 83
 
84 84
   &-full {
@@ -136,4 +136,4 @@ marquee {
136 136
       display: none;
137 137
     }
138 138
   }
139
-}
139
+}