Skip to content

Commit

Permalink
Merge pull request #68 from FACN3/modularization
Browse files Browse the repository at this point in the history 
Modularize the handler.js file and clean up with Linter
  • Loading branch information
@hasansaad1
hasansaad1 authored Nov 30, 2017
2 parents bb8d8a6 + 46fc4e9 commit fa8ba13
Show file tree
Hide file tree
Showing 10 changed files with 205 additions and 188 deletions.
108 changes: 54 additions & 54 deletions public/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function keepRunning() {
}
}

//handles the xhr request
// Handles the xhr request
function fetch(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
Expand All @@ -23,21 +23,21 @@ function fetch(url, callback) {
console.log(xhr.readyState, xhr.status);
}
};
xhr.open("GET", url);
xhr.open('GET', url);
xhr.send();
}

//function that handles the data recieved from the server
// Function that handles the data recieved from the server
function filterData() {
var place = document.getElementById("cities").value;
searchPath = "/submit?search=" + place;
var place = document.getElementById('cities').value;
searchPath = '/submit?search=' + place;

fetch(searchPath, function(error, response) {
if (error) {
console.log("error with getting data from the server : ", error);
console.log('error with getting data from the server : ', error);
} else {
var clock = JSON.parse(response.clock);
var timeL = clock.formatted.split(" ")[1].split(":");
var timeL = clock.formatted.split(' ')[1].split(':');
watch.hours = parseInt(timeL[0]);
watch.minutes = parseInt(timeL[1]);
watch.seconds = parseInt(timeL[2]);
Expand All @@ -46,39 +46,39 @@ function filterData() {
});
}

//rendering the data
// Rendering the data
function renderInfos(response) {
var time_infos = JSON.parse(response.clock);
var weather_infos = JSON.parse(response.weather);

document.getElementById("weather").style.backgroundColor = "#66d3ff";
document.getElementById("other").style.backgroundColor = "#d2d7dd";
document.getElementById('weather').style.backgroundColor = '#66d3ff';
document.getElementById('other').style.backgroundColor = '#d2d7dd';

document.getElementById("weather_infos").innerHTML = "";
document.getElementById("other_infos").innerHTML = "";
document.getElementById("weather_icon").setAttribute("src", "");
document.getElementById('weather_infos').innerHTML = '';
document.getElementById('other_infos').innerHTML = '';
document.getElementById('weather_icon').setAttribute('src', '');

var list_other = document.getElementById("other_infos");
var list_other = document.getElementById('other_infos');

var timestamp = time_infos.formatted;
var display_time = document.createElement("li");
display_time.textContent = "Date and Time: " + timestamp;
var display_time = document.createElement('li');
display_time.textContent = 'Date and Time: ' + timestamp;
list_other.appendChild(display_time);

var city = time_infos.zoneName;
var display_city = document.createElement("li");
display_city.textContent = "Zone: " + city;
var display_city = document.createElement('li');
display_city.textContent = 'Zone: ' + city;
list_other.appendChild(display_city);

var country = time_infos.countryName;
var display_country = document.createElement("li");
display_country.textContent = "Country: " + country;
var display_country = document.createElement('li');
display_country.textContent = 'Country: ' + country;
list_other.appendChild(display_country);

var latitude = weather_infos.coord.lat;
var longitude = weather_infos.coord.lon;
var coords = document.createElement("li");
coords.textContent = "Coordinates: " + latitude + ", " + longitude;
var coords = document.createElement('li');
coords.textContent = 'Coordinates: ' + latitude + ', ' + longitude;
list_other.appendChild(coords);

//------Weather Infos---------//
Expand All @@ -89,51 +89,51 @@ function renderInfos(response) {
var wind_speed = weather_infos.wind.speed;
var weather_icon = weather_infos.weather[0].icon;

var list_weather = document.getElementById("weather_infos");
var list_weather = document.getElementById('weather_infos');

var temp_display = document.createElement("li");
temp_display.textContent = "Current Temperature: " + temp_F + "°F";
var temp_display = document.createElement('li');
temp_display.textContent = 'Current Temperature: ' + temp_F + '°F';
list_weather.appendChild(temp_display);
var weather_descript = document.createElement("li");
weather_descript.textContent = "Description: " + weather_main;
var weather_descript = document.createElement('li');
weather_descript.textContent = 'Description: ' + weather_main;
list_weather.appendChild(weather_descript);
var display_humid = document.createElement("li");
display_humid.textContent = "Humidity: " + humidity + "%";
var display_humid = document.createElement('li');
display_humid.textContent = 'Humidity: ' + humidity + '%';
list_weather.appendChild(display_humid);
var display_wind = document.createElement("li");
display_wind.textContent = "Wind Speed: " + wind_speed;
var display_wind = document.createElement('li');
display_wind.textContent = 'Wind Speed: ' + wind_speed;
list_weather.appendChild(display_wind);

document.getElementById("weather_icon").src =
"https://openweathermap.org/img/w/" + weather_icon + ".png";
document.getElementById('weather_icon').src =
'https://openweathermap.org/img/w/' + weather_icon + '.png';
}


function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, "#333");
grad.addColorStop(0.5, "white");
grad.addColorStop(1, "#333");
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius * 0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = "#333";
ctx.fillStyle = '#333';
ctx.fill();
}

function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.font = radius * 0.15 + 'px arial';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
for (num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
Expand All @@ -156,35 +156,35 @@ function drawTime(ctx, radius) {
if (hour > 18 || hour < 6) {
document.body.style.backgroundImage =
"url('https://scromy.com/wp-content/uploads/2017/01/night-sky-wallpapers-phone.jpg')";
document.querySelector(".content__header__title").style.color = "white";
document.querySelector(".content__header__tagline").style.color = "white";
document.querySelector('.content__header__title').style.color = 'white';
document.querySelector('.content__header__tagline').style.color = 'white';
} else {
document.body.style.backgroundImage =
"url('https://www.mycadsite.com/tutorials/level_3/images/sky.jpg')";
document.querySelector(".content__header__title").style.color = "#000000";
document.querySelector(".content__header__tagline").style.color = "#000000";
document.querySelector('.content__header__title').style.color = '#000000';
document.querySelector('.content__header__tagline').style.color = '#000000';
}

//hour
// Hour
hour = hour % 12;
hour =
hour * Math.PI / 6 +
minute * Math.PI / (6 * 60) +
second * Math.PI / (360 * 60);

drawHand(ctx, hour, radius * 0.5, radius * 0.07);
//minute
// Minute
minute = minute * Math.PI / 30 + second * Math.PI / (30 * 60);
drawHand(ctx, minute, radius * 0.8, radius * 0.07);
// second
// Second
second = second * Math.PI / 30;
drawHand(ctx, second, radius * 0.9, radius * 0.02);
}

function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.lineCap = 'round';
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
Expand All @@ -203,17 +203,17 @@ var now = new Date();
const watch = {
hours: now.getHours(),
minutes: now.getMinutes(),
seconds: now.getSeconds()
seconds: now.getSeconds(),
};

//submitButton`s event listener
document.getElementById("submitButton").addEventListener("click", function() {
// submitButton's event listener
document.getElementById('submitButton').addEventListener('click', function() {
event.preventDefault();
filterData();
});

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
Expand Down
102 changes: 0 additions & 102 deletions src/handler.js
View file

This file was deleted.

7 changes: 7 additions & 0 deletions src/handlers/handleError.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// handles the Errors
const handleError = (error, request, response) => {
response.writeHead(404, { 'Content-Type': 'text/html' });
response.end('<h1>404 PAGE NOT FOUND </h1>');
};

module.exports = handleError;
17 changes: 17 additions & 0 deletions src/handlers/handleHome.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const fs = require('fs');
const path = require('path');
const handleError = require('./handleError');

const handleHome = (request, response) => {
const filePath = path.join(__dirname, '..', '..', 'public', 'index.html');
fs.readFile(filePath, (error, file) => {
if (error) {
handleError(error, request, response);
} else {
response.writeHead(200, { 'Context-Type': 'text/html' });
response.end(file);
}
});
};

module.exports = handleHome;
Loading

0 comments on commit fa8ba13

Please sign in to comment.