what do I need to do next I am so close.
Can someone help me with the Random Quote Generator? I am trying to figure out how to grab a new quote by clicking the "New Quote" button but am unsure how to add the
click() method in jQuery to my code. You can find my pen here: http://codepen.io/twhite96/pen/9b61fc44a276edb9bbb405cac84cf938?editors=1111
@codingisfun11 can you point me to the challenge you are doing?
Quoting Strings with Single Quotes---JavaScript
@twhite96 You need to create a click event on the button which will then trigger the AJAX call which you have currently running to replace text in the <p> tag. Something like
javascript
$(“#button-id”).click(function() {
// do somethting here
};
You’ll want to wrap that in a document ready call to make sure the element is on the page before it is called @twhite96
@bsandusky can I keep what I have?
@bsandusky and add the click event?
I tried that but I am not sure where to put it.
@twhite96 You can, however, you need a way to call the AJAX call. Right now it’s executing because it loads on the page. You may want to wrap that in a function itself, so that you can call it when the document loads AND on the click event
@codingisfun11 I think you need to use the sentence that they gave you, and make the slashes at the double quotes.
@bsandusky can you show me an example?
@twhite96 I have a function called “getQuote()” which calls the AJAX call to snag a quote and then update the page. I can call that when the documen loads or when i click on the button. https://codepen.io/bsandusky/pen/oLNRdr
@twhite96 Then, wrapped in document ready, I have a line
$("#generate").on("click", getQuote); which calls the getQuote() function when the button is clicked
Ohhhh okay
@Ryanwfile Your issue is in your game function. You try to check if "start == true", but you don't have access to the start variable. When you do that check, your start variable is only defined in "starter" function. Made the fix on this codepen: http://codepen.io/Cory2911/pen/VjxPkL?editors=0010
@twhite96 It really does get a little easier. Just remember to open your document, create a get function and then at your button the click to go back to the original get function.
@Rom2711 on line 14, what is start wanting to do?
@KoniKodes I was was mistaken, there were some other problems as well. Like where the event listener is being added
@KoniKodes WOWWWWW
@Rom2711 Thank you very much for the help, I thought the start variable was a global so it might work that way. I am looking at your code and it definitely seems like an improvement but the beeper() function still doesn't seem to be executing when start is clicked
ryanwfile sends brownie points to @rom2711 :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @rom2711 |http://www.freecodecamp.com/rom2711
@Rom2711 Yes, I can see that. I didn't take too close a look, that was what first caught my eye. I'm not there yet, but keeping open to possible future solutions to help with were I am.
@KoniKodes I dont need ot use that string it says I need to work with the provided string.
@codingisfun11 I'm sorry, I only saw myString with an ahref in it.
@codingisfun11 Which string do you see as the provided string?
@KoniKodes
@Ryanwfile Instead of doing your check on a variable state (started), you could just change your starter function to something like this:
function starter (){
$('#start').on('click', beeper)
}
function starter (){
$('#start').on('click', beeper)
}
That would tie your beeper function straight to the starter function
or at least your start button
@codingisfun11 Ok.
@KoniKodes what should I do next.......I have 2/3 steps correct
@Rom2711 Ok that seems best I will do that, thanks again for the help
ryanwfile sends brownie points to @rom2711 :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave rom2711 points
np! good luck
Hey guys
@codingisfun11 I'm sorry that I don't understand why you have a var with an ahref instead of a string. It seems to see that you have done that, but I can't see the single quotes. Perhaps you can type the second orange sentence and see if that works.
I need some help with my navbar, it just isn't going flush with the edge of the page
@sammytheindi What does your margin look like?
body {
background-color:grey;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #4CAF50;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto; /Enable scrolling if there is too much content./
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
margins and paddings are both 0
@sammytheindi Pretty sure adding 0 margin and padding on your body element should fix it, I think
My HTML is:
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
@sammytheindi ok. Do you have pen that I see?
yep
Hello fellow front-end learners wave
begins working on personal portfolio challenge
@sammytheindi add "margin: 0px" to your body element
and it's fixed
@sammytheindi I think it will help to go to the code pen Settings in upper right corner. Under CSS add Bootstrap (from the dropdown).
Holy shit thank you so much
@sammytheindi Under JS settings add Bootstrap js. Bootstrap helps with the nav-bar
Definitely will do
@AaronBakerUT How are you?
Good! I'm looking around for inspiration on personal portfolios
When I find one I like, I sketch it out on paper. Then I'll pick my favs and try to code it into reality
@AaronBakerUT Sounds like a good plan. There are a lot of creative campers in this group. You should be able to find something you like that you can bring your personal touch to.
I'm open to viewing portfolios if anyone would like to share!
I'm having an image host issue, but my page is here: https://codepen.io/KoniKodes/pen/ZWqJNv
@AaronBakerUT Cool to see a fellow austinite on here, Aaron! I can't help you much with the design stuff, I couldn't design myself out of a plastic bag lol
haha! I love the design side of things. That's what keeps me going.
@AaronBakerUT check mine !!
@KoniKodes loving the introduction paragraphs! I'm inspired. "great friends and the right tools" <3 cries a little bit
@AaronBakerUT Thank you. It's what I like about this group - like my coding ohana.
konikodes sends brownie points to @aaronbakerut :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @aaronbakerut |http://www.freecodecamp.com/aaronbakerut
I'm off to learn my algorithms. Good night.
@lpy1994 very sleek and simple. I'm diggin it
Night @KoniKodes !
@AaronBakerUT I am still learning js and jquery. so I didn’t much on js part tho
@AaronBakerUT but thank you
lpy1994 sends brownie points to @aaronbakerut :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @aaronbakerut |http://www.freecodecamp.com/aaronbakerut
How do I send brownie points back lol
just “thanks” + @username
anything that i need improve?
I still can't get this to work right...I don't know what I am doing wrong. When I click "new quote" it gives me the same quote only below the original one...
thanks + @lpy1994
aaronbakerut sends brownie points to @lpy1994 :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @lpy1994 |http://www.freecodecamp.com/lpy1994
well @lpy1994 the projects are a little vague. are they just placeholders for now?
oh, those pics is sort of placeholders
if I have any project, then I’ll change it
word I gotcha
any project ideas brewing?
I am learning js, now I thinking try to make more functioning website by use js , animate css and jQuery
just feel like they are so much to learn. I can’t think of any project without these knowledges
can someone have a look at my project. I am getting an error on the ajax call link http://codepen.io/akshay_nayak/pen/JKvbwV?editors=1111
This message was deleted
Guys don't you know any implementation of swipe to close event on js?
@lpy1994 something that helped me to learn JS a bit: make buttons that hide/show content-boxes below
like.....lemme see if i can find an example
idk they have it super simply written with like 3 lines of jQuery but it can be a good exercise to just dive into and see if you can get it working with pure JS
event handlers on the buttons
oh, forget to mention, I am also learning coding in codecademy
I know a little bit of jquery and angujar. I am try to copy the example in that personally portfolio challenge.
Because i can't understand his code, that's why I am thinking I need to learn more
Got it to work! Now I need to know how to move my footer to the bottom of the page and make it sticky. Can anyone help?
My footer is inside the quote box and I want it to be at the bottom of the page
@twhite96 first, close your quote-box div. then give footer position: absolute and bottom: 0
anyone willing to talk 1 on 1 and help. ?
on my twitch project. I am having trouble with my JSON call.
http://codepen.io/MikeBeers/pen/PzmpgV?editors=0002
I am displaying my call back to the console. I have one account that should come back with an error but it will not display. If I add "callback=?" to JSON call the account with the error will now show in the console. But then the images for my logos will not display and the status of the account will not display. What is going on with the "callback=?"
Line 13 in my codepen.
@MikeBeers seems to be an async issue
@dhcodes Thanks. someone just helped me with this. But I did not really understand what this code did. Could you look at this pen again then checkout the new line on LINE 59. can you try and explain what is going on?
mikebeers sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1241 | @dhcodes |http://www.freecodecamp.com/dhcodes
@MikeBeers the way I made mine work was to put the second JSON call inside the first and put it all within a loop through the users
)uw
I am missing some brackets or something in my code as I keep getting an error that I am not sure of what it means
Am I on the right track? Appending Variables to Strings javascrip
how to remove the white border at the bottom of my navbar?
@mremotoo you should paste the pen that gives us access to your code
@twhite96 your code?
@mremotoo try removing the shadow class from the navbar
@Manish-Giri I got it figured out but when I share the quote to Twitter I get <p> tags when I don't want them
Can you take a look?
@twhite96 okay, if you have a pen, post it here
I have been working on this for weeks and will not sleep until I get this final bit figured out
@twhite96 is your quote appearing properly?
Yes. When you click on Get Quote it shows up
Ohhhh
I see now
Try it again @Manish-Giri
I had a + in a function
@mremotoo remove the shadow class from navbar
@twhite96 yeah, I removed that
+. One moment.
Okay
@twhite96 the problem is because your API returns the quotes wrapped in those
p tags itself. Trying to find a way to trim that.
Okay, thanks @Manish-Giri
twhite96 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 1498 | @manish-giri |http://www.freecodecamp.com/manish-giri
@twhite96 here, try this
success: function(data) {
var post = data.shift(); // The data is an array of posts. Grab the first one.
var quoteContent = $(post.content);
console.log(quoteContent);
$('p').html(post.content);
$('#tweet-quote').click(function(e) {
//We tell our browser not to follow that link
e.preventDefault();
//We get the URL of the link
window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + quoteContent.text());
});
@twhite96 make it like this:
window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + $(post.content).text());
@twhite96 did you catch what i said earlier about bottom-aligning the footer?
if i restrict body height to browser height and make overflow hidden, the container inside (that overflows and is a flex container) never gets a scrollable view, even if i put overflow of that container to auto or scroll - http://codepen.io/shub1427/pen/NAYykX
@twhite96 you could try
var temp = post.content;
temp = temp.replace(/<p>/g, "");
@qualitymanifest yes. I didn't use it because I wasn't sure if I needed to or not.
Thanks @sorinr! That totally works
twhite96 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 528 | @sorinr |http://www.freecodecamp.com/sorinr
@twhite96 it does look fine below the div vs. being at the bottom of the page
@Shub1427 try removing
overflow: hidden;
from the css of body
@twhite96 welcome. I haven't seen that @Manish-Giri suggested same thing. :)
i did that, and it works but than overflow has no meaning, i.e, putting overflow hidden inside the container also shows the container scrollable, which i don't want.
I want to have a scrollbar inside container div not on body
@GregatGit
I want to create an effect like Bootstrap modals, using flexbox @GregatGit
@Shub1427
.wrapper{
margin: 0px 10px;
}
.container {
max-height: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow-y: auto;
}
i only added margin to .wrapper so you could see that the scrollbar belongs to .container
thanx @qualitymanifest
shub1427 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1292 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
np
I am able to retrieve results for auto-completion but jquery isnt displaying it properly
can someone tell me how I can correct this
@akshaynayak what do u mean jq isnt displaying it properly ?
when I type in a word autocomplete options are being shown but the background is transparent and not white as I would like
@akshaynayak i've seen that effect. its quite strange
@akshaynayak you are using jquery ui right?Did you include jqueryui-smoothness.css
That must be the problem pls do say if that didnt fix it
hey mathew i added smoothness that didnt work though
i was wondering if you knew how to handle the response being returned from the .autocomplete function
Guy, why are the addition and subtraction buttons not working properly?
@akshaynayak Maybe this code will help
$(document).on('keydown.autocomplete', selector, function() {
$(this).autocomplete({
source: function(request, response) {
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
});
});
hi, I was working on Random Quote generator everything is fine but link to share on twitter is not working!!!
pls help
this is my pen
@hbnker31 Try adding target="_blank"
to your <a href=""></a> element
it is already there
it gives me a black page
Works for me @hbnker31 .
any other issue that can cause this problem
Try the link I posted and try to tweet from there @hbnker31 .
Maybe it is a codepen issue.
yeah it's working
i was trying it in editorial mode
thanks @Harry97 @brainyfarm
hbnker31 sends brownie points to @harry97 and @brainyfarm :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
:cookie: 65 | @brainyfarm |http://www.freecodecamp.com/brainyfarm
@hbnker31
Verify your codepen email address so you can use the full mode.
http://codepen.io/hbnker31/full/akYEVV
Verify your codepen email address so you can use the full mode.
http://codepen.io/hbnker31/full/akYEVV
@Harry97 you have same class for both session and break so when you use $(".button").click(function() will get only the last element defined that has .button class
@sorinr I've added an if function to distinguish between the addition button and subtraction one
and I used "this" in order to modify the number that's closest to the button clicked
@Harry97 yes but you have "+" for both session and break
@sorinr Well, how do I fix it then?
@Harry97 are you in a hurry? i will fork your pen and make some changes to show you but i have to finish something now
@sorinr lol no, absolutely not I'm not in a hurry at all. I
@Harry97 ok. forked it. and i will look at it later
@sorinr Thanks a lot!
harry97 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @sorinr |http://www.freecodecamp.com/sorinr
I am trying to use custom fonts from tympanus.net in codepen, the link is perfect(i have checked) but still the code isn't working - http://codepen.io/shub1427/pen/oLdkxZ
@font-face {
font-family: 'camera-icons-local';
src: url("https://tympanus.net/Development/ImageGridEffects/fonts/camera-icons/camera-icons.ttf");
font-weight: normal;
font-style: normal;
}
@hbnker31
You have
You have
target"_blank" as an attribute in your a element instead of target="_blank"
can anyone help me with wikipedia viewer?
yes ?
anyone here
Hi, I am having problem with Foundation Sites V6.2 SCSS file. I want to include an external color palette file. should I import this at the top in app.scss or in _settings.scss file? I intend to use the custom color palette in both app.scss and _settings.scss file to override the default colors. Thanks in advance
how can i get text from my text box in js
StackOverflow articles may have given hints on how to go about with the SEARCH part of the Wikipedia Viewer project. Now, I'm stuck and confused on how to get and display the search results to the html page. Any ideas?
@MohammadHasham $('texarea').val()
I'm trying to align a row of text above a row of icons, but it isn't working out very well
Bootstrap classes don't affect icons
And adding percentages isn't working
Not really sure how to fix it
@CrumrineCoder can u post the pen link?
It's near the bottom at forecasticons and names
Namely, referring to "Mon / Tues / Wed/" etc. and the icons below them
@CrumrineCoder why not making div class row the #names and another row the #forecast-icons and each name or icon div class="col-md-2" ?
I tried that, but it doesn't affect the icons
@CrumrineCoder you can do this way:
#names, #forecast-icons{
display: flex;
flex-direction: row;
justify-content: center;
}
Oh flex, didn't think of that
I should probably learn all of those things of flexbox, display: **, etc.
Aw wait hangon, the icons are all bunched up, I'll try and fix it
how can i show the titles of articles instead of getting the whole bunch! i am at wikipedia viewer and here is my pen:
http://codepen.io/Mohammad_Hasham/pen/EyLPmW
http://codepen.io/Mohammad_Hasham/pen/EyLPmW
I'm going to ask on stackexchange @sorinr
@sorinr Thanks
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @sorinr |http://www.freecodecamp.com/sorinr
@sorinr
Hello guys
how do I make an image a dropdown such that to see the dropdown, one has to click the image
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-limanAbba-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LimanAbba</a>
</div>
<div class="collapse navbar-collapse" id="bs-limanAbba-navbar-collapse-1">
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">Freelance</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>\
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span><ul class="dropdown-menu">
<li><a href="#">Liman</a></li>
<li><a href="#">Code90</a></li>
<li><a href="#">Coding</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="container">
</div></div></div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
@limanCode this might help http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Hello guys
when I insert an image the image must open on modal for cropping ....
hey guys how to make the hamburger icon dropdown menu on collapse?
one more issue...the order of scripts in JS editor of codepen get changed everytime when I switch between editor view to detail view back n forth
@Prince-Singh - make sure you save before you switch (if you haven't tried it) they might just reload the page? Not 100% sure... I haven't seen this problem.
yup that's the first thing came in my mind too but its not working after that too.
A friend of mine gave me this task. To extract the website from this.
77923B4D0R3B&url=httpwww.oldscpa.com
8009285G5S821H&url=httpwww.yachats.org
11224640Q0N6C34&url=httpwww.funstasticshows.comGuide me how to do this? I want the part like `www.oldscpa.com' from each line. Should I use regex or what?
I know its a bit irrelevant here.
Ignore if you don't want to help.
@faisal1337 maybe you could split on '='?
@faisal1337 I am not good at regex, but maybe this could work:
/w{3}\..+/
@faisal1337 test it here: https://regex101.com/
copy your text there, and test
Aye. Lemme try
hello
@kirbyedy the expression should be added like this?
yes
But it only extracts the first url
And I have a bunch of other same urls in next lines
regex would still work?
just change which regex method you use
I'ma comeback
.match is probably what you want, but I'd have to confirm
@faisal1337
"77923B4D0R3B&url=httpwww.oldscpa.com".match(/.*http(.*)/)[1]
"www.oldscpa.com"
@sjames1958gm thanks. It does work. Now can you guide me how can I automate this process on atext file.
faisal1337 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2115 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Because I haven't done anything like this before.
On a text file may be difficult....I'm not aware of a way of doing it via pure, client-side js. With a server you could do it pretty easily. Someone else may know a client-side solution.
Or I could just paste the data somewhere online with the expression @sjames1958gm gave
Correct, that would be much easier, I think
Yeah. Waiting for answers. :D
@faisal1337 string split by "="
@sorinr That one was answered, he's looking for a way of entering a text document into the browser and manipulating it from there
Yesp :)
Once you get the text file into your DOM, it should be easy from there using jquery, etc.
I dont want to use this method. It seems complicated to me.
@Rom2711 haven't read all previous posts :)
I think you're right, but I doubt there's an easier way of getting your file into the DOM. Anyways, good luck finding a solution!
One of the responses to that post might work, one of them mentions using an AJAX request
using ajax to open the file
One of them sums it up I think: "There is no standard way in Javascript to manipulate local files, like you said it's for security reason. "
@faisal1337 jsbin? Or you could use the browser api to load a browser local file and process.
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/File
@sjames1958gm Apparently a lot of browsers currently block the file protocol
var str = "11480668G3O923B&url=httpwww.feynmangroup.com103946E3L9H729C&url=httpwwvchamber.com74940N0F257N&url=httpwww.oregonsports.org10590634N4P2B4P&url=httpwww.kaiserpermanente.org%2f77923B4D0R3B&url=httpwww.oldscpa.com8009285G5S821H&url=httpwww.yachats.org11224640Q0N6C34&url=httpwww.funstasticshows.com";
var arr = [];
arr = str.split("=http");
arr[1] = arr[1].split("0-9+");
console.log(arr[1]);
I will paste the file in parts in the str variable
If I could only make the algorithm.
@Rom2711 For upload? Most would allow upload
@sjames1958gm unclear from what I've found. I'm intrigued.
@faisal1337 why not use a $.get('textfile', function(data){} and do whatever you want with data ?
@sorinr I could paste the data in parts in the str variable
I just need to make the algorithm
@faisal1337 then look how you can interpret line by line an input type texarea for example
That's what I am working on. :/
@faisal1337 <input type="file"></input>
@faisal1337 var lines = $('textarea').val().split('\n'); then iterate lines and split string by "="
@sjames1958gm ok lemme try your way
@sjames1958gm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="file" id="input">
</body>
</html>var lines = $('#input')[0].files[0].val().split('\n');
console.log(lines);
And the console shows the error
Uncaught reference error $ is not defined
what's that?
@faisal1337 Yes, you will have to research how to handle the events on this element.
load jQuery when $ is not defined
load jQuery when $ is not defined
@sjames1958gm I'm not sure what you mean by that?
there's some special ajax or something?
@faisal1337 add script tag with the jquery url
@faisal1337 add jquery lib for $ to work
@sjames1958gm but I'm using jsbin
oh shit
I understand now
check
I've addedjquery
and how should it work?
@faisal1337 move the var from css to js part
@faisal1337 these may be helpful: :sparkles:
Da hell is wrong with me. Everything is going wrong. My phone bricked. Nothing's working. Frustrated.
pen.js:8 Uncaught TypeError: Cannot read property 'val' of undefined
Now this :/
@ndburrus got it fixed :o
Can anyone give me some pointers on how to solve the "No repeats Please" permutations challege?
I simply can't think of any permutation or combination formula that would do the task
@faisal1337 choose a text file and then look.
Did that.
Couple of times.
@faisal1337 the input type file lets you chose a file from your computer but not reads its contents
@sorinr to read it I would have to use some JS function?
This message was deleted
@faisal1337 here is an working version using textarea: http://codepen.io/sorinr/pen/GqdEPy
@sorinr well dayum.
@sorinr thanks man.
faisal1337 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @sorinr |http://www.freecodecamp.com/sorinr
:clap:
Now let me tweak it to add the output in a string.
@faisal1337 thats ur job to do whatever you want with it :)
Yeah man thanks again
@faisal1337 welcome
is there any other way of re writting the json object apart from append because that is a bit slow?
@MohammadHasham what do you mean by "re writting the json object" ?
i mean to append it as i am using a loop to iterate you can check here
http://codepen.io/Mohammad_Hasham/pen/EyLPmW?editors=1010
http://codepen.io/Mohammad_Hasham/pen/EyLPmW?editors=1010
@sorinr
@MohammadHasham first get rid of <form> and </form> tags unless you want to e.preventDefault(); in your js. because when you press enter into the input field will try to submit the form
@sorinr okay i'll remove that
done removing them
@sorinr but why does the append method takes a long while to load things up!
@MohammadHasham take a look here: http://codepen.io/sorinr/pen/vKjJYW
@sorinr what changes do u make
made*
@MohammadHasham first i have introduced this: $("#parag").html('');
why was this mandatory?
@MohammadHasham then added }).setTimeout(50); to give some time to the $.get between keyups
you are a genius man!
was adding $("#parag").html(''); mandatory!
@MohammadHasham yes. to clear up your previous search. when y press "l" will go search for l and append. when you have "la" will go for "la" and append again without clearing the first "l" serach
@sorinr okay Thanks! alot.
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 533 | @sorinr |http://www.freecodecamp.com/sorinr
@MohammadHasham welcome
Hey everybody. Just finished the front end cert with this Simon game. Any feedback on the game very much welcome. Thanks. http://codepen.io/jer244/pen/jAxwjJ
hello everyoneee... I just want to know how to make an webpage static
I made a simple mistake how can I fix?
seems like I did everything right just like the example said.
i am making my PORTFOLIO ..
never mind I figutred it out.
is anyone here , who could Guide me ???
@Rao-Sumeet what you wanna know :)
?
i just asking for the tips to make a portfolio static .... i have made it into 2 parts in which first part is static and second one will be chnage by others ( companies ) .
you creat a webpage, normally you learned it before portfolio page
for to make first part static , what should i do ?? so that the Whole page could not load .
you can hide other parts
it canot be done using css3 , html !!
how to hide ?
yes with css 1 :)
display: none
okk.. i m going to check
and dont laugh at me ..
i don'tt laugh i smile
Does anyone know where to start with the scrolling nav of the portfolio page? I'm all done except for the scroll.
if you have made an portfolio
how do I link my bootsrap buttons to a section within the same page?
@wsweet it's bootstrap js plugin
than go for bootstrap
@AlexanderDom is right
@mremotoo you need
<a href="#idoftarget"> with id of your target
what if I'm using buttons?
is important <a href="#test">I go to find test</a> <div id="test"></div>
oups
sorry for big letters
@AlexanderDom <buttons></buttons>
impossible @mremotoo you can apply button styles to links <a> too
@AlexanderDom sad, I'm using bootstrap buttons...
here it is,
@mremotoo listen what i say , you can apply style of bootstrap buttons on links
ok gonna see
@AlexanderDom so I could just replace the buttons with <a>?
<a href="" class="btn navbar-btn btn-default abelFont">About</a> yes sir :)
and i didn't laugh at you ><
@AlexanderDom Thanks mate, will try that one
mremotoo sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@mremotoo you're welcome
@AlexanderDom it worked man
:clap: @mremotoo yes
@AlexanderDom another question though, how do I make it gracefully scroll not instantly scroll to the element
@mremotoo like said before it's a js plugin, forgot exact name but there plenty
i know it's hard i try to find some easy to "digest" exemple
how do i add a href link in javascript?
@MohammadHasham jquery or not jquery?
jquery
sir its jquery actually
@mremotoo look here
$("selector").attr("href", "value"); I think
@mremotoo so read this (you don't need init part) if you have questions
@AlexanderDom brother , can u please open the link
than u will get understand what i actually want
i dont want to repeat the code around 6 times for thw upper part
the*
i just want to make my upper part static and it seems like your {Display: none } cant work !!!
???
@Rao-Sumeet i'm back, gonna see that
@Rao-Sumeet sorry but i don't understand what exactly you want
six times repeat what, which part of page ?
there are six buttons
yes
according to there name , i want to assign them there webpages
show me your portfolio where you're now so i see where you blocking
you want to make six links to 6 pages ?
yess
beacuase i have no other option than that
How do you link an image element on CodePen? I tried inserting the target="_blank" but it is not working.
ok
@adblock31
<img src="urltoyourimage" alt="" >
@Rao-Sumeet did you have your page on codepen ?
THanks Alexander. That's actually my name too! But I think I need to rephrase my question. My page is on codepen, I have a picture already visible on the page. I want to embed a link on the image to direct the user to a new page.
see... in that portfolio which i sent you , the photo & name part remains same , it is independent of the button-group . soo.. how he do that ?
no but i am user of github
how can i make boxes when a search is performed i have used a well class in html but it is not making seperate boxes can anyone help me? i want to have my boxes like this
https://codepen.io/FreeCodeCamp/full/wGqEga/
https://codepen.io/FreeCodeCamp/full/wGqEga/
@adblock31
<a href=""><img ... ></a>
@Rao-Sumeet for mobile screen ?
@AlexanderDom I have : <a href="url" target="_blank">
<img class="class"<img src="url" alt=""/></a>
<img class="class"<img src="url" alt=""/></a>
@codepen gives 404 error
@adblock31 it's <a href="url" target="_blank">
<img class="class" src="url" alt=""/></a>
<img class="class" src="url" alt=""/></a>
hello everyone!!! i am on the wikipedia viewer.. so far i am able to bring in the object but i can't get the entire object. everything but "from" and "to" are showing up
Hello everyone!
I'm still stuck in the Wikipedia Viewer project.
I still can't figure out what API they used in the example project.
I don't want to "cheat" by checking its source code.
I've tried several combinations for the API query but I am not getting the same search results as what is shown in the example project.
I've checked StackOverflow already.
I've also tried action=opensearch and also getting a different search result.
Any ideas how to go about this? Thanks!
I'm still stuck in the Wikipedia Viewer project.
I still can't figure out what API they used in the example project.
I don't want to "cheat" by checking its source code.
I've tried several combinations for the API query but I am not getting the same search results as what is shown in the example project.
I've checked StackOverflow already.
I've also tried action=opensearch and also getting a different search result.
Any ideas how to go about this? Thanks!
@adblock31 look you have two <img
how did u send screenshot @AlexanderDom ?
i can show u by that only
@Rao-Sumeet you press print screen if you're on windows, or you drag and drop your image here
@lleander i founded they api doc is far from being easy to understand
/home/sumit/Desktop/Screenshot from 2016-07-25 00:28:57.png
/home/sumit/Desktop/Screenshot from 2016-07-25 00:29:19.png
/home/sumit/Desktop/Screenshot from 2016-07-25 00:29:19.png
i hope u will get this time ?
got it! thanks! @AlexanderDom
adblock31 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
sorry it meant *aren't
@Rao-Sumeet OK ! so easyiest (otherwise you need other language.. long story) you like you said must repeat six time samed thing :(
can anyone help me at wikipedia vewer
@AlexanderDom what i have to do now ?
@Rao-Sumeet so i try to explain fast, you need to use some language where you can create one page/template where you gonna change inside, php, js with AngularJs or many others but you must copy paste this "header" on each page sadly
@lleander i used var api="https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&titles="+$input+"&prop=revisions&rvprop=content&format=json";
where $input is a variable that holds $(input[type"search"]).val(). that way the api has to search on whatever it is given. though. i am having trouble with my own wiki so take it as you will
@MohammadHasham i can try
@Rao-Sumeet in pure html, you need to copy pase
how can i make boxes when a search is performed i have used a well class in html but it is not making seperate boxes can anyone help me? i want to have my boxes like this
https://codepen.io/FreeCodeCamp/full/wGqEga/
https://codepen.io/FreeCodeCamp/full/wGqEga/
@AlexanderDom
@mpettaw2 , actually my problem is that my search results are different from what I am getting when I tried to search the same word in the example project.
i have learned php too
but i dont know how to set-up php setup !!
hmmmm....and nothing has changed with wiki since the example project was made?
imma test it out.
@Rao-Sumeet you need wamp or something like this to start a server (like i said a very long story) then you can include a separate part of page with php include method http://php.net/manual/fr/function.include.php
ok
really @Rao-Sumeet just copy and paste
it is different. i typed sam in the example project, then took the api url and pasted it into the browser and changed to title="sam" the results were different.
@lleander i used opeansearch
@mpettaw2 what I want to accomplish is to be able to figure out what the example project uses for its wikipedia api. But, I don't want to cheat by looking at its source code.
@MohammadHasham can you link your codepen page ?
@AlexanderDom if u can help me on how to do setup of php ??
sorry i typed that without reading first
@Rao-Sumeet it's not my domain where i know well or practice everyday sorry
okk.. @AlexanderDom thanks to uu
rao-sumeet sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@MohammadHasham everything it's in one paragraph
@mpettaw2 @AlexanderDom it says in the instructions,
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/.
And that is what I was trying to do. To be able to somehow replicate its search functionality. Thanks for your inputs btw. :smile:
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/.
And that is what I was trying to do. To be able to somehow replicate its search functionality. Thanks for your inputs btw. :smile:
lleander sends brownie points to @mpettaw2 and @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @mpettaw2 |http://www.freecodecamp.com/mpettaw2
:cookie: 324 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@MohammadHasham first of all you bettre use and div because in paragraph you can only put text or inline elements like links images...
where should I go from here?
okay now i am using div tags instead of <p> tags @AlexanderDom
$("body").append("<div class='well'>"+data[1][i] + "</div><div class='well'>"+ data[2][i] + "</div><div class='well'>" +data[3][i] + "</div>");
so put your id in selector or
```$("#parag").append("<pclass='well'>"+data[1][i] + "</p><pclass='well'>"+ data[2][i] + "</p><p class='well'>" +data[3][i] + "</p>");
<p class sorry
@codingisfun11 you already have your variable
@lleander no problem i was reading the api tutorial. it looks like you would have to customize the api to load info a certain way. the doc was hard to read so i am not sure if that is correct but you have the three categories multiple titles, multiple modules, and generators.
what you need to do is acces a child of an Array, myArray = [1,2,3]; myArray[2] is 3 just in your case it's multiple Array so multiple [] brackets
i found this stuff on
@mpettaw2 yes very hard
@AlexanderDom im glad i am not the only one
@lleander but without looking at the example source code i couldn't tell you how he did it sorry
@lleander The API Sandbox lets you play around with different URL parameters to get the results you need: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm
@AlexanderDom Thanks
mohammadhasham sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
you helped me really!
oh and i still need help with the loaded json pretty pls
@MohammadHasham you're welcome :)
@mpettaw2 @AlexanderDom yes the wikipedia api documentation is difficult to grasp. :smile:
Maybe I'll just use a different approach so I can move on.
I hope it's ok with FCC if I am not able to replicate the search functionality of the example project.
Maybe I'll just use a different approach so I can move on.
I hope it's ok with FCC if I am not able to replicate the search functionality of the example project.
@lleander actually thats the most difficult thing' because you always have to generate the query from sandbox
you should see the video for basic understanding!
@TylerMoeller I have spent a number of hours/days doing trial and error with the API sandbox. Thanks anyway. :smile:
lleander sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@lleander sorry but there other harder as hell parts :) (for me, who knows perhaps you gonna pass it in a sec :p)
i'm on Steamroller js exercice ><
@AlexanderDom just a last thing that how can i make the href in js
@MohammadHasham change an href of an element ? or i imagine you want to wrap you text in a link ? :)
anyone....available...? :(
@mpettaw2 after @MohammadHasham ;)
@lleander It's reasonable to spend a few hours getting familiar with the query parameters to get the search results you want. At a certain point, it will all start to make sense :) Good luck!
i want to wrap any stuff so that for example if i click any word in the description it redirects me to the link
@AlexanderDom
@AlexanderDom , ok
@MohammadHasham find in your data result link then use it
$("#parag").append("<p class='well'><a href="+dataOfLink+">"+ your text
don't forget to close your link
@mpettaw2 what's going on ?
the json output only has values for from and to properties
everything else is blank. and i don't know why
@mpettaw2 There is a pages object, but it only has one entry
@TylerMoeller thanks. this project is exciting and frustrating at the same time. :laughing:
lleander sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: lleander already gave tylermoeller points
@sjames1958gm go to the api url and put "sam" as the title it comes up with a lot of stuff i am not sure if searching "sam" would have mulitple pages or not but it should be more data in the json object
sorry *when i
@mpettaw2 If you use the devtools console not the codepen console you will see the json object displayed and you can click on the triangle and navigate through the object.
ok. i see
thank you
i am going to take a moment to rest my exploding brain. see you guys next time
@mpettaw2 yes pauses are important
@AlexanderDom Thanks once again!
mohammadhasham sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave alexanderdom points
today i learnt a new thing actually
@MohammadHasham you're welcome again :)
@sjames1958gm wanna pair help me on steamroller ? ><
Hey I'm having trouble doing the random quotes website https://codepen.io/JacobStewart1/pen/AXVkGk i cant get the quote to come up could someone help me
@JacobStewart1 you forgot to add jquery
you can do it in quick-add option of js option of codepen
ok thanks @AlexanderDom
jacobstewart1 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
i saw that from browser console
@JacobStewart1
$(".myButton").click(function() {
clickedQuote();
});
@JacobStewart1 where are u stuck at?
you can do
$(".myButton").click(clickedQuote);
@MohammadHasham i cant get my quote to come out
@AlexanderDom ok
I need Help with the design of my twitch App
@JacobStewart1 you forgto to add you class to your button myButton
your function is never called
oh ok thanks @AlexanderDom
jacobstewart1 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: jacobstewart1 already gave alexanderdom points
@JacobStewart1 put console.log("it was called"); in your functions at start so your now in your console when your function is called
just and advice :)
so where should i put that? @AlexanderDom
@ParagonChuy what's going on ?
@JacobStewart1 there are many mistakes
you have to use an id for event handler
I want to make the application the way I posted up there, but I can't seem to find a way to make it responsive
that when a button is clicked something happens @JacobStewart1
@MohammadHasham there no problem with classes ;)
ya i have that in now @MohammadHasham
if you want same event for many elements
@AlexanderDom no but the id of the button wasnt given which is being clicked
@MohammadHasham yes he forgot his class at the begining
@JacobStewart1 your logic is good but just tweak some brackets
in the javascript part? @MohammadHasham
yes
and i guess that dont use script when u have predefined JS pane
for all that stuff
ok
@ParagonChuy you can slide it to left for mobiles or to top and make it like line => list online, then other line
I was thinking about making the twitch logo the menu button
@ParagonChuy http://codepen.io/AlexanderDom/pen/rLvGyG
hover over body, just an exemple
OMG
THATS GENIUS
:)
<3 haha
Please help
how to load json file from any website.
how to load json file from any website.
Like I legit was looking for a solution like that all day yesterday
@ParagonChuy , if you have questions on code ask
@Raj00786 show us your code plz
@AlexanderDom
Ajax code
$.ajax({
url:"http://my-homepage-link/json.json?jsoncallback=?",
type:"GET",
dataType:"jsonp",
beforeSend:function(){
console.log("before send");
},
success:function(data,status){
console.log("success");
}
});My json file in my homepage
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
},
{
"type": "mobile",
"number": "123 456-7890"
}
],
"children": [],
"spouse": null
}
@Raj00786 did you tried
url:"http://my-homepage-link/json.json?callback=''"
seems too much json there ;)
or more &callback=''
@AlexanderDom http://codepen.io/ParagonChuy/full/YWLyxN/ Thanks man
paragonchuy sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
hey is anyone familiar with google design lite (MDL) ?
@ParagonChuy you forgot opacity in
transition:opacity 0.3s ease-in; ;)
whoa
really having trouble with setting up a fixed navbar like i want to in MDL
@bomholt a little bit gonna see
so you know the fixed drawer + fixed navbar layout?
if i use this layout everything works fine but the scrollbar starts under the navbar
not at the top of the page
i dont like that
if i try to set up a fixed position div myself it overlaps the scrollbar
as soon position is fixed a width 100% div will overlap
or is there a way to have a full page scrollbar with the fixed header of MDL?
can you paste your screen print plz because i dont see your problem on codepen
@AlexanderDom can you see it now?
i messed up and was playing with the code
but now you should see the overlapping
yes
so
and thats the other demo
basically i like the MDL navbar but i hate that the scrollbar doesnt go all the height
if hove you understand my problem... its really hot at my place and my brain starts loosing capability
you can margin-top on mdl-layout__content
add
otherwise scroll bar comes from overflow-y:auto of mdl-layout__content
in which example
so i need to change overflow-y to scroll so the whole page has a scrollbar?
wait wait
im so confused :D brb getting a fan and water... basically i want a full height scrollbar with a fixed header
the scrollbar should look like in case of a scrollable header but the header should behave like a fixed one ^^
put <div class="he">d</div> before just up from
<main class="mdl-layout__content">
<div class="he">d</div><main class="mdl-layout__content">
http://codepen.io/Mohammad_Hasham/pen/EyLPmW?editors=1100
why me search bar is not centering really tried everything please help!
why me search bar is not centering really tried everything please help!
@AlexanderDom thanks thanks thanks
bomholt sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
i made this div to test and put i nearly everywhere :D
now i can progress but first i should take a cold shower... flipping heat
thanks so much dude
:) @bomholt you're welcome
good shower :)
i gonna leave too
good coding everybody
have a nice one cu
how can i make the three elements at the center of the page
http://codepen.io/Mohammad_Hasham/full/EyLPmW/
http://codepen.io/Mohammad_Hasham/full/EyLPmW/
@MohammadHasham it's already centered?
Okay!
actually my problem isnt fixed :(
anyone experienced with MDL?
OKay! I'm finished my Tribute Page about pizza! Lol what do you guys think? http://codepen.io/prisca/pen/BzxwXW
Here's the full page: http://codepen.io/prisca/full/BzxwXW/
https://codepen.io/bomholt/full/xOjXPy/ i am trying to achieve something like this but with a scrollbar of full page height ... also with a fixed header. anyone able to help?
Hi, I just finished my wikipedia viewer. My code works well on firefox, but the search part was not working on chrome or microsoft edge. Can anyone tell me why? Here is my code:
$(document).ready(function() {
$("#input1").keypress(function(event) {
console.log(event);
if (event.keyCode == 13) {
$(".title").removeClass("title");
$(".random").removeClass("random");
$.getJSON("https://www.crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=" + $("#input1").val(), function(json) {
var html = "";
json.query.search.forEach(function(val) {
$.getJSON("https://www.crossorigin.me/https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&&exsentences=1&titles=" + val.title, function(json) {
html += '<div style="text-align:left;" class="entry"><a href="https://en.wikipedia.org/?curid=' + Object.values(json.query.pages)[0].pageid + '" target="_blank">' + '<h4>' + Object.values(json.query.pages)[0].title + "</h4>" + Object.values(json.query.pages)[0].extract + "</a></div><br>";
$(".result1").html(html);
});
});
});
};
});
});
Here is my pen:
How can I know if a Font is Humanistic Serif, Traditional Serif, Modern Serif, Geometric or so on... ?
@designBuildShipSoftware
+ Object.values(json.query.pages)[0].pageid // there is no Object.value