Tell us what’s happening:
I can’t get my code to pass tests 4 and 21, but as far as I can see my program does the same as the example program. Can someone please point out what I am doing wrong? I have some extra functionality that I added that the example program doesn’t have but I checked if all the options work and all of them work as expected.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link rel="stylesheet" href="styles.css"/>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Title Bar -->
<header>
<div class="panel" id="title-panel">
<div id="title">
<img src="https://design-style-guide.freecodecamp.org/img/fcc_primary_large.svg" alt="freeCodeCamp Logo" id="logo"><h1>Weather</h1>
</div>
</div>
<div class="panel" id="flag-panel">
<img id="flag">
</div>
</header>
<!-- Main Content -->
<main class="panel" id="main-panel">
<h2 id="location"></h2>
<div id="weather-container">
<h3 id="main-temperature"></h3>
<div id="weather-type">
<img id="weather-icon" src="">
<h3 id="weather-main"></h3>
</div>
<div id="temp-details">
<span id="feels-like"></span>
<span id="temp-min"></span>
<span id="temp-max"></span>
</div>
<div id="weather-details">
<span id="humidity"></span>
<span id="pressure"></span>
<span id="visibility"></span>
</div>
<div id="wind-details">
<span id="wind"></span>
<span id="wind-gust"></span>
</div>
<div id="compass-container" >
<div id="compass" class="hidden">
<div id="compass-north-and-south"></div>
<div id="compass-west-and-east"></div>
<div id="compass-circle">
<div id="compass-circle-inner"></div>
</div>
<div id="compass-needle">
<div id="compass-needle-line"></div>
<div id="compass-needle-triangle"></div>
</div>
</div>
</div>
</div>
</main>
<!-- Controls -->
<footer>
<div class="panel" id="note-panel">
<p id="note"></p>
</div>
<div class="panel" id="controls-panel">
<select id="location-selector">
<option value="" selected></option>
<option value="new york">New York</option>
<option value="los Angeles">Los Angeles</option>
<option value="chicago">Chicago</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
<option value="london">London</option>
</select>
<button id="get-weather-btn">Retrieve Weather</button>
</footer>
</body>
<script src="script.js"></script>
</html>
/* file: script.js */
// Facts Text
const englandFact = "Queen Elizabeth II is distantly related to Vlad the Impaler, the infamous Romanian ruler who gave rise to Dracula stories!";
const japanFact = "The world’s oldest company operated in Japan between 578 AD and 2006.";
const americaFact = "There was a short-lived United States Army Camel Corps.";
const franceFact = "There are towns with zero inhabitants in France.";
//Flags
const japanFlag = "https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/250px-Flag_of_Japan.svg.png?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail";
const englandFlag = "https://upload.wikimedia.org/wikipedia/en/thumb/a/ae/Flag_of_the_United_Kingdom.svg/330px-Flag_of_the_United_Kingdom.svg.png?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail";
const americaFlag = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Flag_of_the_United_States_%28DDD-F-416E_specifications%29.svg/250px-Flag_of_the_United_States_%28DDD-F-416E_specifications%29.svg.png?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail";
const franceFlag = "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/250px-Flag_of_France.svg.png?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail";
// Controls
const getWeatherBtn = document.getElementById("get-weather-btn");
const citySelect = document.getElementById("location-selector");
// Locations Elements
const flagImg = document.getElementById("flag");
const locationName = document.getElementById("location");
const note = document.getElementById("note");
// Temperature Elements
const mainTemperature = document.getElementById("main-temperature");
const feelsLike = document.getElementById("feels-like");
const tempMin = document.getElementById("temp-min");
const tempMax = document.getElementById("temp-max");
// Weather Elements
const weatherIcon = document.getElementById("weather-icon");
const weatherMain = document.getElementById("weather-main");
const humidity = document.getElementById("humidity");
const pressure = document.getElementById("pressure");
const visibility = document.getElementById("visibility");
// Wind Elements
const windSpeed = document.getElementById("wind");
const gustSpeed = document.getElementById("wind-gust");
const compass = document.getElementById("compass");
const compassNeedle = document.getElementById("compass-needle");
async function getWeather(cityName) {
try {
const res = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${cityName}`);
return await res.json();
} catch (error) {
console.log(`Error Fetching Data: ${error}`);
}
}
async function showWeather(cityName) {
try {
const city = /\s/.test(cityName) ? cityName.charAt(0).toUpperCase() + cityName.slice(1, 4) + cityName.charAt(4).toUpperCase() + cityName.slice(5) : cityName.charAt(0).toUpperCase() + cityName.slice(1);
const weatherData = await getWeather(cityName);
locationName.innerText = city;
switch(city) {
case "London":
flagImg.src = englandFlag;
flagImg.alt = "England's Flag";
note.innerText = englandFact;
break;
case "New York":
flagImg.src = americaFlag;
flagImg.alt = "America's Flag";
note.innerText = americaFact;
break;
case "Los Angeles":
flagImg.src = americaFlag;
flagImg.alt = "America's Flag";
note.innerText = americaFact;
break;
case "Chicago":
flagImg.src = americaFlag;
flagImg.alt = "America's Flag";
note.innerText = americaFact;
break;
case "Tokyo":
flagImg.src = japanFlag;
flagImg.alt = "Tokyo's Flag";
note.innerText = japanFact;
break;
case "Paris":
flagImg.src = franceFlag;
flagImg.alt = "France's Flag";
note.innerText = franceFact;
break;
default:
flagImg.src = "https://design-style-guide.freecodecamp.org/img/fcc_primary_small.svg";
flagImg.alt = "freeCodeCamp Logo (Glyph Version)";
}
weatherIcon.src = weatherData.weather && weatherData.weather[0] ? weatherData.weather[0].icon : "";
weatherMain.innerText = weatherData.weather[0].main !== undefined ? weatherData.weather[0].main : "N/A";
humidity.innerText = weatherData.main.humidity !== undefined ? `Humidity: ${weatherData.main.humidity}%` : "N/A";
pressure.innerText = weatherData.main.pressure !== undefined ? `Pressure: ${weatherData.main.pressure} hPa` : "N/A";
visibility.innerText = weatherData.visibility !== undefined ? `Visibility: ${weatherData.visibility} m` : "N/A";
mainTemperature.innerText = (weatherData.main.temp !== undefined ? `${weatherData.main.temp}° C` : "N/A");
feelsLike.innerText = "Feels like: " + (weatherData.main.feels_like !== undefined ? `${weatherData.main.feels_like}° C` : "N/A");
tempMin.innerText = "Min Temp: " + (weatherData.main.temp_min !== undefined ? `${weatherData.main.temp_min}° C` : "N/A");
tempMax.innerText = "Max Temp: " + (weatherData.main.temp_max !== undefined ? `${weatherData.main.temp_max}° C` : "N/A");
windSpeed.innerText = "Wind: " + (weatherData.wind.speed !== undefined ? `${weatherData.wind.speed} m/s` : "N/A");
gustSpeed.innerText = "Gusts: " + (weatherData.wind.gust !== undefined ? `${weatherData.wind.gust} m/s` : "N/A");
compass.classList.remove("hidden");
compassNeedle.style.transform = weatherData.wind && weatherData.wind.deg !== undefined ? `rotate(${weatherData.wind.deg}deg)` : "rotate(0deg)";
} catch(error) {
alert("Something went wrong, please try again later.")
}
}
getWeatherBtn.addEventListener("click", () => {
const cityName = citySelect.value;
if (cityName !== "") {
showWeather(cityName);
}
});
/* file: styles.css */
/* Base setup */
@font-face {
font-family: 'freeCodeCampFont';
src: url('https://raw.githubusercontent.com/atariq11700/HackFSlashedZeros/master/woff2/Hack-ZeroSlash-Regular.woff2') format('woff2'),
url('https://raw.githubusercontent.com/atariq11700/HackFSlashedZeros/master/woff/Hack-ZeroSlash-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
}
:root {
--background-main: #010101;
--background-secondary: #101010AA;
--text-main: #FEFEFE;
--border-main: #6A6AFF;
--shadow-main: #DDD5;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-main);
color: var(--text-main);
font-family: "freeCodeCampFont", monospace;
width: 100vw;
height: 100vh;
}
.hidden {
display: none !important;
}
.panel {
background-color: var(--background-secondary);
border: .124rem solid var(--border-main);
border-radius: .6rem;
box-shadow: var(--shadow-main) 2px 2px 8px 0px, var(--shadow-main) -2px -2px 8px 0px;
display: flex;
justify-content: center;
align-items: center;
}
/* Header styling */
header {
display: flex;
justify-content: center;
margin: 1rem;
height: 4rem;
width: 100%;
}
#title-panel {
width: 80%;
height: 100%;
}
#title {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#title h1 {
font-size: 1.27rem;
font-weight: normal;
margin-left: .8rem;
}
#logo {
height: 42%;
object-fit: contain;
}
#flag-panel {
width: 8rem;
height: 100%;
margin-left: 1rem;
}
#flag {
width: 59%;
object-fit: contain;
border-radius: 0.4rem;
content: var(--england-flag);
}
#main-panel {
width: 97vw;
}
/* Main Panel Styling */
#main-panel {
display: flex;
flex-direction: column;
}
#location {
font-size: 2.5rem;
}
#weather-container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
width: 100%;
height: 80%;
}
#main-temperature {
font-size: 1.8rem;
font-weight: normal;
display: flex;
justify-content: center;
align-items: center;
}
#weather-type {
display: flex;
justify-content: center;
align-items: center;
}
#weather-main {
font-size: 1.8rem;
font-weight: normal;
}
#weather-icon {
width: 25%;
}
#temp-details {
display: flex;
flex-direction: column;
align-items: center;
}
#weather-details {
display: flex;
flex-direction: column;
align-items: center;
}
#wind-details {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#compass-container {
display: flex;
align-items: center;
justify-content: center;
}
#compass {
position: relative;
width: 10rem;
height: 10rem;
}
#compass-circle {
background-color: var(--border-main);
border-radius: 50%;
width: 100%;
height: 100%;
}
#compass-circle-inner {
background-color: var(--background-main);
position: absolute;
top: .25rem;
left: .25rem;
border-radius: 50%;
width: 95%;
height: 95%;
}
#compass-north-and-south {
position: absolute;
background-color: var(--border-main);
height: 11rem;
width: .25rem;
bottom: -.5rem;
left: 4.75rem;
}
#compass-west-and-east {
position: absolute;
background-color: var(--border-main);
height: .25rem;
width: 11rem;
bottom: 4.75rem;
left: -.5rem;
}
#compass-needle {
position: absolute;
width: 1rem;
height: 7.2rem;
top: 1.4rem;
left: 4.5rem;
}
#compass-needle-line {
position: absolute;
background-color: rgb(254, 172, 50);
width: .2rem;
height: 6rem;
left: .4rem;
top: .6rem;
}
#compass-needle-triangle {
position: absolute;
width: 1rem;
border-bottom: 1.2rem solid rgb(254, 172, 50);
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
}
/* Footer Styling */
footer {
display: flex;
justify-content: flex-end;
margin: 1rem;
height: 9.8rem;
width: 100vw;
}
#note-panel {
height: 4rem;
}
#note {
text-align: center;
}
#controls-panel {
margin-top: 1rem;
height: 4rem;
padding: .8rem;
}
#get-weather-btn {
background-color: rgb(254, 172, 50);
background-image: linear-gradient(rgb(254, 204, 76), rgb(255, 172, 51));
border: 3px solid rgb(254, 172, 50);
border-image-repeat: stretch;
border-image-source: none;
border-image-width: 1;
cursor: pointer;
font-family: Lato, sans-serif;
font-size: 18px;
line-height: 25.7143px;
padding: 6px;
border-radius: 2rem;
margin-left: .5rem;
}
#location-selector {
appearance: none;
outline: 0;
background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn-icons-png.flaticon.com%2F512%2F10054%2F10054433.png&f=1&nofb=1&ipt=03a613dc17914c7c4af6cba125be74fc7b3bc582e14e77f42f2feaa704147179) 96% / 15% no-repeat var(--background-main);
width: 50%;
height: 100%;
color: var(--text-main);
cursor: pointer;
border: 2px solid var(--border-main);
border-radius: 1rem;
}
/* Styling for different devices */
@media (min-width: 400px) {
header {
height: 12vh;
max-height: 4rem;
}
#logo {
height: 34%;
}
#title p{
font-size: 1.2rem;
}
footer {
flex-direction: column;
height: 28vh;
max-height: 9.8rem;
}
#note-panel {
height: 13vh;
width: 98%;
}
#controls-panel {
height: 13vh;
width: 98%;
}
#main-panel {
height: 60vh
}
}
@media (min-width: 590px) {
header {
position: relative;
}
#title {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: auto;
}
#logo {
height: 45%;
}
#title p {
font-size: 1.7rem;
}
}
@media (min-width: 992px) {
#note-panel {
height: 100%;
width: 54%;
}
#controls-panel {
height: 100%;
width: 40%;
margin-top: 0;
margin-left: 1.5rem;
}
#main-panel {
height: 70vh
}
footer {
flex-direction: row;
align-items: center;
justify-content: center;
max-height: 4rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36
Challenge Information:
Build a Weather App - Build a Weather App
. Thanks so much, It’s funny how most of the problems I’ve had are typos 