<<<<<<< HEAD
<<<<<<< HEAD
Enter your username and password below to login.
=======
Checking the weather near you...
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08
>>>>>>> refs/remotes/origin/main
=======
getWeatherInfo();
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08
<<<<<<< HEAD
<<<<<<< HEAD
HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <p > Enter your username and password below to login.</p > <form > <div > <label for ="username" > Username:</label > <input type ="text" name ="username" id ="username" > </div > <div > <label for ="password" > Password:</label > <input type ="password" name ="password" id ="password" > </div > <div > <label for ="show-password" > <input type ="checkbox" name ="show-passwords" id ="show-password" > Show password </label > </div > <p > <button type ="submit" > Log In</button > </p > </form >
=======
HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <h2 > Change Username</h2 > <p > Enter your username and password to change your username.</p > <form > <div > <label class ="label" for ="username" > Username</label > <input autocomplete ="off" class ="input" type ="text" name ="username" id ="username" > </div > <div > <label class ="label" for ="password" > Password</label > <input autocomplete ="off" class ="input" type ="password" name ="password" id ="password" > </div > <div > <label class ="label" for ="show-password" > <input class ="checkbox" type ="checkbox" name ="show-password" id ="show-password" data-pw-toggle ="#password" > Show password </label > </div > <p > <button class ="button" type ="submit" > Change Username</button > </p > </form > <h2 > Change Password</h2 > <p > Enter your current password and new password below.</p > <form > <div > <label class ="label" for ="current-password" > Current Password</label > <input autocomplete ="off" class ="input" type ="password" name ="current-password" id ="current-password" > </div > <div > <label class ="label" for ="new-password" > New Password</label > <input autocomplete ="off" class ="input" type ="password" name ="new-password" id ="new-password" > </div > <div > <label class ="label" for ="show-passwords" > <input class ="checkbox" type ="checkbox" name ="show-passwords" id ="show-passwords" data-pw-toggle ="#current-password, #new-password" > Show passwords </label > </div > <p > <button class ="button" type ="submit" > Change Passwords</button > </p > </form >
>>>>>>> refs/remotes/origin/main
=======
HTML 1 <div id ="app" > Checking the weather near you...</div >
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08
<<<<<<< HEAD
<<<<<<< HEAD
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const showPass = document .querySelector('#show-password' );const passInput = document .querySelector('#password' );showPass.addEventListener('click' , function ( ) { if (showPass.checked) { passInput.type = "text" ; } else { passInput.type = "password" ; }; });
=======
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 document .addEventListener('click' , function (e ) { if (!e.target.matches('[data-pw-toggle]' )) return ; const passwords = Array .prototype.slice.call(document .querySelectorAll( e.target.getAttribute('data-pw-toggle' ))); passwords.forEach(password => { if (e.target.checked) { password.type = 'text' ; } else { password.type = 'password' ; } }) });
>>>>>>> refs/remotes/origin/main
=======
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 const app = document .querySelector('#app' );const apiKeyIp = 'd9f7add9f68440818a0659381720a532' ;const apiKeyWeather = '5e995a3338fe2917188f0f98d08abcec' ;let userCity;const render = function (icon, temp, city, sky ) { app.innerHTML = (` <div class="weather_container"> <div class="weather_icon"><img src="http://openweathermap.org/img/wn/${icon} @2x.png"></div> <h3 class="weather_temperature">${Math .round(temp)} ℃</h3> <h4 class="weather_city-name">${city} </h4> <p class="weather_desc">${sky} </p> </div> ` )}; const getWeatherInfo = function ( ) { fetch(`https://api.ipgeolocation.io/ipgeo?apiKey=${apiKeyIp} ` ).then(function (response ) { if (response.ok) { return response.json(); } else { return Promise .reject(response); } }).then(function (data ) { userCity = data.city; return fetch(`http://api.openweathermap.org/data/2.5/weather?q=${userCity} &appid=${apiKeyWeather} &units=metric` ); }).then(function (response ) { if (response.ok) { return response.json(); } else { return Promise .reject(response); } }).then(function (userData ) { userIcon = userData.weather[0 ].icon; userTemp = userData.main.temp; userCity = userData.name; userSky = userData.weather[0 ].description; render(userIcon, userTemp, userCity, userSky); }).catch(function (err ) { console .warn(err); app.textContent = "Something went wrong..." ; }) } getWeatherInfo();
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08