Skip to content

Commit a0332a3

Browse files
ChrisOwen101ChrisOwen101
committed
Add challenge
1 parent e4dcc53 commit a0332a3

File tree

7 files changed

+406
-1
lines changed

7 files changed

+406
-1
lines changed

‎README.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,28 @@
1-
# JavaScript-Core-3-Challenges
1+
# JavaScript Core 3 Challenges
2+
3+
In this repo you will find challenges appropriate for JavaScript Core 3
4+
5+
## Add a challenge
6+
7+
Challenges must have the following content
8+
9+
```txt
10+
# Title
11+
12+
## Explanation
13+
14+
An explanation of the task
15+
16+
### Example Result
17+
18+
An example of given an input what the expected output to be
19+
20+
## Prior Knowledge
21+
22+
What do the students need to already know to complete this task? What skills with it help them develop?
23+
24+
## Advanced Challenges
25+
26+
A small set of challenges that students can use to push themselves
27+
28+
```

‎challenge-weather-app/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Mini-weather
2+
3+
![Screenshot](assets/meteoropolis.png)
4+
5+
[Click here for live demo](https://mini-weatherapp.herokuapp.com/)
6+
7+
This app blends data from [openweathermap.org](https://openweathermap.org/) and
8+
[Unsplash](https://unsplash.com/developers) to create a visual depiction of the current weather in your area.
9+
10+
## Set-up
11+
12+
- Fork and clone the repo
13+
14+
- You will need to sign up for both services to get an API key to use each service.
15+
16+
- **Open Weather** - sign up for API key at [https://openweathermap.org/appid](https://openweathermap.org/appid) and append it to URL as `APPID` URL parameter. For example, `http://api.openweathermap.org/data/2.5/weather?q=london&APPID=ABC` where `ABC` is the API key you were provided.
17+
- **Unsplash** - sign up for Unsplash at [https://unsplash.com/join](https://unsplash.com/join) and register your app. You will receive an Access Key which you should append it to the URL as `client_id` URL param. For example, `https://api.unsplash.com/search/photos?query=snow&client_id=XYZ` where `XYZ` is your Access Key.
18+
19+
- The base HTML and CSS have been supplied if you wish to focus on the programming and not the UI, but you should feel free to customise your application as you see fit. You can insert the main photo into the element with the id `photos` and thumbnails into the element with id `thumbs`. Use developer tools to inspect the structure of HTML in working example to get a sense of what it required.
20+
21+
## Objectives
22+
23+
- [ ] Use `fetch` to retrieve the weather for a single day. You can see the documentation at [https://openweathermap.org/current](https://openweathermap.org/current). For now, we'll set London or another location of your choice as the default.
24+
25+
- [ ] Once you've retrieved the weather data, use its `description` property to get matching images from Unsplash. You can see the documentation for image search at [https://unsplash.com/documentation#search-photos](https://unsplash.com/documentation#search-photos).
26+
27+
- [ ] Display the images as a gallery of clickable thumbnails (clicking loads the main image)
28+
29+
- [ ] Commit code regularly, push and create a pull request so we can see how you got on
30+
31+
## Stretch goals
32+
33+
- [ ] Use the input field that lets us see what the weather is like in other cities
34+
35+
- [ ] Add a feature of your choice
36+
37+
- [ ] Display photographer credits in bottom right hand corner with link to their portfolio on Unsplash
38+
39+
- [ ] Display white border around thumbnail of image currently displayed as main image using `active` class
40+
41+
You may need to use data attributes as part of the exercise. You can see more info about them at [https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).

‎challenge-weather-app/assets/globals.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@keyframes fade-in {
2+
to {
3+
opacity: 1;
4+
}
5+
}
6+
7+
*,
8+
*::before,
9+
*::after {
10+
box-sizing: inherit;
11+
}
12+
13+
:root {
14+
--thumb-w: 80px;
15+
--thumb-h: 45px;
16+
--thumbs-px: 10px;
17+
--thumbs-py: 10px;
18+
--thumbs-h: calc(var(--thumb-h) + (var(--thumbs-py) * 2));
19+
}
20+
21+
html,
22+
body {
23+
height: 100%;
24+
}
25+
26+
html {
27+
box-sizing: border-box;
28+
}
29+
30+
body {
31+
transition: 1s background-color;
32+
33+
overflow: hidden;
34+
margin: 0;
35+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
36+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
37+
font-size: 14px;
38+
background: center center no-repeat;
39+
background-size: contain;
40+
color: #333;
41+
}
42+
43+
a {
44+
color: inherit;
45+
text-decoration: none;
46+
}

‎challenge-weather-app/assets/meteoropolis.png‎

440 KB
Loading

‎challenge-weather-app/assets/styles.css‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
.content {
2+
display: grid;
3+
grid-template-rows: auto 1fr auto auto auto;
4+
5+
height: 100vh;
6+
overflow: hidden;
7+
}
8+
9+
.header {
10+
padding: 5px 10px;
11+
background: rgba(0, 0, 0, 0.6);
12+
color: rgba(255, 255, 255, 0.5);
13+
}
14+
15+
.title {
16+
margin: 0;
17+
font-weight: 400;
18+
font-size: 20px;
19+
text-transform: uppercase;
20+
letter-spacing: 3px;
21+
}
22+
23+
.title > i {
24+
float: left;
25+
font-style: inherit;
26+
}
27+
28+
.title > i:last-child {
29+
color: lightblue;
30+
}
31+
32+
/* Photo
33+
------------------------------------------------------------------------------*/
34+
.photo {
35+
display: grid;
36+
justify-content: center;
37+
align-content: center;
38+
39+
overflow: hidden;
40+
position: relative;
41+
margin: 20px 0;
42+
}
43+
44+
.photo::before {
45+
content: "loading";
46+
47+
display: grid;
48+
justify-content: center;
49+
align-content: center;
50+
51+
position: absolute;
52+
top: 0;
53+
right: 0;
54+
bottom: 0;
55+
left: 0;
56+
57+
font-size: 0.8em;
58+
text-transform: uppercase;
59+
letter-spacing: 3px;
60+
}
61+
62+
.photo__dummy,
63+
.photo > img {
64+
animation: 0.5s forwards fade-in;
65+
66+
display: block;
67+
width: 100%;
68+
max-height: 100%;
69+
opacity: 0;
70+
object-fit: contain;
71+
}
72+
73+
.photo__dummy {
74+
position: relative;
75+
height: 100px;
76+
background: hotpink;
77+
}
78+
79+
/* Thumbs
80+
------------------------------------------------------------------------------*/
81+
.thumbs {
82+
display: flex;
83+
84+
-webkit-overflow-scrolling: touch;
85+
scroll-behavior: smooth;
86+
87+
overflow-x: auto;
88+
overflow-y: hidden;
89+
height: var(--thumbs-h);
90+
padding: var(--thumbs-py) 0;
91+
background: rgba(0, 0, 0, 0.25);
92+
}
93+
94+
.thumbs__link {
95+
flex: 0 0 auto;
96+
97+
animation: 0.25s forwards fade-in;
98+
99+
width: var(--thumb-w);
100+
height: var(--thumb-h);
101+
margin: 0 1px;
102+
opacity: 0;
103+
background: rgba(0, 0, 0, 0.5);
104+
}
105+
106+
.thumb.active,
107+
.thumb:hover,
108+
.thumb:focus {
109+
outline: 1px solid white;
110+
}
111+
112+
.thumb {
113+
animation: 0.25s forwards fade-in;
114+
115+
display: block;
116+
opacity: 0;
117+
object-fit: cover;
118+
119+
flex: 0 0 auto;
120+
121+
width: var(--thumb-w);
122+
height: var(--thumb-h);
123+
margin: 0 1px;
124+
opacity: 0;
125+
background: rgba(0, 0, 0, 0.5);
126+
}
127+
128+
129+
/* Credits
130+
------------------------------------------------------------------------------*/
131+
.info {
132+
display: flex;
133+
justify-content: space-between;
134+
135+
padding: 5px 10px;
136+
background: rgba(0, 0, 0, 0.5);
137+
color: #ddd;
138+
}
139+
140+
.info__item {
141+
margin: 0;
142+
}
143+
144+
.info__item > span {
145+
color: #aaa;
146+
}
147+
148+
.info__item > a:hover {
149+
text-decoration: underline;
150+
}
151+
152+
.info__item--conditions {
153+
font-weight: 300;
154+
text-transform: uppercase;
155+
letter-spacing: 2px;
156+
}
157+
158+
/* Controls
159+
------------------------------------------------------------------------------*/
160+
.controls {
161+
padding: 5px 10px;
162+
background: rgba(255, 255, 255, 0.25);
163+
}
164+
165+
.search,
166+
.search__input,
167+
.btn {
168+
transition: 0.5s background-color, 0.5s color;
169+
170+
padding: 5px 10px;
171+
border: none;
172+
border-radius: 9999px;
173+
font: inherit;
174+
background: #fff;
175+
}
176+
177+
.btn {
178+
text-align: center;
179+
}
180+
181+
.btn:hover {
182+
background: #333;
183+
color: #ccc;
184+
}
185+
186+
.search {
187+
display: flex;
188+
189+
margin: auto;
190+
padding: 2px 2px 2px 10px;
191+
font-size: 16px;
192+
background: #333;
193+
color: #ccc;
194+
}
195+
196+
.search__label {
197+
align-self: center;
198+
199+
margin-right: 5px;
200+
}
201+
202+
.search__input {
203+
flex: 1;
204+
205+
border-top-right-radius: 0;
206+
border-bottom-right-radius: 0;
207+
background: #fff;
208+
}
209+
210+
.search__btn {
211+
border-top-left-radius: 0;
212+
border-bottom-left-radius: 0;
213+
text-transform: uppercase;
214+
background: #666;
215+
color: #fff;
216+
}
217+
218+
/*----------------------------------------------------------------------------*/
219+
/* Mediaquery overrides */
220+
/*----------------------------------------------------------------------------*/
221+
@media (min-width: 768px) {
222+
.title {
223+
font-weight: 100;
224+
}
225+
226+
.thumbs {
227+
justify-content: center;
228+
}
229+
230+
.controls {
231+
display: flex;
232+
justify-content: space-between;
233+
}
234+
235+
.search,
236+
.controls__btn {
237+
font-size: inherit;
238+
}
239+
}

0 commit comments

Comments
 (0)