FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Rommon

@r0mmon

Guys, where is i can find whether api based on https for Show the Local Weather task? If i use http, the error is getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

alpox

@alpox

@r0mmon http://ip-api.com/

@r0mmon Specifically: http://ip-api.com/docs/api:json

Rommon

@r0mmon

@alpox it is geo by ip/ Its cool, but what about wether data?

alpox

@alpox

@r0mmon Most people here use this ip api for determining the location instead of getCurrentPosition due to the error you got.
Not switch the weather api.

I don't know of any other good and free weather api which would be easy to use

Rommon

@r0mmon

ok, thnks )

Ritvars

@RitvarsZ

Hi, I have this wordpress site that I need to make responsive. What would be the best approach in this case? Here's a link: http://petrovka15.ru

alpox

@alpox

@RitvarsZ Break the horizontal aligned parts into vertical parts on smaller screens (The boxes etc.), probably remove the slider or make a specific one for the small screens.
Pack the navigation bar into a breadcrumb menu.

Alexis

@alexisgcn

help to my random quote

CamperBot

@camperbot

no wiki entry for: to my random quote

Alexis

@alexisgcn

help with my little project

CamperBot

@camperbot

no wiki entry for: with my little project

Alexis

@alexisgcn

help

Richard Viskovic

@DrMerkwurdigliebe

help wikipedia viewer

CamperBot

@camperbot

no wiki entry for: wikipedia viewer

Alexis

@alexisgcn

i almost finish my random quote machine, but i dont know how to make that my text has the same transition to the colors

http://codepen.io/alexis-carmona/pen/WRGGBz

Rommon

@r0mmon

who can help me for review my code. I'm confused with the scope and all of the code has turned into one function. How to make the variables. If i stand var out, i get undefined because asynchrony.
https://codepen.io/r0mmon/pen/bpNjpN

Ritvars

@RitvarsZ

@alpox But how exactly do I do it? Do I make my own media queries, or just use foundation or some other framework?

alpox

@alpox

@RitvarsZ Well, is it this exact page you want to make responsive? Then i would say media queries.
Do you build the page newly? Then a framework would be good

But it wouldn't be easy at all to pack a framework into an already existing page.

Ritvars

@RitvarsZ

@alpox I have to make the whole site responsive - every page of it.

alpox

@alpox

@RitvarsZ Media queries it is :-)

Ritvars

@RitvarsZ

@alpox Well, time to study media queries then :D

alpox

@alpox

Building a page up and then make it responsive is nasty and a long hard job.
Thats why there is the mobile-first approach :D

Ritvars

@RitvarsZ

@alpox Thanks!

CamperBot

@camperbot

ritvarsz sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:

:cookie: 735 | @alpox |http://www.freecodecamp.com/alpox

Jacob Leatherwood

@dadleatherwood

Can I get some help on my project? https://codepen.io/dadleatherwood/pen/BpLegq

alpox

@alpox

@dadleatherwood Sure

Jacob Leatherwood

@dadleatherwood

@alpox How can I center my buttons in my header top to bottom?

Alexis

@alexisgcn

@r0mmon you miss the property get in your dictioary

alpox

@alpox

@dadleatherwood center them top to bottom? do you mean you want them listed upon each other?

@dadleatherwood You would have to put them into an unordered list which spans on the whole width

Jacob Leatherwood

@dadleatherwood

@alpox I want them centered in the middle of the nav bar, top to bottom. I thought I could do this by changing the margins, but was unsuccessful. Then I tried display:inline, but that didn't seem to work either.

alpox

@alpox

@dadleatherwood

.nav {
  height: 100px;
  background: white;
  text-align: center;
}

This centers the links in the middle of the page

If you want them stacked you need another approach. Its best to pack them in a list anyways

Alexis

@alexisgcn

@dadleatherwood you can use flexbox to center whatever you want

Jacob Leatherwood

@dadleatherwood

@alpox Made those changes. Now will you look at it?

Now they are stacked on top of one another, and have dots to the left of the nav bar.

Alexis

@alexisgcn

the header is the div father, and your nav is the son, your header tag must have display:flex; and your nav have properties display: flex;
align-items: center;
justify-content: center;

alpox

@alpox

@dadleatherwood stacked would be:

.header .btn {
  text-decoration: none;
  background: white;
  color: #58BD91;
  border-radius: 5px;
  font-size: 25px;
}

.nav ul {
  list-style-type: none;
}

<ul>
        <li><a href="#" class="btn" target="blank">About</a></li>
        <li><a href="#" class="btn" target="blank">Portfolio</a></li>
        <li><a href="#" class="btn" target="blank">Contact</a></li>
      </ul>

Alexis

@alexisgcn

@dadleatherwood do you like flexbox ?

alpox

@alpox

@alexisgcn Not sure if flexbox is ready to use yet. It depends on the browser compability requirement.

Alexis

@alexisgcn

you can use the prefix

alpox

@alpox

@alexisgcn That doesn't help for every browser. Compability for older browsers would still not be guaranteed.
The prefix only specifies the usage of experimental implementations of the browser engines but there are quite some which don't even have that

Milos Ratkovic

@Shadow032

@dadleatherwood just writte this under your .nav

.nav {
  background: white;
  padding: 30px 0;
  text-align: right;
}

Jacob Leatherwood

@dadleatherwood

@alpox Now, how would I get them side by side instead of on top of one another?

Where communities thrive

People

Repo info

Activity