Conversation
JennieDalgren
left a comment
JennieDalgren
left a comment
There was a problem hiding this comment.
Good job with this project!
I can't find the link to your deployed version. Please add it and let me know so I can properly test it.
It seems like you haven't given the branching and merging a chance? From what I can read in the commits of this PR you have worked with the mob programming approach? It is key for this education that you learn to work with git and github. If you have any doubts about this, or issues getting it to work - reach out to us via the support channels: write in code-help on Slack, join any of the Townhall sessions or write us an email at [email protected]
When you work in a group, make sure to decide on how you write your functions. Right now you are mixing arrow function expressions and function declarations
| function changeDesign(symbol: number): void { | ||
| const icon = document.getElementById("icon") as HTMLImageElement | null; | ||
| const searchBox = document.querySelector(".search input") as HTMLInputElement | null; | ||
| const searchBtn = document.querySelector(".search button") as HTMLButtonElement | null; |
There was a problem hiding this comment.
To avoid too much styling in the javacsript you could just add a "sunny" , "cloudy" etc classname to a html element, (maybe even the body?? and style it based on that in the css file.
| if (!coords) { | ||
| alert("City not found! Try any of these cities; Malmö, Umeå, Göteborg, Stockholm, Köpenhamn or Skogen 🌳."); | ||
| return; |
| for (const t of times) { | ||
| const thisDate = new Date(t.validTime); | ||
| const dateString = thisDate.toDateString(); | ||
|
|
||
| if (dateString === lastDate) continue; | ||
|
|
||
| lastDate = dateString; | ||
| const tempParam = t.parameters.find(p => p.name === "t"); | ||
| if (!tempParam) continue; | ||
|
|
||
| const temp = tempParam.values[0]; | ||
| const weekday = thisDate.toLocaleDateString("en-US", { weekday: "short" }); | ||
|
|
||
| forecastEl.innerHTML += ` | ||
| <div class="forecast-row"> | ||
| <span class="weekday">${weekday}</span> | ||
| <span class="temp">${temp}°</span> | ||
| </div> | ||
| `; | ||
|
|
||
| daysAdded++; | ||
| if (daysAdded >= 5) break; |
| function getCondition(symbol: number): string { | ||
| const conditions: Record<number, string> = { | ||
| 1: "Clear sky", | ||
| 2: "Nearly clear sky", | ||
| 3: "Variable cloudiness", | ||
| 4: "Halfclear sky", | ||
| 5: "Cloudy", | ||
| 6: "Overcast", | ||
| 7: "Fog", | ||
| 8: "Light rain showers", | ||
| 9: "Moderate rain showers", | ||
| 10: "Heavy rain showers", | ||
| 11: "Thunderstorm", | ||
| 12: "Light sleet showers", | ||
| 13: "Moderate sleet showers", | ||
| 14: "Heavy sleet showers", | ||
| 15: "Light snow showers", | ||
| 16: "Moderate snow showers", | ||
| 17: "Heavy snow showers", | ||
| 18: "Light rain", | ||
| 19: "Moderate rain", | ||
| 20: "Heavy rain", | ||
| 21: "Thunder", | ||
| 22: "Light sleet", | ||
| 23: "Moderate sleet", | ||
| 24: "Heavy sleet", | ||
| 25: "Light snowfall", | ||
| 26: "Moderate snowfall", | ||
| 27: "Heavy snowfall", | ||
| }; | ||
| return conditions[symbol] || "Unknown"; | ||
| } |
2 participants
Project by; Frida, Emil and Pebbles (Eugene)
Netlify: https://weather-app-js-bubbles3.netlify.app/