FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Ken Haduch

@khaduch

@zhuwei12 - https://api.jquery.com/jQuery.ajax/, if you are using jQuery's ajax command. There is a way to set it up directly within the request. (I'm only posting this because the jquery documentation says that the ajaxSetup use is not recommended.)

roeP

@roeP

question about the tribute page - does it have to be similar to the exapmle?

achudoz

@achudoz

@zhuwei12 this is a working example of your pen. JS:

$(document).ready(function() {
  $.ajaxSetup({
    cache: false
  });

  $("#quoteButton").on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      $("#quoteBox").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>")
    });

  });
});

Bartłomiej Rakowiecki

@Biskupator

I have a question about portfolio page. How to make the bar at the top of the page stay fixed while scrolling?

Ken Haduch

@khaduch

@roeP - it can be any page that you want to make, I guess that there are a couple requirements, and you want to make it look good, apply appropriate styling, etc. But it's really a blank slate. They give the example as an example.

achudoz

@achudoz

@zhuwei12 and HTML:

<button id="quoteButton">Quote</button>
<div id="quoteBox">
</div>

Ken Haduch

@khaduch

@Biskupator - are you using Bootstraps navbar? There is a class navbar-fixed, I think? Check their documentation. If you are using Bootstrap v4, it might have changed.

achudoz

@achudoz

@zhuwei12 the thing that makes the quotes change is the $.ajaxSetup()

@khaduch do you know why ajaxSetup is not recommended?

Zhu Wei

@zhuwei12

thank u!

Ken Haduch

@khaduch

@achudoz - no, I don't - perhaps it is better to just add the cache: false to the $.ajax call itself? I could see where setting up some values like that you might inadvertently have them change without realizing it?

roeP

@roeP

@khaduch im tring to make it look like the example page, it has a lot of feature that will be usful, but i cant figure it out

achudoz

@achudoz

@khaduch yeah, that makes sense. thanks

CamperBot

@camperbot

achudoz sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:

:warning: achudoz already gave khaduch points

roeP

@roeP

this is what i did so far, is it any good?

https://codepen.io/roeP/pen/PWrWKm

Ken Haduch

@khaduch

@roeP - I think that the example page makes use of a few Bootstrap features - using the jumbotron, the grid, etc. Not too difficult, once you get familiar with those. Start small and work your way up. A good idea is to try and do it on your own, but you can post your link here and ask questions for things that you cannot figure out.

Prateek Gogia

@reeversedev

I am unable to get any data.
Here's my code .
<!DOCTYPE html>
<html>
<head>
<title>Your Weather</title>
<meta charset="utf-8">
<link rel="stylesheet" href="">
</head>
<body>
<div>
<h1>The Weather</h1>
<div>
<p>
<span id="show-weather"></span>
</p>
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script src="custom.js"></script>
</body>
</html>

Ken Haduch

@khaduch

@roeP - it is looking pretty good so far, I would say?

Prateek Gogia

@reeversedev

$(document).ready(function(){

    function getCurrentWeather() {
        $.ajax({
           url: 'http://samples.openweathermap.org/data/2.5/weather/' ,
           jsonp: 'jsonp',
           data: {
               id: '2172797',
               appid: 'b1b15e88fa797225412429c1c50c122a1'
           },
           type: "GET",
           dataType: "jsonp"

        })
        $done(function(json) {
            $('#show-weather').text(json.coord.lon);
        })
    }
});

Can anyone please help?

roeP

@roeP

@khaduch i need to search the internet about codes? or try on my own using the only the challenges i did so far?

Ken Haduch

@khaduch

@reeversedev - I don't think that you put $done for that? I think that you include it within the object parameters for the ajax call? Maybe like this:

$(document).ready(function(){

        function getCurrentWeather() {
            $.ajax({
               url: 'http://samples.openweathermap.org/data/2.5/weather/' ,
               jsonp: 'jsonp',
               data: {
                   id: '2172797',
                   appid: 'b1b15e88fa797225412429c1c50c122a1'
               },
               type: "GET",
               dataType: "jsonp".
                done: function(json) {
                $('#show-weather').text(json.coord.lon);
            })
         }
    });

Although what you did might be an alternate way to do that? Want to post your URL?

Janina Pohorecki

@janepohorecka

What's causing the space between the form and inputs? https://codepen.io/janepoho/pen/oZvvKQ

Ken Haduch

@khaduch

@roeP --- probably a combination of both. You have a foundation of information through the lessons, but the "Read, Search, Ask" philosophy of FreeCodeCamp means that you have to go out and do some additional searching and reading, because they only give you a foundation. You have to build on that.

Janina Pohorecki

@janepohorecka

How can I get rid of the whitespace between and around the inputs?

achudoz

@achudoz

@roeP yeah that seems pretty ok. Only your link is not working and you have some redundant div tags. The link is probably not working because a big part of the page is one giant button

Prateek Gogia

@reeversedev

@khaduch Okay. Lemme try.

achudoz

@achudoz

@janepohorecka inputs have some default margins I think. Force margins to 0 via CSS

roeP

@roeP

@achudoz i wanted it to be like the example page, the gray frame that is actualy the page..

Janina Pohorecki

@janepohorecka

@achudoz I tried that to no avail

roeP

@roeP

@achudoz i was going the hard way and to try it alone

achudoz

@achudoz

@roeP well button is definitely not a thing to use like this it covers everything that is inside it

@roeP use <div> for creating sections

roeP

@roeP

@achudoz ok tnx, i think about somthing else

CamperBot

@camperbot

roep sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:

:cookie: 277 | @achudoz |http://www.freecodecamp.com/achudoz

Prateek Gogia

@reeversedev

@khaduch Nope. I just crossed checked it. I was doing it right at the first place.

Ken Haduch

@khaduch

@reeversedev - okay -want to post your URL for some additional help?

achudoz

@achudoz

@roeP ant that's ok-challange yourself. The page seems ok, just don't use the button element like this. It is not designed to work like this and any other functional elements inside it will not work

roeP

@roeP

@achudoz i tries to make div section for the img and text below, but it didnt work

Prateek Gogia

@reeversedev

@khaduch Man I really wanna learn this thing. If you can help that would be a great thing.

Ken Haduch

@khaduch

@reeversedev - I see that I do have something different in my (not yet completed) weather project - I have the $.ajax({ *stuff here* }).done( *function here* ) - or something like that. Sorry that I didn't check first.

RonBeh

@RonBeh

hey! does anyone know how to store jsondata? i try to save it in a variable but outside of the json call the variable value is undefined

Ken Haduch

@khaduch

@RonBeh - you have to make your variable global, or pass the json data to the function that you are calling.

Prateek Gogia

@reeversedev

@khaduch That's what I was telling you. It's not an object.

achudoz

@achudoz

@janepohorecka I just tried it and it works. I added

<fieldset style="margin: -20px;">

Of course the better solution is to do it in css but the code is pretty messy and I am too lazy to look deep into it. just try working with negative margins and preferably define a single css class that you will use for each one of your input fields

Prateek Gogia

@reeversedev

https://learn.jquery.com/ajax/jquery-ajax-methods/

Janina Pohorecki

@janepohorecka

@achudoz that seems like the hacker solution

Where communities thrive

People

Repo info

Activity