Inserting weather icon file in code-pen

Inserting weather icon file in code-pen
0

#1
<!DOCTYPE html>
<html>
<head>
  <title>Weather app</title>
  
  <link rel="stylesheet" href="pe-icon-set-weather/css/pe-icon-set-weather.css">
  <link rel="stylesheet" href="pe-icon-set-weather/css/helper.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
</head>
<body>
  <div id="results">
    <h3 class="resulthead">Your location results</h3>
    <div id="innercontainer">
      <div id="locname">
        <h2 class="text-center">City,Country</h3>
      </div>
      <div class="row">
        <div id="icon" class="col-3">
          <i class="pe-is-w-umbrella pe-5x pe-va"></i>
        </div>
        <div id="disc" class="col-6">
          <h1>CLOUDY</h2>
        </div>
      </div>
      <div id="temp" class="text-center">
        <h1>°C</h1>
      </div>
    </div>
    <div id="buttons">
      <button type="button" class="btn btn-dark" id="cent">Result in °C</button>
      <button type="button" class="btn btn-dark" id="faren">Result in °F</button>
    </div>
  </div>


  <div id="click">
    <h3>Click to find your weather</h3>
    <div id="clickicon">
      <i class="fa fa-map-marker"></i>
    </div>
  </div>
 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="weather.js"></script>
</body>
</html>
-------------------------------------------------------------------------------------
body{
background-color: rgb(35,37,38); 

}

#results{
	display: none;
}

.resulthead{

  color: white;
  display: inline-block;
  position: absolute;
  left: 18.5em;
  top: 2em;
}


#innercontainer{
	background-color: #D3D3D3;
	width: 27em;
    height: 25em;
    border: 1px solid white;
    border-radius: 10px;
    position: relative;
    left: 27em;
    top: 7em;
}

#locname{

	font-family: 'Amaranth', sans-serif;
	margin-top: 0.2em;
	padding-bottom: 0.5em;
	border-bottom: 3px solid black; 
}

#icon{
    margin-top: 1em;
    margin-left: 2em;
}

#disc{

font-size: 50px;
padding-top: 0.8em;
padding-left: 2em;
font-weight: bold;

}

#disc h1{
font-size: 50px;
	font-weight: bold;
}

#temp{
	position: relative;
	top: 7em;
}

#temp h1{
     
     font-weight: bold;
     font-size: 5em;

}


#clickicon {
	 display: inline-block;
	 position: absolute;
	 left: 37em;
	 top: 12em;
}

#clickicon i {
	font-size:250px;
	color: #D8D8D8;
}

#click h3{
	color: white;
	position: absolute;
	display: inline-block;
	top:5em;
	left: 18em;
}

#buttons{

	display: inline-block;
	position: absolute;
	top: 35em;
	left: 30em
}

#faren{
	margin-left: 6em;
}

.btn-dark {
    color: black;
    background-color: #D3D3D3;
    border-color: #343a40;
}
-----------------------------------------------------------------------------------
$(document).ready(function(){

$('#clickicon i').on('mouseenter',function(){
     $(this).css({color:'#707070'});
});

$('#clickicon i').on('mouseleave',function(){
     $(this).css({color:'#D8D8D8'});
});




var sunny = /(sun|clear|calm|hot)+/i;
var breeze = /breez+/i;
var storm = /(storm|tornado|hurricane)+/i;
var cloudy = /(clouds|fog|dust|haze|smok|bluster)+/i;
var part = /part+/i;
var rainy = /(rain|drizzl|shower)+/i;
var snowy = /(snow|freez|hail|cold)+/i;
var sleet = /sleet+/i;


function weathericon(res){

if(sunny.test(res.weather[0].description)){
    
    $('#icon > i ').attr('class','pe-is-w-sun-2-f pe-5x pe-va');    
}
else if(breeze.test(res.weather[0].description)){

     $('#icon > i ').attr('class','pe-is-w-wind-2 pe-5x pe-va'); 

}
else if(storm.test(res.weather[0].description)){

     $('#icon > i ').attr('class','pe-is-w-thunderbolt-2 pe-5x pe-va'); 

}
else if(cloudy.test(res.weather[0].description)){

     $('#icon > i ').attr('class','pe-is-w-mostly-cloudy-2-f pe-5x pe-va'); 

}

else if(rainy.test(res.weather[0].description)){

     $('#icon > i ').attr('class','pe-is-w-heavy-rain-1-f pe-5x pe-va'); 

}
else if(snowy.test(res.weather[0].description)){

     $('#icon > i ').attr('class','pe-is-w-snowflake pe-5x pe-va'); 

}

}



var latitude;
var longitude;
var temperature;
var tempflag;

/*$("#temp").click(function(){

    var tempstrng=$('#temp h1').text();
    var unit=tempstrng.slice(-1);
    if(unit=='C'){
       temperature=temperature*(9/5)+32;
       $('#temp h1').text(temperature+'°F');
     }

     else if(unit=='F'){

        temperature=(temperature-32)*5/9;
        $('#temp h1').text(temperature+'°C');
     }

});*/

$('#cent').click(function(){

if(tempflag!=='cent'){
 temperature=Math.round((temperature-32)*5/9);
 $('#temp h1').text(temperature+'°C');
 tempflag='cent';
}
});

$('#faren').click(function(){
if(tempflag!=='faren'){
 temperature=Math.round(temperature*(9/5)+32);
 $('#temp h1').text(temperature+'°F');
 tempflag='faren';
}
});
 
 $(document).ajaxStart(function() {
  $("#click h3").text("Fetching data for weather");
});
 

$('#clickicon > i ').click(function(){

  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
}

function success(position) {
     latitude=position.coords.latitude;
     longitude=position.coords.longitude;
     coord([latitude,longitude]);
  }
//getlat();
function coord(array){
$.ajax('https://fcc-weather-api.glitch.me/api/current?lat='+array[0]+'&lon='+array[1],{
     method: 'GET',
     dataType: 'json',
     success: function(response){
        $('#locname > h2').text(response.name+","+response.sys.country);
        weathericon(response);
        $('#disc h1').text(response.weather[0].main);
        $('#temp h1').text(response.main.temp+'°C');
        tempflag='cent';
        temperature=response.main.temp;
        $('#click').fadeOut(500,function(){
              
                $('#results').fadeIn(1000);
        });
        //$('#results').fadeIn(500);
     }
});

}

});

});

hey guys so I made a weather app but when it comes to uploading it to code pen its getting difficult. I used http://themes-pixeden.com/font-demos/the-icons-set/weather/ link for weather icon fonts. They gave me a file and documentation. I set up the path in my html file and but they havent provide any remote link access so I can also use it in codepen. I upload the necessary files to google drive and paste those links in html still its not working :confused: . There is a folder named ‘pe-icon-set-weather’ which is the icon folder. In that there is ‘css’ folder and then the files to be linked. Those files are css type so I also tried to just copy those files directly in my css stylesheet but turns out they also need the ‘fonts’ folder and .svg files in it to work. please help me out to get this file link in my code pen.Below is my project code


#2

The following two references are local to your pc, but they should point to where they are stored in order to work on Codepen. Have you tried linked to these file on Google Drive, since you said you put them there?

  <link rel="stylesheet" href="pe-icon-set-weather/css/pe-icon-set-weather.css">
  <link rel="stylesheet" href="pe-icon-set-weather/css/helper.css">

#3

Yup did everything. If you open this file ‘pe-icon-set-weather.css’ you will see it access svg,ttf and some other necessary files which are in ‘fonts’ folder. I tried to upload those necessary files in in google drive and then update the links in pe-icon-set-weather.css’. But it doesnt work. Codepen really sucks I spent 4 hours but couldnt solve. Maybe I should use ‘github pages’ to submit my projects in freecodecamp.


#4

What are the actual urls for the files you put on google drive? I can not open “pe-icon-set-weather.css”, because you did not provide a link to it.


#5

https://drive.google.com/open?id=1W5t_ZasUGBBnHHiIvwASG-Sv2z9HpyPP for pe-icon-set-weather.css
https://drive.google.com/open?id=1a2aR9AY1ZMOMob4jUtkJ5SKsO_f3W8nR for helper.css
https://drive.google.com/open?id=1yY_BVyAJ3s4gNITcc9IWm9yzkDqqQA-C for pe-icon-set-weather.woff
https://drive.google.com/open?id=16Pt4IoIwua8ihL1onDwy3BoibJcFeAqQ for pe-icon-set-weather.ttf
https://drive.google.com/open?id=1pimzWQQX-UJJRE8Ke0YHfuckaYjbcB1v for pe-icon-set-weather.svg
https://drive.google.com/open?id=1IA4yI008i-UPK0gkKuevy0A9OqkD97js for pe-icon-set-weather.eot


#6

Hi,

Can you please share your CodePen link?