FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Fernando

@lestairon

https://codepen.io/Lestairon/pen/NagONm

Long Nguyen

@longnt80

@lestairon "https://fcc-weather-api.glitch.me/api/current?lon=" + lon + "&lat=" + lat"

Fernando

@lestairon

@longnt80 Thanks man

CamperBot

@camperbot

lestairon sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:

:cookie: 678 | @longnt80 |http://www.freecodecamp.org/longnt80

Stephen James

@sjames1958gm

@lestairon Or with template strings (my new go-to) less quotes to worry about

`https://fcc-weather-api.glitch.me/api/current?lon=${lon}&lat=${lat}`

Fernando

@lestairon

A guy on irc told me that this works too ?lat=#{lat}&lon=#{lon}

haven't tried yet

Stephen James

@sjames1958gm

@lestairon For javascript? not that I am aware of.

Kirk Clemons

@kcclemo

I'm looking for help creating this type of effect on click

current state:

Liam Docherty

@ldocherty1

<header class="masthead text-center text-white d-flex" id="home">
    <div class="container my-auto">
      <div class="row bounceInDown animated">
        <div class="col-lg-10 mx-auto">
          <h2 class="maintxt">
              <strong>Hi, my name is Liam Docherty</strong>
            </h1>
          </div>
          <div class="col-lg-8 mx-auto">
            <p class="text-white mb-5">I am a Front End & Wordpress Developer based in the UK. If you are a business seeking a web presence or an employer looking to hire, you can get in touch with me <a href=#contact class="txtlink js-scroll-trigger" target=_blank>here</a>.</p>
            <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </header>

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url(../img/header.jpg);
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* HOME */

@media (max-width: 575px) {
  .home1{
    background-color: #111;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .home1{
    background-color: #111;
}

@media (min-width: 768px) and (max-width: 991px) {
  .home1{
    background-color: #111;

}

Hi, as you can see in my CSS I have assigned an image to be the background of one of my main sections on my website. However, what class name do I put in the CSS media query to make the media query function?

I'm trying to change home1 to the correct class to where I can change the background appearance depending on the users screen display size

Tom

@moT01

i dont see a .home1 in the html

SAURABH SHEORAIN

@SSheorain

can anyone suggest a cool animation for alertify.js for messages

Dimitris Nik.

@dimitrissnk

Hello there, if I want to get every font on my page to work on every device I have to use @font-face, am I right?

Deepak Manjunath

@Deepak2322

how to split "201709" into ['2017','09']

Fernando

@lestairon

https://codepen.io/Lestairon/pen/NagONm

What can i do if i want it to change ºC with ºF?

@Deepak2322 Maybe taking the first 4 digits and making then the year, then take the last 2 digits and make them month, i think that should work

Kaz Baig

@kbaig

@Deepak2322 could just use String.slice

Stephen James

@sjames1958gm

@lestairon
If you set variable units to match "C" or "F"
$("$cof").text(units)

Adel

@AdelMahjoub

@Deepak2322 group 1 is the first 4 digits group 2 is the last 2 digits

const regex = /([0-9]{4})([0-9]{2})/g;
    const str = `201709`;
    let m;

    while ((m = regex.exec(str)) !== null) {
        // This is necessary to avoid infinite loops with zero-width matches
        if (m.index === regex.lastIndex) {
            regex.lastIndex++;
        }

        // The result can be accessed through the `m`-variable.
        m.forEach((match, groupIndex) => {
            console.log(`Found match, group ${groupIndex}: ${match}`);
        });
    }

Liam Docherty

@ldocherty1

@moT01 Yes exactly I was just messing around with that. I removed it. My point is that I'm not sure what to put there and if someone could tell me it would be very appreciated.

Please can someone scroll up and help me with my post if anyone is free?

Fernando

@lestairon

@sjames1958gm Like, how...?

Stephen James

@sjames1958gm

@lestairon I think I misunderstood your question.
you mean change the units, not just the C <> F

Fernando

@lestairon

Yeah

Stephen James

@sjames1958gm

@lestairon You can add a click handler to #cof and in there recalculate the temp and replace in the DOM.
You will need to put temperature value where it can be accessed by another click handler

Fernando

@lestairon

@sjames1958gm

$("#cof").on("click", function () {
            $("temp").html(data.main.temp * 9 / 5 + 32);

Shouldn't this work?

Stephen James

@sjames1958gm

@lestairon #temp

@lestairon Of course you'd probably want it to toggle. This only goes one way

Fernando

@lestairon

Yeah, i was thinking about that, but i still wanted to try

But is not even working 1 way

And #temp is the id of the element that i want to change

Stephen James

@sjames1958gm

@lestairon But you have "temp" not "#temp" in the code above

Fernando

@lestairon

Oh, true

stupid mistakes, lol

@sjames1958gm Thanks man, haha

CamperBot

@camperbot

lestairon sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:

:star2: 8893 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm

Fernando

@lestairon

I wonder how many time will that happen

Nate Mallison

@NJM8

@lestairon forever. :smile:

Stephen James

@sjames1958gm

@lestairon :+1:
well I am into my 38th year of programming and it still happens

supercalifragilisticthisbesuchacodekid

@ICodedGod

Gday my good people

Pieter Stokkink

@forkerino

@sjames1958gm Congrats on passing 8888 points, I missed it!

supercalifragilisticthisbesuchacodekid

@ICodedGod

What're you guys up to

Stephen James

@sjames1958gm

@forkerino :)

Where communities thrive

People

Repo info

Activity