@Frosty427 Most of your initial code is still there for the navbar, I just added the shopping bag icon and used some bootstrap responsive utilities to adjust formatting based on screen size.
Hey guys I was wondering if it's possible to have a button scroll down a page to an element that has a certain ID. Is there a code for that?
@TonyRednil Yes, it's possible to click a button and have the page scroll down to a specific element
The most common way is to use a hyperlink and style it like a button - then you just use
href="#idName" for the link
See the section "HTML Links - Create a Bookmark" here: https://www.w3schools.com/html/html_links.asp
tonyrednil sends brownie points to @gulvsi :sparkles: :thumbsup: :sparkles:
api offline
Alright. So now I would like to code a button that opens the default email client of the user and automatically starts a new email addressed to my email. Would I use an href for that or is th
at even possible in html?
at even possible in html?
From what I've read online you have to use a form element with the mail to: action.
guys any advice on my navbar Item adding
https://codepen.io/jcunanan05/pen/gWmraE
is-active idea.. line 44 checkSlide(e) my code seems to work when scrolling down, but scrolling up doesn't seem to work. Any thoughts??https://codepen.io/jcunanan05/pen/gWmraE
@jcunanan05 - I did some fiddling with it and was somewhat baffled by the calculation. But what I ended up doing that made it work was to move, actually add, a line to remove the
is-active class from the section before trying to set it again. This line: navbarItem ? navbarItem.classList.remove("is-active") : ""; right before your test for if (sectionIsNear) and it looks like it's working better? I should save a fork of your project as I have it working now, because I removed some of the repeated code from each of those block for the two conditions to the top (I also threw a lot of console.logs in there.) But here is the url of what I have that seems to be working... i hope it helps?
@khaduch @jcunanan05 i would not multiply
navbarHeight by 4 but just let topPosition + navbarHeight >= section.offsetTop
@khaduch because if @jcunanan05 decides to apply a smooth scrolling to the corresponding section the "scrollspy" will look more natural in my oppinion
because I'm trying to use var newArr = arr.push(num).sort(); and it's not working
@JoEeeezy_twitter have you tried
var newArr=arr.push(num) and then newArr = newArr.sort() ? is it working this way?
that doesn't work either hmm
i dont think arr.push is returning an array
what he's asking is have you defined it like
var arr = [];
somewhere
do
var arr = []; outside the function, on the top to define your arr, so you can use it,
i thought sort() always sorted by smallest number to biggest by default
is there a way to make these two methods one line like i see some people do https://i.imgur.com/t6UFAh4.png
ok
i don't get this test getIndexToIns([5, 3, 20, 3], 5) should return 2
like, how it should return 2 if 5 is on the 0. position
XD
that one and the one right above it
the 3, 3 5 10
if a number is already inside array, don't push anything, just return it
yet it doesn't work with that test i got error at, and i don't get why because number 5 is inside the array and it should return index of 2? like, how? xD
it works with the one right above it too , even though the 3 is inside the array also
yeah it is
oh i get it ... the 5 is gonna point to index 2 after being sorted
but if you push 5 in the array where it exist, sort will sort it from lowest to highest again and you'll get to have 5 on positions 0 and 1, not 2
the one with the 3 above is is gonna return 0 anyway because the array starts at 3 and it's already at 0
if you sort you'll get 3 , 3, 5 , 5 20
XD
my last challenge took me 2 days to figure out :facepalm:
well ... not full .. hours of staring and then walking away in frustration lol
it's good though.. the only time i really feel like i failed is when i give up and look at the solution i dunno why but that gets to me alot
but then some other challenges i can do within an hour
it's okay to look at the solution when you can't get it on your own, as long as you don't just copy paste it and move on, but read it with understanding and learn from it
What's the api use in image search abstraction layer?
@JoEeeezy_twitter the most important thing is to understand what each function does. i never memorize js functions syntax. i just lookup for it to refresh my memory
Hi,
There is something wrong with my calculator. Whenever I click on "=" after evaluating an equation, the number goes back to the equation.
Here's the codepen
https://codepen.io/raghav96/pen/EQBMJq
There is something wrong with my calculator. Whenever I click on "=" after evaluating an equation, the number goes back to the equation.
Here's the codepen
https://codepen.io/raghav96/pen/EQBMJq
i kinda like it that way
Yes, The answer goes back to the equation instead of staying.
@mbosnjak01 Also, It is updating when the first character that I press is an operator.
how can i push those plus signs to the ends of the box
to be on the exact opposit of the words
@mbosnjak01 here is my code
i have a differenct set up
where like my icons are inside the li
@Frosty427
man can someone help me push those plus signs
to the end of the box
man can someone help me push those plus signs
to the end of the box
is it that pen you posted a little bit earlier?
give me a moment
i code locally
gotta update codepen
@asparism wait nvm dude
and i write it off
2 hours later i try it
and it fucking works
idk why i didnt listen
@Frosty427 sometimes it happen that browser cache messes it up -> doesn't reload new code ... so in that case do ctrl + f5 to reload browser and clear cache memory
idk if that was the case, but it can help sometime
i was gonna say float: right in the styling.
what was the advice that worked?
looks slick btw
@Frosty427 like @asparism said, that's a pretty cool page there, mate!
@rna7 I had the same problem, you need to set the cache to clear. But I used jQuery for my project, so I don't know how to do it with vanilla js
thanks
@rna7 Using the CORS proxy, you don't have any control over caching on the proxy.
You are getting a new response each time, so it is not caching inside your browser.
You are getting a new response each time, so it is not caching inside your browser.
Well, I was getting a new 200 OK with the same quote which I took to mean the proxy was caching.
You could "trick" the proxy with something like this which makes the URL "unique" each time
let x = Math.floor(Math.random() * 100) + "";
xhr.open("GET", "https://cors-anywhere.herokuapp.com/https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&tmp=" + x, true);
@rna7 You could of course request many quotes and randomize over those and not request each time.
rna7 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9079 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@rna7 :+1: It depended on the API not rejecting the request on the unknown parameter 'tmp'
@sjames1958gm I wonder if there isn't a "proper" way to do this using headers
@rna7 There may be. One issue is you are using a proxy to circumvent CORS, so you are restricted by the proxy behavior
@rna7 You can implement jsonp, which is somewhat complex with vanilla js (jquery handles that nicely)
this project really could have been explained better on FCC. Or at least come with FAQ and precautions
check http://api.jquery.com/jquery.ajax/ and http://api.jquery.com/jquery.getjson/ for json api calls, it's much easier than plain js ... I prefer jquery ajax instead of getjson, but if done as simple as possible, both work the same.
@rna7
@mbosnjak01 Thanks. I know about jquery but I just want to learn plain Javascript. It just seems like a crutch at the moment
rna7 sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 246 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
@mbosnjak01 Yes, I think that was my point as well. If you are just doing get's retrieving JSON no reason not to use getJSON.
If there are no CORS issues then I just use fetch API
If there are no CORS issues then I just use fetch API
I prefer doing ajax calls like this:
$.ajax({
type: "GET",
url: "apiURL,
dataType: "json",
success: function(request) {
// do your code here
// example
console.log(request.quotes[qRandNum].text)
}
})
I usually work with plain JS, but api calls i do with jquery
@rna7 I tried doing my quote machine project with plain js too at first. Didn't work out well....
:(
:(
@Quantomistro3178 I did it in plain JS at first, but because of simplicity of animations in jquery i rewrote all to jquery ... and it's really small as well
@Quantomistro3178 My thinking was that if I can understand it in JS then jquery will be easier later on
@mbosnjak01 Well, yours is definitely faster than mine.
@rna7 That is exactly what I was going for too. But ended up using jQuery because I didn't understand XMLHTTP, plus I needed jQuery's animations...
@rna7 it's jquery script, although it was plain JS localy, but was still working the same
@rna7 No because I lost many stuff when I formated my PC, and forgot to save stuff XD
Then use fetch
fetch(url)
.then(response => response.json())
.then(json => // process json)
But hey, in my defense, fCC's tutorials on AJAX and APIs are very vague. They literally just give you the code instead of explaining.
So I just decided to use jQuery for this one in the end. And I even kept the jQuery code pretty simple - just a get request, and a success function.
@sjames1958gm I plan to build this project again using fetch and then using jquery
but it's not meant to be copy pasted, you should read about that stuff which you don't understand and learn :P
I'm trying to implement some google apis in my weather app .. so far no luck :(
yeah I'm kinda trying to overlap 2, or even 3 maps into one
still not sure how to approach this, but i'll figure something out XD
maybe i won't have to do 2-3 maps
i meant, gathering data from about 2 or even 3 google apis to make one map
oh look
i just solved my problem
@Quantomistro3178 thanks :D
mbosnjak01 sends brownie points to @quantomistro3178 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @quantomistro3178 |http://www.freecodecamp.org/quantomistro3178
@mbosnjak01 lol, I've no idea what you're talking about. But you're welcome anyways!
So what did you figure out?
I'll try to put all google apis i need in one function ... first to render cities, then routes, then weather conditions
as custom markers
@mbosnjak01 Well, I don't really understand, but could you show it to me once its complete?
once it's complete i'll probably post it on my github, so, sure. @Quantomistro3178
quantomistro3178 sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 247 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Can anyone please let me know why my webpage is shifting towards left even when I am making the h1 as "text-center".
@Raghav17 Inside your max-width of 700px
@sjames1958gm I figured out the solution buddy, I was not using "container". Thanks though! :D
raghav17 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9081 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@Frosty427
https://codepen.io/Frosty27/pen/QQRjbQ?editors=1000
can someone help
why is there a giant white space to thr right of everything?
it starts to mess up
@Frosty427 or you can just do
body {
overflow-x:hidden;
}
on the top of css file
it won't permanently solve your problem
because when you resice the screen (higher resolution), that white space will be there
that's why I left you an article for responsive web design on another channel
it's important to understand how responsive web design works (in plain css as well), and to know how to make it with just css, instead of jumping directly to Bootstrap.
I want something like var lat = position.coords.latitude
var lat = ""; then change its value later
@rna7 so what doesn't work as it should for you? Not sure if this is your final code you want or ...
@rna7 I would recommend using the link created by FCC to facilitate this challenge.
https://fcc-weather-api.glitch.me/api/current?lat=0&lon=0
if you go to mobile you can see extra text in the bottom right
i have gave a shit tone of classes for display and what not but they are still showing
(bootstrap 4)
@Frosty427 in a media query set your xs-none class to display none
meaning i havent even typed one before
so something like
@media(max-width: 400px) {
.xs-none {
display: none;
}
}
you would put that at the end of your css in codepen
@kkindorf
I'm not going to give you all of the answers I gave you the concept to build off. Use what resources we just shared to figure out removing that other block
@Frosty427 Appreciate the time people take out to help you bro
Kevin was very kindly helping you out and you showed your in-appreciation by saying w/e.... @Frosty427
i was saying ok
theyre the same thing
@MuhammedKarim he threw me into something i didnt understand and i also have a 2 hour deadline now to taking the time out to learn that wont be practical at all
spend three days trying to figure something out
and tell me you wont get frustrated
i spent 3 days making a portfolio for a deadline
i was told it was rubbish and to use bs instead of css. ive never used bs before
i made a much better one in a few hours
by learning the basics
so you only have one small part left, just learn the basics of MQ and crack it
@MuhammedKarim idk if you reading over the line or something but i keep saying i dont have time like that
@Frosty427 I was on the way to the place and i had to still learn and fix up things with my page.
Just be appreciative, that's all im saying
im here briefly
5...
4...
3....
2........
1.....................
0_
@kerafyrm02 can you help me or are you gonna have me decode ancient hieroglyphs?
@asparism can you help me?
i wasn't following the thread before but i can go back and look if that's it
if you go to the codepen youll see that when you shrink it to mobile there is extra text showing at the bottom
@asparism
I don't understand bootstrap well enough to know why the mobile footer disappears in desktop mode, but the desktop footer doesn't disappear in mobile. that's probably your answer though. a quick fix would also be a media query, which, media queries are really simple, you just insert the width at which to change styling.
but it looks like the real solution has to do with why the mobile footer disappears automatically and figuring out why desktop footer doesn't
@asparism the mobile footer disappearing is on purpose but thanks for trying
frosty427 sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @asparism |http://www.freecodecamp.org/asparism
yeah! exactly! so whatever you did on purpose to make the mobile footer disappear, if i were you i would try to do that with the desktop footer, because it looks like that text is part of the desktop footer.
Anyone able to help with the Beta program?
ES6: Use Destructuring Assignment to Assign Variables from Objects
I am having a difficult time applying the concept to a
string
and assigning
length to let
Does anyone have any experience with the Pomodoro Timer? I have some questons
@Frosty427 one more thing, if you delete all the classes on all the divs in that footer, that text stops trailing off the page
good luck to all
and to all a good night
*morning
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2419 | @darrenfj |http://www.freecodecamp.org/darrenfj
I am using the setInterval function and running it every second. What I do is set a variable of minutes to whatever is the html content of my Break Length. Once I run the setInterval function and then assign the html content of whatever is in minutes to display. It always ends up being one number lower than I set. I tested with an alert function right before I define the setInterval and I get the number I want. Then I tested and put the alert right after the setInterval and the number is different. Not sure what's happening.
@mbosnjak01 @sjames1958gm
@rna7 use https
@rna7 I would recommend using the link created by FCC to facilitate this challenge.
I've used https and the link from FCC, but it gives me 401 error
or CORS
@lukenetti3 do you have a codepen or something you can share with us?
Hey, can anyone explain me how to scale text instead of wrapping on smaller screen sizes?
If you are looking for picture perfect scaling (like for a background image or something) you might want to try an svg instead... Otherwise, if you are just talking about responsive font sizes, use a media query in your CSS
@media(max-width: 768px) {
and then add your styles like normal
and then close with an extra }
@Elijbet These may be helpful: :sparkles:
how can i find the element which responsible for the hambruger icon to appear on my site through mobile devices? so basically im looking for the class/id that triggers it to appear on my source code and i couldn't find...
if you have the end result and you're using a browser with developer tools, you can usually do something like right-click and 'inspect element'. Then the html will pop up and highlight the element you selected.
and it has js on the in the inspect element so i guess that's why but how can i modify it
so you have the source code, right? and are you using any libraries?
and yes
the classes i use must have in the css file something to trigger the navbar to change
the class
you can try to
ctrl+f to search for all instances of the class, I think .navbar-toggler, and look through each one in your code
and this is the class when its on mobile look
@lydatech how the navbar can appear just from media query?
if its not stated on source html file
can someone point out where i'm making a mistake please
@danydin its a mix based on Data-toggle="collapse" what are you trying to do?
i'm trying to figure the element on my html code that trigger the hamburger to appear on moible
because when i inspect it on mobile version (as it only appear on mobile) there are no such classes on my html source
ok, the class isn't present, hm.
yes it is not there... i guess it js becuase it states js on my inspect as well but i dont know where to find it i dont have any js code on my html
except few href
it must come from one of my js files then lol
what is this code means? to run this js when it's appear on one of those devices? is it vanilla js?
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
this just creates an object that sets boolean values for each possible case
cool and what's the purpose of
any key in the end? @asparism thanks
danydin sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @asparism |http://www.freecodecamp.org/asparism
@lydatech Is right, if you can find the part of your code that injects different elements by detecting mobile/desktop, you might find what you're looking for
it's not true because it was on an external file so i couldn't find the element on the source file
@danydin it would be MUCH easier just to define the media query you want and change it there
looks like the
any just detects whether any of the previous keys are true
cool smart idea hah
yes but i wanna do it like the pros papa
@danydin then you need to look at the mixin files for bootstrap. Thats where they are defining it. and then build a custom dist
from source. I dont understand why you would want to mess with the framework where a few lines of code is all you need
yes there are medias... i found it ... the js inject the new html code and then on the css media query it's adding the style
i got that code papa i just had to learn it
since when they added those mobile useragents to js? on emca2017?
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
ahh this is if i want to change the default breakponits for col-md etc...
cool learnt another thing today.. :D @lydatech thanks.. is it on the mixin dir?
danydin sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
@khaduch Thank you for looking at it it's now working!!! @sorinr thanks too good advice!!
jcunanan05 sends brownie points to @khaduch and @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1401 | @sorinr |http://www.freecodecamp.org/sorinr
:star2: 3785 | @khaduch |http://www.freecodecamp.org/khaduch