Skip to content

Commit

Permalink
updated parts of the application files
Browse files Browse the repository at this point in the history
  • Loading branch information
@maryojo
maryojo committed Sep 12, 2020
1 parent 6150d40 commit f3c9062
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 49 deletions.
118 changes: 92 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,56 +8,82 @@
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> -->
</head>

<body>
<div class="container">

<img src="images/Asset 1.png" alt="" class="title">

<div class="innerContainer">

<div class="leftSide">
<div class="topLeft">
<div class="top">
<button class="scroll leftScroll" id="leftScroll"></button>

<div class="otherTempTimes" id="otherTempTimes">
<div class="tempTimes" id="tempTimes">
<p class="time smaller-font">Monday</p>
<p class="smaller-font" id="tempforTime">30.6<span class="deg">o</span>C</p>
<p class="smaller-font dayofWeek">Monday</p>
<p class="smaller-font" id="tempforTime">
<span class="otherTemp"></span>&deg;C
</p>
<img src="icons/" alt="" class="smallIcon">
</div>
<div class="tempTimes" id="tempTimes">
<p class="time today smaller-font">Monday</p>
<p class="smaller-font"><span id="tempforTime">30.6</span><span class="deg">o</span>C</p>
<p class="today smaller-font dayofWeek">Monday</p>
<p class="smaller-font">
<span class="otherTemp"></span>&deg;C
</p>
<img src="icons/" alt="" class="smallIcon">
</div>
<div class="tempTimes" id="tempTimes">
<p class="time smaller-font">Monday</p>
<p class="smaller-font"><span id="tempforTime">30.6 </span><span class="deg">o</span>C</p>
<p class="smaller-font dayofWeek">Monday</p>
<p class="smaller-font">
<span class="otherTemp"></span>&deg;C
</p>
<img src="icons/" alt="" class="smallIcon">
</div>
<div class="tempTimes" id="tempTimes">
<p class="time smaller-font">Monday</p>
<p class="smaller-font" id="tempforTime">30.6<span class="deg">o</span>C</p>
<p class="smaller-font dayofWeek">Monday</p>
<p class="smaller-font" id="tempforTime">
<span class="otherTemp"></span>&deg;C
</p>
<img src="icons/" alt="" class="smallIcon">
</div>
<div class="tempTimes" id="tempTimes">
<p class="time smaller-font">Monday</p>
<p class="smaller-font" id="tempforTime">30.6<span class="deg">o</span>C</p>
<p class="smaller-font dayofWeek">Monday</p>
<p class="smaller-font" id="tempforTime">
<span class="otherTemp"></span>&deg;C
</p>
<img src="icons/" alt="" class="smallIcon">
</div>
</div>
<button class="scroll rightScroll" id="rightScroll"></button>

<!-- <button class="scroll rightScroll" id="rightScroll"></button> -->
</div>

</div>


<div class="middleLeft">
<img src="images/Sunny Dawn.png" alt="" class="currentWeatherBackPic" id="currentWeatherBackPic">
<div class="selectedWeatherInfo">
<img src="icons/" alt="" class="currentWeatherIcon" id="currentWeatherIcon">
<p><span class="currentTemp" id="currentTemp">38</span><span class="deg">o</span>C</p>
<p class="tempRange"><span id="tempLow"></span>/<span id = "tempHigh"></span>
<p><span class="currentTemp" id="currentTemp">38</span>
&deg;C
</p>
<p class="weatherCondition" id="weatherCondition">Sunny</p>
<p class="tempRange"><span id="tempLow"></span> &deg;C
/
<span id = "tempHigh"></span> &deg;C
</p>
<p class="weatherCondition" id="weatherCondition"></p>
</div>
</div>


<div class="bottomLeft">

<div class="otherTempStates" id="otherTempStates">

<div class="tempState" id="tempState">
<img src="icons/" alt="" class="mediumIcon">
<p class="state smaller-font">Humidity</p>
Expand Down Expand Up @@ -86,28 +112,68 @@
</div>
</div>
</div>



<div class="rightSide">

<div class="rightSideContainer">
<div class="rightTop"><p class="currentDate" id="currentDate"></p> <img src="icons/" alt="" class="smallerIcon"></div>
<div class="rightTop"><p class="currentTime" id="currentTime"></p> <img src="icons/" alt="" class="smallerIcon"></div>
<div class="rightTop"><p class="currentLocation" id="currentLocation"></p> <img src="icons/" alt="" class="smallerIcon"></div>

<div class="rightTop">
<p class="currentDate" id="currentDate"></p>
<img src="icons/" alt="" class="smallerIcon">
</div>
<div class="rightTop">
<p class="currentTime" id="currentTime"></p>
<img src="icons/" alt="" class="smallerIcon">
</div>
<div class="rightTop">
<p class="currentLocation" id="currentLocation"></p>
<img src="icons/" alt="" class="smallerIcon">
</div>
<!-- <div class="rightTop">
<p id="clatitude"></p>
<p class="clongitue"></p>
</div> -->

<div>
<input type="search" class="search" id="search">
<button id="searchButton">Search</button>
</div>
<div><input type="search" class="search" id="search"><button id="searchButton">Search</button></div>

<div class="controls">
<button type="reset" class="control" id="refresh"><img src="icons/" alt="" class="mediumIcon">Reset</button>
<button class="control"><img src="icons/" alt="" class="mediumIcon" id="currentWeather">Weather Now</button>
<button class="control"><img src="icons/" alt="" class="mediumIcon" id="weatherByMinute">Weather By Minute</button>
<button class="control"><img src="icons/" alt="" class="mediumIcon" id="weatherByHour">Weather By Hour</button>
<button class="control"><img src="icons/" alt="" class="mediumIcon" id="dailyWeather">Daily Weather</button>
<button class="control"><img src="icons/" alt="" class="mediumIcon" id="historicalWeather">Historical Weather</button>
<button type="reset" class="control" id="refresh">
<img src="icons/" alt="" class="mediumIcon">
Refresh
</button>
<!-- <button class="control">
<img src="icons/" alt="" class="mediumIcon" id="currentWeather">
Weather Now
</button> -->
<button class="control">
<img src="icons/" alt="" class="mediumIcon" id="weatherByMinute">
History
</button>
<button class="control">
<img src="icons/" alt="" class="mediumIcon" id="weatherByHour">
Save
</button>
<!-- <button class="control">
<img src="icons/" alt="" class="mediumIcon" id="dailyWeather">
Daily Weather
</button>
<button class="control">
<img src="icons/" alt="" class="mediumIcon" id="historicalWeather">
Historical Weather
</button> -->
</div>
</div>
</div>
</div>


<script type="text/javascript" src="script.js"></script>
<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/pi/js?sensor=false"></script> -->

</body>

</html>
31 changes: 22 additions & 9 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,17 @@ let currentWeatherIcon = document.getElementById('currentWeatherIcon');

//Buttons
const reset = document.getElementById('reset');
//make necessary changes here, changes made to html doc
let currentWeather = document.getElementById('currentWeather');
let weatherByMinute = document.getElementById('weatherByMinute');
let weatherByHour = document.getElementById('weatherByHour');
let dailyWeather = document.getElementById('dailyWeather');
let historicalWeather = document.getElementById('historicalWeather');

//test
const here =document.getElementById('here');
const clatitude= document.getElementById('latitude');
const clongitude = document.getElementById('longitude');


//App Data
let time = document.querySelectorAll('.time');
let time = document.querySelectorAll('.otherTemp');
let dayofWeek = document.querySelectorAll('.dayofWeek');
let currentTemp = document.getElementById('currentTemp');
let tempLow = document.getElementById('tempLow');
let tempHigh = document.getElementById('tempHigh');
Expand All @@ -32,14 +29,18 @@ let currentTime =document.getElementById('currentTime');
let currentLocation = document.getElementById('currentLocation');
let searchButton = document.getElementById('searchButton');


//Try to get time and date using API
//Get Time and date
const timeNow = () => {
const time = new Date();
let timeIn24h = time.getHours();
let mode = 'AM';
if(timeIn24h > 12){
timeIn24h = timeIn24h - 12;
mode = 'PM';
}
currentTime.innerHTML = `${timeIn24h} : ${time.getMinutes()}`;
currentTime.innerHTML = `${timeIn24h} : ${time.getMinutes()} ${mode}`;
}

const dateNow = () =>{
Expand Down Expand Up @@ -79,6 +80,7 @@ if(navigator.geolocation){
}

//Get current location, convert to city name and get weather details
//Add catch in case of error
const getPositionHere = (position) =>{
let currentLatitude = position.coords.latitude;
let currentLongitude = position.coords.longitude;
Expand Down Expand Up @@ -109,16 +111,27 @@ checkGeolocator();

//refresh weather every 30 minutes
//WEATHER FOR DIFFERENT DAYS
//add catch in case of error
const getWeatherOtherDays = () =>{
fetch('https://api.openweathermap.org/data/2.5/onecall?lat=33.441792&lon=-94.037689&appid=d74fc369be79084d255892637839ecab&units=metric')
.then((response) => response.json())
.then(data => {
console.log(data);
let dailyTemp = data ['hourly'][0]['clouds'];
console.log(dailyTemp);
for(let i = 0; i < (data['daily'].length); i++){
let otherDaysTemp = data['daily'][i]['temp']['day'];
for(let j = 0; j < time.length; j++){
time[j].innerHTML = otherDaysTemp;
}
console.log(otherDaysTemp);
//check if this works
let otherWeekDays = data['daily'][i];
const i = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
otherWeekDays[i].innerHTML = dayofWeek;
}
})
}


getWeatherOtherDays();


Expand Down
15 changes: 1 addition & 14 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,6 @@ body{
width: 70px;
} */

.scroll{
position: absolute;
top: 30%;
}

.leftScroll{
left: 2em;
}

.rightScroll{
right: 2em;
}

.currentWeatherBackPic{
height: 45vh;
}
Expand Down Expand Up @@ -109,7 +96,7 @@ body{

.controls{
display: grid;
grid-template-columns: auto auto;
grid-template-columns: auto auto auto;
}


Expand Down

0 comments on commit f3c9062

Please sign in to comment.