I need someone available to help me with a little question about arrays in Javascript, anyone?
@syonrod I can try
@syonrod Yeah.
@syonrod I can try too.
@gaobin1019 @mananshah51 lets do this
@tiagocorreiaalmeida anything happen?
@Garabed96 sorry wont be able to see it today but I think you are misding some proprety or instead of setting true you set some variable?
Was lookibg at theie documentation doesnt seems that different from yoir code try to copy ansd paste their example if it doesnt work has to be related with some import I guess
@syonrod still having trouble with arrays?
https://codepen.io/faisal1337/pen/VQoWGY
Guys I was trying to make the cnn.com website layout. Can someone help me with this css thingy?
Guys I was trying to make the cnn.com website layout. Can someone help me with this css thingy?
The content inside body-container-2 appears to the very right!
Any help would be appreciated.
@faisal1337 Are you done with Bootstrap ?
@mananshah51 I use bootstrap. But for this website I am using html css only.
@faisal1337 Let's try to do it one by one. What part of the website should be done first ?
@mananshah51 the alyout
layout
I did the navbar. Then the first 3 columns.
Now I am trying to put the second row 3 columns into a separate div.
@faisal1337 Talk to you soon. Need to rush someplace, I am sorry.
sure
without spoiling this excercise for me, can you guys tell me if I'm on the right track...
function titleCase(str) {
var arr = str.split(" ");
for (i = 0; i < arr.length; i++){
arr[i].substring(0,1).toUpperCase();
}
return arr;
}
titleCase("I'm a little tea pot");
so far toUpperCase() isn't working so I must be using arr[i].substring part wrong...
@JoEeeezy_twitter toUpperCase returns a new string which you have to assign to a variable
@JoEeeezy_twitter Since strings are immutable, most every string function returns a new string
aah ty ... i forgot they can't be changed :+1:
@JoEeeezy_twitter You are on the right track
@JoEeeezy_twitter yep
thanks :) , finally solved it https://i.imgur.com/oP5fDnk.png
aha and now i learn about the str.slice lol
anyone know why this won't work
been stuck on it for 6 hours now
@Garabed96 Can you say what should happen and what is happening
how come the online and offline buttons arent working ?
https://codepen.io/Muradmsalati/pen/Jpxyax
https://codepen.io/Muradmsalati/pen/Jpxyax
@Garabed96 what is the issue?
@DMsalati Your two functions with getJSON will only ever return undefined.
@DMsalati status will always return undefined so you will only ever get hide.
@Garabed96 There are two binds for handleClose and handleShow in your constructors, but I wouldn't think that would matter
@sjames1958gm how come since im using the same functions to display the offline/ or what the streamer is doing atm
This function has no return so it will always return undefined (or false) also getJSON is asynchronous so it cannot return the status like this
function status(stat){
$.getJSON(streamsLink + stat, function(json) {
/*optional stuff to do after success */
$('#'+ stat).text(json.stream.game + ': ' + json.stream.channel.status);
});
}
@sjames1958gm so if i use another function that does the same thing, but instead of .text i use return and use that function in an if statement to do the online/offline buttons?
@faisal1337 change body-container-1 into a class. id's must be unique. i would start designing the layout as for the mobile first then in media queries i would change it for bigger screens. you may opt using flex or grid as for the layout
@faisal1337 i would not mix inline styling with external css styling. i would do all css styling in external file
@faisal1337 as for css reset you may alternatively use external link as
https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css
@DMsalati your status function must return true or false. if you make a console.log into
$('#online').click(function() {
console.log(status('esl_sc2')); you will see you get undefined
@DMsalati sorry haven't seen that @sjames1958gm already pointed that to you :)
@sorinr its ok thank you, im still stuck tho lol
dmsalati sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1400 | @sorinr |http://www.freecodecamp.org/sorinr
function status2(stat){
$.getJSON(streamsLink + stat, function(json) {
/*optional stuff to do after success */
return json
});
$('#online').click(function() {
//shows esl_sc2 when online
if (status2('esl_sc2')) {
$('#esl').show();
} else {
$('#esl').hide();
}
//shows FreeCodeCamp when online
if (status2('freecodecamp')) {
$('#fcc').show();
} else {
$('#fcc').hide();
}
//shows loltyler1 when online
if (status2('loltyler1')) {
$('#ty').show();
} else {
$('#ty').hide();
}
//shows cretetion when online
if (status2('cretetion')) {
$('#cret').show();
} else {
$('#cret').hide();
}
});
@DMsalati i would go this way: when you first retrieve a channel info if the channel is online i would apply to the element a class like online otherwise an offline class then just filter by class. the online btn will hide all elements having the offline class and viceversa
@DMsalati lets say you want to have an array of channels you want to display. then it would be hard to manually code the status for each channel as in your example above
@DMsalati you may want to dynamically change your channel list
I am trying t write a simple html5 page form and I'm having problems I don't know how to fix. I need some help.
How can I show the code I have written so you can see it?
@ldubia do you have any code as so far?
yes, but don'y know how to show you.
copy paste ok?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Woodturners are Chiselers</title>
<body>
<H1>Woodturners spit sawdust</H1>
<form>
<p>Please Register</p>
<label for="First_Name"> First Name: </label>
<input type=text id="first_name" name="first_name">
<br /><br />
<label for="last_name"> Last Name: </label>
<input type=text id="last_name" name="last_name">
<br /><br />
<label for="eMail"> eMail: </label>
<input type=text id="eMail">
<br /><br />
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br /><br />
<label for="Confirm_Password"> Confirm Password:</label>
<input type=text id="password" name="password">
<br /><br />
<label for="Date_of_Birth"> Date of Birth: </label>
<input type=date id="Date_of_Birth" name="Date of Birth">
<br />
<br />
<p>Select your gender.</p>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="something_else">Something Else</option>
</select>
<br />
<br />
<p>Select your favourite activity</p>
<label for="read">Read</label>
<input type="checkbox" id="read" name="activity" value="read">
<label for="write">Write</label>
<input type="checkbox" id="write" name="activity" value="write">
<label for="eat">Eat</label>
<input type="checkbox" id="eat" name="activity" value="eat">
<label for="sleep">Sleep</label>
<input type="checkbox" id="sleep" name="activity" value="sleep">
<label for="be_merry">Be Merry</label>
<input type="checkbox" id="be_merry" name="activity" value="be_merry">
<br />
<br />
<p>Tell us about yourself.</p>
<textarea name="description"></textarea>
<input type="submit" value="Submit">
<br /><br />
<input type="submit" value="Submit">
</form>
</body>
</head>
</html>
@ldubia if its not to long you may use
your code in here and paste you code
I checked it out in an html check site and it came back with errors I don't understand.
@ldubia without any css style your page is looking like: https://codepen.io/sorinr/pen/QQeaLm
the site is called nu html checker. https://validator.w3.org/nu/. This is supposed to be just raw html without the he css or js. a begginning class.
I wrote it in sublime.
@ldubia you are closing
</head> after closing the </body> tag. it should be before opening the `<body>'
@sorinr can you tell me if there is errors I ave to fix and how to identify.
At the top the <head> tag comes before the <body> tag. Am I not supposed to close in reverse?
or do I close head at the top?
I closed it at the top and it worked.
Error: Duplicate ID password.
From line 28, column 9; to line 28, column 55
↩ <input type=text id="password" name="password">↩
Warning: The first occurrence of ID password was here.
From line 24, column 9; to line 24, column 61
↩ <input type="password" id="password" name="password">↩
Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.
From line 32, column 9; to line 32, column 65
↩ <input type=date id="Date_of_Birth" name="Date of Birth">↩
Error: The for attribute of the label element must refer to a non-hidden form control.
From line 11, column 9; to line 11, column 32
↩ <label for="First_Name"> First
Error: The for attribute of the label element must refer to a non-hidden form control.
From line 27, column 9; to line 27, column 38
↩ <label for="Confirm_Password"> Confirm
These are the other errors I don't understand.
@ldubia in codepen html section you have in the right part a small dropdown button and you may choose analize html to see all the errors you have
@ldubia ids must be unique
@ldubia so for the confirmation password use an id like id="confirmation-password"
@ldubia - duplicate ID values (using the same value twice in one HTML code) is not allowed - ID values are required to be unique. If you have the
<label for="someValue" - the someValue is supposed to pertain to the ID of a form input. The date input type might not be supported on all browsers - a "polyfill" is a piece of code that will properly support that type on a browser that doesn't natively support it. ((@sorinr is answering, too, I see... hello Sorin!))
@khaduch :wave:
:wave: @sorinr
@khaduch how u doing?
doing alright, how about you?
not too bad. been missing for awhile from the rooms. had some projects to work on
I was thinking that I haven't seen you around lately - welcome back!
glad to be back. hope to stay around more time :)
@sorinr :+1:
thanks everyone.
i accidently ran an infinite loop and now it crashes everytime i load FCC , does anyone know how i could remove it before it runs
:worried:
@JoEeeezy_twitter You can try clearing browser cookies or https://forum.freecodecamp.org/t/disable-code-auto-run-on-free-code-camp/19511
ty that link is exactly what i needed ... looks like it's happened alot before :)
i would clear cookies but i'd like to keep my other challenge code for reference
that code probably doesn't even make sense.. but i'm having a bit of a struggle with this one... sometimes when i get frustrated i'll just keep changing things around just to see what king of changes happen but this time it ended up breaking
@JoEeeezy_twitter Looping the array indices with increment
i = i + size is a good way.
thanks i'll give that a try :+1:
@bradtaniguchi Thanks Brad, I gave a thought of learning aws then it seemed to have a steep learning curve but I guess the time have come.
heathercoraje sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
@JoEeeezy_twitter you can remove the
autorun portion of the url, and reload the page... that way you code should not run on mount :)
guys
how do i create my own child theme in functions.php. If i allready have a website with a child-theme from a existing customer
hey @Garabed96 how are you?how it went? I can giv eit a look today
guys
anybody know a place, to find good website color combinations ?
@mustimuu - there are sites like https://color.adobe.com/create/color-wheel/ that are supposed to help you with color schemes. This article looks like an interesting one related to that. And they link back to the Adobe site, too, with some explanation of how to use it.
@khaduch thank yo
mustimuu sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3779 | @khaduch |http://www.freecodecamp.org/khaduch
@mustimuu Ken mentioned good one, and I'd also add paletton.com/ I personally use this for my projects
@ezioda004 thank you
mustimuu sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @ezioda004 |http://www.freecodecamp.org/ezioda004
@ezioda004
how do i know which colors match each other
like i want my navigation to match rest of the website
Hi guys, I may need help with my nav bar. I want to put the menu tabs on the bottom-right of my menu/ nav div. https://codepen.io/UnorthodoxThing/full/paMBQB/ It's stuck on the stop left and I'm not sure what's causing it to.
@mustimuu Match as in compliment or you want palettes?
Stuck on the top-right*
palettes
mate
@mustimuu - the http://paletton.com site that @ezioda004 mentioned looks like it is a great tool for that purpose.
@UnorthodoxThing You can add this to the .nav
.nav{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
@Marianissimus wow thanks! I don't know much about the 'flex' value. Is there a good read or video you'd reccomend? :D
unorthodoxthing sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @marianissimus |http://www.freecodecamp.org/marianissimus
What was the problem though??
You're welcome. this for theory: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and this for a veeeery nice practice: http://flexboxfroggy.com/ @UnorthodoxThing
anyway, pay attention to the new css-grid, it's supposedely better than flex.... so learn that...
@Marianissimus Thanks heaps for the resource! There's a new css-grid?? I started developing the page already and after that I started learning of the css-grid. I thought I'd stick with it for now and do another page with the css-grid. Would that confuse other people looking at my codes?
unorthodoxthing sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
api offline
no, stick with what you have. that's a thing for later projects, especially since the support is at about 87%
flex is 98%
hi
im studying bootstrap
and i have many problems with bootstrap links
for instance? copy-paste a link that doesnt work so we can have a look
to create bootstrap modal poppup
are you using bootstrap v4? and an example just like here?: https://getbootstrap.com/docs/4.0/components/modal/
oh yeah.thats it.
i downloaded bootstrap file
but idk how to do with it to create bootstrap model poppup in my web
i just need bootstrap links for that
first, it's files. make sure it's all the files bootstrap needs: 1 css and 3 js in the latest release
make sure they're connected properly
and then just copy-paste the example from their page in yours. it should work
if everything fails, make a pen a give us the link to it, so we can see what's wrong;
BUT WAIT! if you just need bootstrap for a modal, maybe you can find a simpler solution.
do you just need bootstrap for that?
yep
come on, we can find an easier modal / pop-up solution
for customer to confirm on modal pop-up
when do you want to trigger it? on what event?
delete action
so on a click event, right? if user presses delete, show modal?
yep
with cancel and comfirm buttons
here's one: https://codepen.io/patrickkunka/pen/lFJty?q=modal+pop&limit=all&type=type-pens it just uses jquery, and i suppose you already do that
just add your buttons inside the modal wrapper div
here are some very nice effects, done mainly with css: https://codepen.io/designcouch/pen/obvKxm?q=modal%20&order=popularity&depth=everything&show_forks=false
copy and use the one that you like best
copy and use the one that you like best
morning fCC
:wave: @DarrenfJ thanks for your help yesterday
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2416 | @darrenfj |http://www.freecodecamp.org/darrenfj
ah no worries :D
@ name me if your need me, I just popped in to say hi and off to work ;)
ok thanks @DarrenfJ
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
api offline
hey guys
can i get some help?
@Frosty427 sure
im trying to recreate the apple website in bootstrap 4
and i cant figure out how to position the nav items
``` (shift+enter for line break)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fab fa-apple appl" style="font-size: 23px;"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mac</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">iPad</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">iPhone</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"></a>
</li>
</ul>
</div>
</nav>
@Frosty427 looks to me like you could add padding on either side of the nav and make the nav a flexbox
@kbaig apoligies im relatively new to bootstrap could you tell me what flexbox is?
justify-content: space-between
@Frosty427 flexbox is just css, it's not bootsrap
ive tried css but it doesnt work
even when i pit !important
put*
What do you mean
when i use css nothing moves
Is your css file after your bootstrap file in the html?
yes
@Frosty427 would need a pen or fiddle to test further
But yeah, using flexbox would be an easy way to do what you want here. There's probably a BS way of doing it but idk BS
i want to move each item specifically
@tiagocorreiaalmeida Still won't work I'm back at square one. If it pops up... it does so on the page and not as a popup
@padunk I believe its related to bootstrap 4 and react... Some import issue Not certain though but modal is not popping up in an animated way, rather it just opens on the main page....
@Frosty427 what styles did you try to apply
@kbaig i tried to select the font awesome apple icon and use margin-right
i also copied some code from the apple website
@Frosty427 https://codepen.io/kbaig/pen/WzeQwx?editors=1100 working for me
seems i had the wrong path
but what code would i use to position them
@Frosty427 look up flexbox and the justify-content property
@kbaig also how would i make the navbar shorter
@Frosty427 reducing the padding
padding bottom right?
thanks mate
it worked
anyone want to help me with react.js with boostrap 4 ?
Modal not working atm I believe its a dependency issue / import
So I'm almost done with my project. I'm trying to finish the tic tac toe but I can't get the tie function to work at all to save my life. Any suggestions or comments on why this doesn't work?
function tie() {
if (random === 9) {
console.log("Its a tie");
$("#gameboard").hide();
$("#reload").show();
$("#reload").click(function() {
window.location.href = window.location.href;
});
so i have a navigation bar,with links in it,but when i make the 5th link a sublist every other link in the navigation bar drop down to the same position of the sublist items,does anyone know why the links in the navigation won't stay in their original position?
```
<div class="navBar">
<li>
<a href="index.htm">Chades Bicycle Company</a>
</li>
<li>
<a href="kco_2_cal.htm">Company Calendar</a>
</li>
<li>
<a href="kco_2_contact.htm">Contact Us</a>
</li>
<li>
<a href="kco_3_abiform.htm">Customer Feedback</a>
</li>
<li id="dropBtn">
<a href="kco_3_buying.htm">Buying Tips</a>
<ul class="hide">
<li>
<a href="">One</a>
</li>
<li>
<a href="">Two</a>
</li>
<li>
<a href="">Three</a>
</li>
<li>
<a href="">Four</a>
</li>
</ul>
</li>
</div>.navBar {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
background-color: #d3d3d3;
height: 34.5px;
margin-bottom: 20px;
font-family: 'Inconsolata', monospace, Helvetica;
}
.navBar li {
text-align: center;
list-style-type: none;
position: relative;
}
.navBar li a {
text-decoration: none;
font-size: 17.6px;
font-weight: bold;
font-family: 'Inconsolata', monospace, Helvetica;
color: #464646;
letter-spacing: 2.3px;
}
.hide {
display: none;
}#dropBtn:hover .hide {
display: block;
background: chartreuse;
}
@Garabed96 is your repository updated?
@tiagocorreiaalmeida https://github.com/Garabed96/Recipe-box
yes it is
when I click launch this is what pops up
but its on screen
@Garabed96 What is your expectation?
A modal?
Basic functionality wise just like this
@Garabed96 Do you have the styling set up to show as a modal? React can only show in the browser and the styling has to make it look like a modal
ya its in my index.css
@Kingwindie if you remove
align-items: center from.navBar it stops doing that. Not sure, but maybe it tries to keep the elements aligned
@Garabed96 I don't find a modal-container class on any element in the DOM
a class?
Oh
that didn't make a difference though
hi guys! need help to fix this text overflowing out of the div
even if I change the height I get the same issue
@aguyinmontreal Do you have a fixed width on the div?
@aguyinmontreal do u have the code hosted somewhere?
@sj @Garabed96 modal-dialog seems to be the class of the main modal container.
@sjames1958gm yes I think it is inherits the fixed width of the parent div
@aguyinmontreal If the text is wider than the fixed width you need to do something with https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
@aguyinmontreal I am not a pro on that topic
guys im having an issue with pushing something in a navbar
@sjames1958gm I tried overflow-x: hidden, but it doesn't change anything
@sjames1958gm what?
<li class="nav-item">
<a class="nav-link mac" href="#">Mac</a>
</li>
.mac {
right: 500px !important;
}
I don't want a static markup
why isnt it moving in the navbar?
thanks @sjames1958gm found it!!!!! it was this silly attribute
white-space: nowrap
aguyinmontreal sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9068 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@Frosty427 I would use flexbox for that
what is flexbox?
@Frosty427 read this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
@aguyinmontreal :100:
@Garabed96 If you go into the inspector - it appears that the class assigned to the Modal by react-bootstrap is modal-dialog
<div class="modal-dialog"><div class="modal-content" role="document"><div class="modal-header"><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">Ketogic Entry</h4></div><div class="modal-body"></div><div class="modal-footer"><button type="button" class="btn btn-default">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>This is copied from the chrome inspector
well idk if you're implying for me to change the className="modal-dialog" inside the Modal element but that wouldn't change anything
@Garabed96 I am asserting that your CSS should reference these classes when styling the modal
0
That's certainly not the issue
I followed the react-bootstrap example to the T
@Garabed96 if you copy and past their code directly into your react component what appens
I mean iterally everything
open a new file and just copy their code
Anyone know a good free course for BS4?
If you know BS3 then learning from BS4 docs should be really easy.
I don't
@ezioda004 Should i just do this one then?
@MuhammedKarim w3schools, I dont really recommend that but you can give that a shot. There's BS4 in fccs beta Perhaps give that a try?
@ezioda004 Is it the full course? As in FCC it was really basic... Also, I've been told that the beta is quite unstable at the moment?
@MuhammedKarim I havent done myself but it looks like you can get the basics done atleast, and I think thats the most imp part. Reading docs is very easy for bs if you understand its basics
@ezioda004 I kind of understand how to use the docs already
I made this using mostly the docs without learning BS but i believe i would be able to design it better if i learnt BS?
https://codepen.io/MuhammedK/pen/jZoXJP
https://codepen.io/MuhammedK/pen/jZoXJP
@MuhammedKarim I think so, you can polish and you can definitely use some basic CSS styling tricks
@ezioda004 So... should i do a BS course? If yes, which one?
@MuhammedKarim May I suggest using SVGs for instead of images in your skill section?
Like I've used in my portfolio and it looks better and responsive too
You can try both, do the w3 one I guess, doesnt look that bad to learn BS
I don't know how to create SVGs
@ezioda004 That course on w3schools, ive just been doing it for like 5 mins and im feeling sleepy already lol
You dont have to, use devicons, its like fontawesome, just copy paste SVG code
Its w3school :P I dont expect much
Its w3school :P I dont expect much
@ezioda004 I learnt my HTML, CSS and JS lol they're actually alright
skip the bootstrap
but just... learning seems boring
I think i should tbh
*learning BS seems boring
You learn BS by doing and making projects honestly
@ezioda004 Thanks for that link. I love it!
muhammedkarim sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 500 | @ezioda004 |http://www.freecodecamp.org/ezioda004
ooh 500, nice
nothing wrong with bootstrap - i prefer to just make with css
and js
Oh yay 500!
It's a looott faster with BS, i used to use CSS but im a terrible designer and CSS is too slow
Aditya you should join the FCC/FCC group
Whats that? The main channel?
Yes
I'm there usually just lurk around
@ezioda004 Oh right, just never seen you there. Might have been my eyes
Thats because I dont talk there haha but yeah I'm there. Usually hang in frontend/js/help channels
@ezioda004 Help channels?
Nice!
Lots of rooms :) https://gitter.im/FreeCodeCamp/home
Only a few are very active though :/
@tiagocorreiaalmeida it still doesn't pop ouot
@gulsvi Gotcha, thanks
muhammedkarim sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2652 | @gulsvi |http://www.freecodecamp.org/gulsvi
So I’m trying to add entries into an object but I’m having difficulty getting the structure organized the way I want to when data is updated:
const items = JSON.parse(localStorage.getItem('storedKeys')) || []
function storageIndexUpdate(key, value, timeoutID) {
const item = {
key: {
value,
timeoutID
}
}
items.push(item)
localStorage.setItem('storedKeys', JSON.stringify(items))
}
storageIndexUpdate('cat', 'brown', 6)
@jjzep how would you like to see the structure organized?
I *believe* you want to do this, but not sure without more info:
const item = {};
item[key] = {
value,
timeoutID
};That results in:
[{'cat':{'value':'brown','timeoutID':6}}]instead of:
[{"key":{"value":"brown","timeoutID":6}}]
Yes, now if I want to add in multple values under cat, would that work as an object or should it be an array?
It would work either as an object or an array - it's flexible
As far as what's best, it depends on how you want to use the data later. I'm not sure of any benefits of using an array vs. more objects, it may just be a matter of preference on what's easiest for you to access later
Yeah I’m experiementing with localStorage and accessing individual values.
@Garabed96 If you have your react app in codepen, I might be able to help. I've experimented around with react bootstrap...but no guarantees :) I just can't debug it easily in a github repo
does anyone know a good way to send form data to an email or something. I'm trying to set up my portfolio so that you can fill out a form and send it.
@CyberPutty There's https://formspree.io/, but it won't work from codepen unless you run your portfolio in the debug view. It would work fine if you plan to host your portfolio from github
@gulsvi was just about to suggest that
great minds :)
too quick as always
@gulsvi thanks Ill check it out I have some hosting through godaddy so its being hosted
cyberputty sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2653 | @gulsvi |http://www.freecodecamp.org/gulsvi
@gulsvi how you been?
@gulsvi lol I found out what it is, I needed a <link> in my html file -_-
@user-ap Doing great, you?
@Garabed96 Glad you got it figured out!
@Garabed96 You were missing some css?
@h1tag ok,i will try that,i was thinking about removing the grid system,i thought it didn't work well with submenus
@h1tag thanks
kingwindie sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 933 | @h1tag |http://www.freecodecamp.org/h1tag
hi guys, i have a question but i need to post some code to ask it, so whats the best way to go about this_
ie how do you post snippets_
thanks @gulsvi
leighhobson89 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2654 | @gulsvi |http://www.freecodecamp.org/gulsvi
The backtick for code is above the tab key on US English keyboards - above the shift key on most spanish keyboards
function callQuote() {
$.getJSON("https://cors-anywhere.herokuapp.com/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$("#quote-text").append(a[0].content);
$("#author").append("-- " + a[0].title);
});
}This function works great when the page first loads through document.ready() - but when I call it with a button click like so:
$('#newQuote').on('click', callQuote());
});either nothing works, or the API is not calling a fresh quote. As a side note, if I refresh or hard refresh the page, the quote loaded is the same one as last time always...?
i´m very new at javascript by the way :/
$('#newQuote').on('click', callQuote);
can you try it this way?
sure
now when i click it it appends the same quote below the other one, but at least its doing something, i´ll work on the API whats and wherefores, and clean up the page. Thanks a lot man! @tiagocorreiaalmeida
leighhobson89 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 507 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
no worries @leighhobson89 if later on you still have issues post it here but for now try to debug and spot what you are doing wrong gl
I don't get this:
dropElements([0, 1, 0, 1], function(n) {return n === 1;}) should return [1, 0, 1].
why that 0 in middle ?
0 === 1
is false
´´´
´´´
$("#newQuote").on("click", callQuote);
});
});
function callQuote() {
var rand = Math.floor(Math.random() * 40 + 1);
tidyUp();
$.getJSON(
"https://cors-anywhere.herokuapp.com/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40&callback=",
function(a) {
$("#quote-text").append(a[rand].content);
$("#author").append("-- " + a[rand].title);
}
);
}
function tidyUp() {
$("#quote-text").html("");
$("#author").html("");
}
´´´
I fixed it as above in the end, by making a small tidy up function and then pulling down more quotes at once and making a random number generator to pick one - that will probably do it! @tiagocorreiaalmeida
whoops code formatting didnt work
@leighhobson89 remove the proxy to cors-anywere.herokuapp.com and use this URL instead:
https://quotesondesign.com/wp-json/posts?filter[orderby]=randIt just needs to be https and you had http
You could also use this line of code to get a new quote every time rather than grabbing 40 quotes and using a random number to pick one:
$.ajaxSetup({ cache: false });