@tesla809 you can, just add the following line to the top:
// jshint esversion:6
Hello anyone ever done a react component that pops up and remains set even if routes change? Or is this an impossibility?
I am talking about something resembling Flash Notifications.
I am talking about something resembling Flash Notifications.
Or more like Toast notifications on mobile. That appear and remain shown regardless of user input on the app. Only dissapearing after a time interval
@eliecerthoms if you want to do flash notification/modal type stuff, look into
createPortal
guys can I get a review on my answer to find the longest word challenge?
function findLongestWord(str) {
var x = 0;
var num;
var array = str.split(' ');
array.forEach(function(item, x){
var y = item.length;
if(y > x){
x = y;
num = x;
} });
console.log(num);
return num;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
function findLongestWord(str) {
var x = 0;
var num;
var array = str.split(' ');
array.forEach(function(item, x){
var y = item.length;
if(y > x){
x = y;
num = x;
}
});
console.log(num);
return num;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
@eweiss17 thanks! I had no idea how format it!
germangamboa95 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 600 | @eweiss17 |http://www.freecodecamp.org/eweiss17
Working on stylizing my tribute page in React Bootsrap. It works locally but oddly not on codepen. any thoughts? I've been looking at the stylesheets that's included on other projects and can't figure it out https://codepen.io/JackHowaa/pen/XVVWVW/
I'm working on the Caesar's Cipher challenge on FCC. I'm really stuck... again...
function rot13(str) { // LBH QVQ VG!
str = str.toUpperCase();
var output = [];
for (i = 0; i < str.length; i++){
if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
output.push(str.charCodeAt(i));
} else {
output.push(str.charAt(i));
}
}
var outputString = "";
var changedCodeTemp = 0;
// this for loop will actually adjust the characters 13 spaces
for (j = 0; j < output.length; j++){
if (output[j] >= 65 && output[j] <= 90) {
if (output[j] >= 78){
changedCodeTemp = output[j] + 13;
changedCodeTemp = 65 + (changedCodeTemp - 90);
} else {
changedCodeTemp = output[j] + 13;
}
output[j] = String.fromCharCode(changedCodeTemp);
}
}
return output.join("");
}I believe the fault could be in line 23 but when I think through it, it makes sense. It's supposed to go back to the beginning of the 65-90 range and continue if it exceeds a value of 90
line 23 is this btw
changedCodeTemp = 65 + (changedCodeTemp - 90);
@JackHowa Check the developer tools javascript console in your browser. You'll see this message:
Uncaught ReferenceError: ReactBoostrap is not defined
at pen.js:16
unfortunately, the line numbers never seem to be right when using codepen, but it can help you track down the problem.
@eweiss17 in
if(y > x){
x = y;
num = x;
}What is the purpose of x = y;?
Also, it would be better to have more declarative variable names
@toianw oh brilliant thank you. of course dev tools would work; hadn't thought the obvious
jackhowa sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 506 | @toianw |http://www.freecodecamp.org/toianw
instead of
num, maybe longest. Instead of x maybe i which is often short for index. y could become currentLength
@JackHowa no problem, I think you'll find a couple of other problems after you correct those typos, but the console should help you figure them out.
@germangamboa95 Lastly, a more advanced solution:
function findLongestWord(str) {
return Math.max(...str.split(' ').map(word => word.length));
}jackhowa sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
api offline
so I'm on code pen building a tribute page and I'm using jquery for animations but on my page it brings this up //# sourceURL=pen.js what do I do to get rid of this or am I just doing something wrong
@kbaig thanks! ah I got a bit lazy with the var names. I keep forgetting there is libraries such as Math that I use thus I have a horrible habit coming up with weird stuff. and the y = x part was my way of sorting the max by compering the current value to the past value and checking it against the last value.
germangamboa95 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @kbaig |http://www.freecodecamp.org/kbaig
I'm working on the Caesar's Cipher challenge on FCC. I'm really stuck... again...
function rot13(str) { // LBH QVQ VG!
str = str.toUpperCase();
var output = [];
for (i = 0; i < str.length; i++){
if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
output.push(str.charCodeAt(i));
} else {
output.push(str.charAt(i));
}
}
var outputString = "";
var changedCodeTemp = 0;
// this for loop will actually adjust the characters 13 spaces
for (j = 0; j < output.length; j++){
if (output[j] >= 65 && output[j] <= 90) {
if (output[j] >= 78){
changedCodeTemp = output[j] + 13;
changedCodeTemp = 65 + (changedCodeTemp - 90);
} else {
changedCodeTemp = output[j] + 13;
}
output[j] = String.fromCharCode(changedCodeTemp);
}
}
return output.join("");
}I believe the fault could be in line 23 but when I think through it, it makes sense. It's supposed to go back to the beginning of the 65-90 range and continue if it exceeds a value of 90
function findLongestWord(str) {
return str.split(' ').reduce((a, b) => Math.max(a.length, b.length));
}
though I think the previous one I wrote would be more efficient...
it makes sense. I keep forgetting about spread syntax. I like having someone review my code since it gives me new tools to use. Since I'm just starting I only have a hammer thus everything is a nail lol @kbaig
If anyone was trying to help me above, I figured it out. I was supposed to be using the modulus operator
@DavidBelmares Can you explain what this part of your code should do?
if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
output.push(str.charCodeAt(i));
} else {
output.push(str.charAt(i));
}
can anyone help me with CORS cross origin issue? my request is getting blocked...while the same thing working perfectly on firefox only chrome presenting that issue
link your codepen
@SoumyoNawab8 i assume that you are creating your oun front and back end am i right?
I have this code. I need to set up event listener and pass the value to an other function
I type:
function init () {
const ini =
document.getElementByTagName("input").addEventListener("click", check);
}
<form>
<input type="text" name="number">
<button>Submit</button>
</form>
<input type="text" name="number">
<button>Submit</button>
</form>
any suggestion?
@JavierPons You wan't to use inputted text inside check function?
$("#result").text(myArray[i]);
this just outputs the last object in the array
how do I output everything in the array?
@JavierPons Try
function check(event){...use event.target.value for getting the clicked input value}
@Juke-Magic Append those elements to some variable inside the loop
result += myArray[i] and then after the loop $("#result").text(result);
good morning people, maybe someone can tell me what can be - when I have my jscript inside index file, everything works good, but if it's in other file (.js) i get unexpected token ; error
@sursider try to put on the top "use strict"; and lets see what happen. Or maybe you have given wrong pass. ../file. or ./file
@Masd925 do you suggest that the code inside init is wrong or lack of something?
juke-magic sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4641 | @masd925 |http://www.freecodecamp.org/masd925
@Masd925 (Im not very clever at ES5 I prefer much ES6.) But... what would you suggest to set up event listener and pass the value to an other function?
'let targetNumber = Math.floor(Math.random() * 10) + 1;
function init () {
const ini =
document.getElementByTagName("input").addEventListener("click", check);
}
function check (event) {
if ( event.target.value == targetNumber) {
showWin();
} else if(event.target.value !== targetNumber){
showError();
}
else if ( (event.target.value !== targetNumber) && (ini >5) ) {
showLoss();
}'
sorry I dont remember how to put the code well ;)
@JavierPons Im not sure about the formatting; however, the last condition will never be reached // else if ( (event.target.value !== targetNumber) && (ini >5)
it needs to be first
or above the event.target.value !== targetNumber condition, at least
because if that condition is met, the function exits there - so it will never check for the 2 conditions in the last else if
@Marianissimus thanks
javierpons sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @marianissimus |http://www.freecodecamp.org/marianissimus
why that doesn't work well but there is not any error en console.?
let targetNumber = Math.floor(Math.random() * 10) + 1;
function init () {
const ini =
document.getElementByTagName("input").addEventListener("click", check);
}
function check (event) {
if ( (event.target.value !== targetNumber) && (ini >5) ) {
showLoss();
} else if(event.target.value !== targetNumber){
showError();
}
else if ( event.target.value == targetNumber)
{
showWin();
}
function showWin () {
const dele= document.getElementByTag('form');
elem.parentNode.removeChild('dele');
return 'You win!';
}
function showError () {
const dele= document.getElementByTag('form');
elem.parentNode.removeChild('dele');
return 'You make a mistake!';
}
function showLoss () {
const dele= document.getElementByTag('form');
elem.parentNode.removeChild('dele');
return 'Game Over!';
}
init();
is the logarithm of first function init() wrongly typed?
comments are Wellcome :worried:
how does it not work well? @JavierPons can you make a pen? it could really help
@Marianissimus https://codepen.io/JavierP/pen/ypvOKo
so, first, add one after the function check }
@Marianissimus yes I added but... :worried: when I type some number doesn't does anythig
try to get rid of the get element by tag name selector (the spelling was wrong, too)
use getElementById, plus, as you try to get a value, a value
document.getElementById('id_name').value
sursider sends brownie points to @javierpons :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @javierpons |http://www.freecodecamp.org/javierpons
@Marianissimus no yet :worried:
the problem, I think, is that the code doesn't get the input (the number)
yes, you need to say: hey, when the form is submitted, get the value of the input and store it in a variable, say userinput
then do your comparisons
@JavierPons 1. :
<input type="text" name="number" id"input">---> <input type="text" name="number" id="input"> (you missed the = in the attribute. The input could not be found in the javascript because of this. 2.: When you put a button in a form, the submission will reload the page and thus stop your javascript execution (And remove all results from before) You can prevent this by either removing the form from the html or adding event.preventDefault() into the check function
@JavierPons And 3. you try to access
ini inside of the function check but ini is not defined in that context - because it was defined locally only in the function init
Also, the variable
ini is undefined even there, because you assign the return value of addEventListener to it - which is undefined (It has no return value)
If you want a global variable which refers to the input, you can at the beginning of your js add:
And later refer to its value by:
const input = document.getElementById("input");And later refer to its value by:
input.value
document.getElementByTag does not exist btw. Its document.getElementByTagName
@alpox I dont have clear where to add event.preventDefault()
inside check function
:worried:
@JavierPons What's this line suppose to do?
elem.parentNode.removeChild("dele");
FYI
input.value.addEventListener is just wrong, you want event listener on submit
can I develop my project in glitch and mention that url for getting fcc front end developer certificate
Hi everyone…. may you please help with my portfolio website.. I’m not happy with the way my hero image is loading https://ingundela.com/
there is a grey color before the images load, how can I fix this.. I’m tryed so many thing to optimize the hero image but still the grey color comes first for a few seconds before the image loads.. Thank in advance
@ingundela You can try preloading the images in memory before the dom is created. Not sure if it helps but you can try it.
@Masd925 How to I go about preloading the image in memory mate?
@ingundela A script like this on the head section (outside any load event callback) should cache the images before the dom is processed:
var images = [];
var sources = ["pic1.jpg","pic2.jpg"];
sources.forEach(function(source){
var img = new Image();
img.src = source;
images.push(img);
});ingundela sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4642 | @masd925 |http://www.freecodecamp.org/masd925
@Masd925 but should I add it to my index.html or js file?
@ingundela If the js file link is on the head section, you can put that at the start of the js file outside any load or ready callback
why does this always happen whenever I use boostrap 3 for making columns of different heights: https://codepen.io/anon/pen/zpRNLg
@Vigariuoluvi You could make a row with two columns and then another row with two columns etc.
@Masd925 it’s not quite solving it.. have upload the source code to my Github page https://ingundela.github.io/myportfolio/ .. are you able to help from here? there is this grey color appearing for a few second on a first page load
@ingundela The script is not on the head section, but on the end of body.
So adding it doesn't do anything. It might affect something on the head.
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2131 | @heroiczero |http://www.freecodecamp.org/heroiczero
Hi guys, I'm going through the ES6 beta curriculum and can't continue because I can't solve "Destructing Assignment".
Here is the example:
function getLength(str) {
"use strict";
// change code below this line
const length = 0; // change this
// change code above this line
return len; // you must assign length to len in line
}I don't even know where to begin
@ingundela As I said earlier, the script I posted needs to on the head section, not at the end of body.
This is what I should do:
Use destructuring to obtain the length of the input string str, and assign the length to len in line.
can anyone please tell my when i change the background using javascript dom manipulation then why isnt my css not applying to that tag?
like i did in body background where i change the background url using javascript queryselector but in css its background-repeat propety is not working?? why so
@Masd925 help
@Masd925 but it should look like this right ‘''<script>
var images = [];
var sources = ["b1.jpg","parallex.jpg"];
sources.forEach(function(source){
var img = new Image();
img.src = source;
images.push(img);
});
</script>’’'
var images = [];
var sources = ["b1.jpg","parallex.jpg"];
sources.forEach(function(source){
var img = new Image();
img.src = source;
images.push(img);
});
</script>’’'
@ingundela Yes, try putting that script element inside head element.
I don't require Width Scrolling bar
I even tried max-width:100%; but it didn't work
@Masd925 OK.. done it…. but see much of a change when loading….
@Masd925 are you able to try it from your end?
@sehban yes… @ingundela
Hi everyone…. may you please help with my portfolio website.. I’m not happy with the way my hero image is loading https://ingundela.com/
there is a grey color before the images load, how can I fix this.. I’m tryed so many thing to optimize the hero image but still the grey color comes first for a few seconds before the image loads.. Thank in advance
Hi everyone…. may you please help with my portfolio website.. I’m not happy with the way my hero image is loading https://ingundela.com/
there is a grey color before the images load, how can I fix this.. I’m tryed so many thing to optimize the hero image but still the grey color comes first for a few seconds before the image loads.. Thank in advance
ingundela sends brownie points to @sehban :sparkles: :thumbsup: :sparkles:
:cookie: 55 | @sehban |http://www.freecodecamp.org/sehban
@ingundela If you look at some commercial websites with pictures, there is always some loading time before the picture is rendered.
@JavierPons Doesn't matter where you put the
event.preventDefault() except it has to be in the outermost block of the function - not in an if or so. I'd put it in the beginning of the function or the end
@dhuber666 they want you to assign the constant
length the length property of str
To use destructuring to assign a constant with a property:
const obj = { fname: 'Kaz', lname: 'Baig' };
const { fname, lname } = obj;
console.log(fname + ' ' + lname); // 'Kaz Baig'
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var count=0;
$('#commentForm').submit(function(event) {
count++;
$('#countContainer').append('Total comments:'+ count);
$('#commentsContainer').append('<div style="background-color:green">'+$(newCommentText).val()+'</div>');
});
});
</script>
<style type="text/css">
#newCommentContainer {
/border-color: black;
border-style: solid;
border-width: 1px;
margin: 4% 24% 1% 24%;
padding: 1% 1% 1% 1%;
}
#commentsContainer {
border-color: black;
border-style: solid;
border-width: 1px;
margin: 0% 24% 1% 24%;
padding: 0% 1% 1% 1%;
}
#countContainer {
text-align: left;
}
#newCommentAuthor {
margin-bottom: 5px;
}
</style>
<title></title>
</head>
<body>
<div class="commentWidgetContainer">
<div id="newCommentContainer">
<form id="commentForm">
<input id="newCommentAuthor" type="text" name="name" placeholder="Name" autofocus><br>
<textarea id="newCommentText" rows="4" cols="50" name="comment-box" placeholder="Enter your comment here"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>
<div id="commentsContainer">
<div id="countContainer"></div>
</div>
</div>
</body>
</html>
I guess you mean it dissapears when you refresh your page
please run the code
the idea is to add the contents of the textarea to the newly appended div
its just .html file
perhaps this would get it working
$("#formid").submit(function (e) {
e.preventDefault();
it's on submission of a form. By default, when you submit a form, your page reloads. To prevent this, add this as the first line in the callback passed to the submit method you're calling
event.preventDefault();
event.preventDefault();
got this from the other chat
zlfnhmd sends brownie points to @mot01 and @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 216 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
I’m having a few issues trying to watch a folder.. would appreiciate any help!!!
im not very familiar but if you explain your problem better someone might have a suggestion
Sure - I’m trying to watch a folder, the server starts perfectly fine, however, it isn’t tracking any changes made to the files in the folder
@aftabparvez Are the html files in a subdirectory or in the root folder
i assume you can set what to watch - perhaps if you added a star
./* - to like watch all the files maybe
@aftabparvez https://browsersync.io/docs/command-line based on this, looks like the
files flag is to specify a directory, not files
or seems you could also do
--files="*.html"
@aftabparvez
@kbaig Unfortunately “—files=“*.html” is also not working
Nothing even if I remove the flag
I would have thought the original attempt works
Yeah.. I’m not sure what I’m doing wrong.. I’ve uninstalled and reinstalled browser-sync, restarted the system, used different text editors, used/removed —directory, —files and everything under the sun to see if this was going to start working. I’m giving up on this for today… Already spent over an hour trying to figure this thing out…
Thank you so much for your time though!!! Really appreciate it :-)
Thanks @kbaig @moT01
aftabparvez sends brownie points to @kbaig and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @kbaig |http://www.freecodecamp.org/kbaig
:cookie: 950 | @mot01 |http://www.freecodecamp.org/mot01
@moT01 I did try watching all the files with “”, “.” and “.html, .css, .js"
Nothing seems to be working :-(
actually previously it was working properly but now i dont know why it isnt changing the dom
and showing the temprature
could anyone please help my to identify the error
i tried so hard
to identify ,now need anyone help
then why dont for me?
previously it was working properly now what happened
I am seeing the temperature (hard to see with those colors)
Are you seeing any errors in the devtools console (not the codepen console)
Are you seeing any errors in the devtools console (not the codepen console)
why so
@1rjun have u disabled in your browser, or do u have something that is blocking your location? coz for me the pen its working
@sjames1958gm he will not get any errors in the console if he doesn't have a fallback else clause for
if (navigator.geolocation){.......
@sorinr If he is using the same browser then that if should not change - that is only testing the existence of the function not whether the location is blocked or not
@Otto-AA in response to the following message: that code is supposed to convert the current letter to unicode if it is an uppercase A-Z, otherwise push the actual character to the array. later on if it was an uppercase A-Z the program will change it accordingly
@sjames1958gm yes but if the browser asks you if you allow to disclose your location(and u block it by browser), the further code will not work otherwise in an else clause you call somekind of ip location api
hi,
- using the below example, I am trying to implement appDyanmics in my code.
https://github.com/derrekyoung/appd-sampleapp-angular2 - but for some reason its not going inside constructor code constructor(public appRoutes:Router) {
- I kept debugger and saw in the if statement still it didnt go inside.
- can you tell me how to fix it.
- providing my code below
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';
import { Base } from './components/base/base';
import { LoadingsWithOverlaps } from './components/Loading/Loadings-with-overlaps';
import { AiringFOXInfoPopup } from './components/Loading/airing-FOXinfo-popup';
import { Listings } from './components/listings/listings';
import { ScoringsMain } from './components/Scorings/ScoringsMain';
import { ScoringFOXTBA } from './components/Scorings/ScoringFOXTBA';
e';
const appRoutes: Routes = [
{
path: '',
redirectTo: 'jumping',
pathMatch: 'full'
},
{
path: 'FlyingManagement',
component: FlyingsHeader,
children: [
{ path: '', redirectTo: 'FlyingSearch', pathMatch: 'full' },
{ path: 'FlyingSearch', component: FlyingSearch },
{
path: 'FlyingMain/:id', component: FlyingMain,
children: [
{ path: '', redirectTo: 'Base', component: FlyingCreateFill, pathMatch: 'full' },
{ path: 'FlyingCreateFill', component: FlyingCreateFill, canDeactivate: [CanDeactivateGuard] },
]
}
]
},
{
path: 'Playing',
component: Development
},
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
//export class AppRoutingModule { }
declare var ADRUM: any;
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule {
vpView: any;
// // Subscribe to the Router URL changes.
constructor(public appRoutes:Router) {
console.log("appDyanmics-sample-constructor");
this.appRoutes.events.subscribe((event:Event) => {
if (event instanceof NavigationEnd) {
console.debug('NavigationEnd: '+event.url);
this.vpView.markViewChangeEnd();
this.vpView.markViewDOMLoaded();
this.vpView.markXhrRequestsCompleted();
this.vpView.markViewResourcesLoaded();
this.vpView.end();
ADRUM.Scoring(this.vpView);
} else if (event instanceof NavigationStart) {
console.debug('NavigationStart: '+event.url);
this.vpView = new ADRUM.events.VPageView();
this.vpView.start();
this.vpView.markViewChangeStart();
}
});
}
}
@sjames1958gm if you passthe same browser from normal to icognito the app will not work anymore
@sjames1958gm will not work for the user on icognito
@sorinr True, but that doesn't change
if (navigator.geolocation){....... from being true
@sjames1958gm so u say that
navigator.geolocation always evaluate to true?
@sorinr Well - not false - as it is testing the existence of the function, not whether the function will work onr not.
@sjames1958gm i would use. anyway, an alternative else clause for in case
navigator.geolocation evaluates to false
Why we can not make a style for the options inside the select element ?
@ahmed-issa-mohd I believe they're native to the browsers, just like the scrollbars
As if you want to define the border
You can't
thanks
@ahmed-issa-mohd I don't know how up-to-date this article is, but yeah... could be interesting anyway
https://css-tricks.com/dropdown-default-styling
https://css-tricks.com/dropdown-default-styling
@ahmed-issa-mohd If you are eager to do it, you can take a look here:
https://codepen.io/wallaceerick/pen/ctsCz
https://codepen.io/search/pens?q=select&order=popularity&depth=everything&show_forks=false
https://codepen.io/wallaceerick/pen/ctsCz
https://codepen.io/search/pens?q=select&order=popularity&depth=everything&show_forks=false
But I would not recommend it in general
eliecerthoms sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @kbaig |http://www.freecodecamp.org/kbaig
I didn't have the slightest idea Portals existed in React
Ah yes someone had a question about it some time ago but until then, I didn't either :)
It's a newer feature
Just so you know, they follow the component hierarchy on the virtual DOM, but not necessarily the same hierarchy on the actual DOM
so they would inevitably re-render on route change too, right?
or would that be avoidable?
Hey, I just finished the tribute page project, how can I check if there are any errors and if it's gonna pass ?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var count=0;
$('#commentForm').submit(function(event) {
event.preventDefault();
count++;
$('#countContainer p').append(count);
$('#commentsContainer').append('<div id="comment'+count+'" style="background-color: #f1f1f1; padding: 5px 5px 5px 5px; margin-bottom: 5px; border-color: grey;border-style: solid;border-width: 1px; overflow: auto;"><div>'+$(newCommentAuthor).val()+' commented:</div><div>'+$(newCommentText).val()+'</div><hr><p class="replyArea"></p><textarea class="replyText" rows="4" cols="50" name="reply-box" placeholder="Enter your reply here"></textarea><br><button class="replyButton">Reply</button></div>');
$('.replyButton').click(function(event) {
$(this).siblings('.replyArea').prepend($(this).siblings('.replyText').val()+'<br>');
});
});
});
</script>
<style type="text/css">
#newCommentContainer {
border-color: black;
border-style: solid;
border-width: 1px;
margin: 4% 24% 1% 24%;
padding: 1% 1% 1% 1%;
}
#commentsContainer {
border-color: black;border-style: solid;border-width: 1px;
margin: 0% 24% 1% 24%;
padding: 0% 1% 1% 1%;
}
#countContainer {
text-align: left;
}
#newCommentAuthor {
margin-bottom: 5px;
}
</style>
<title></title>
</head>
<body>
<div class="commentWidgetContainer">
<div id="newCommentContainer">
<form id="commentForm">
<input id="newCommentAuthor" type="text" name="name" placeholder="Name" autofocus><br>
<textarea id="newCommentText" rows="4" cols="50" name="comment-box" placeholder="Enter your comment here"></textarea><br>
<input type="submit" value="Submit">
</form>
</div>
<div id="commentsContainer">
<div id="countContainer"><p>Total comments: </p></div>
</div>
</div>
</body>
</html>Guys so there is bug which causes extra replies in the previous comment when new comments are added. the replies get multiplied from top to bottom.
So when i make the first comment and make replies to it, it works perfectly.
When I make the second comment, the replies in second comment work perfectly but when i reply to the first comment the reply is added twice and son on
Please help me out
I don't believe they actually review your projects until you hit the front end certification
neovks sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 601 | @eweiss17 |http://www.freecodecamp.org/eweiss17
@zlfnhmd would be a lot easier to help if we had a live version to play with
or under the body anyway
@eweiss17 will do
@eweiss17 they don't review till you get to the nonprofit projects
https://codepen.io/zlfnhmd/pen/BJYPwZ
Guys so there is bug which causes extra replies in the previous comment when new comments are added. the replies get multiplied from top to bottom.
So when i make the first comment and make replies to it, it works perfectly.
When I make the second comment, the replies in second comment work perfectly but when i reply to the first comment the reply is added twice and son on
Please help me out
People on here are more helpful on projects based off of freecodecamp.... as this room is intended for that.
I'm sorry I didnt know that. But i'd be grateful if someone helped me out
@zlfnhmd I haven't been able to figure out the solution yet but I know your click handler for the reply is firing multiple times in that situation
@zlfnhmd I think each time you add a reply, you're adding the listener to each reply button
@kbaig Yes i think its because when n number comment is created there will be n siblings with the specified class. I can't figure out a way to fire the event only once
So there's 2 click listeners on the first reply when there are 2 comments
@zlfnhmd I think each time you add a reply, you're adding the listener to each reply button
Do you mean each time I add a comment?
quick fix is adding the following line to your comment submit listener before appending the comment:
$(".replyButton").unbind('click');
@kbaig That was intense. Thanks again mate
zlfnhmd sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 501 | @kbaig |http://www.freecodecamp.org/kbaig
@harut-g Im working for a client that already has a hosting service and I was wondering if its posible to make a website with wordpress then take the files and put it with there hosting service
@BrianCodes33 Maybe some hover effect for the new quote button (e.g. darken background color, maybe use
transition for that)? Also I'd make the quote container smaller in width
@JacobStewart1 as in you want to still use wordpress on the client's host? It's possible to migrate
@kbaig ok thanks also can that be done with other cms's or just wordpress?
jacobstewart1 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 503 | @kbaig |http://www.freecodecamp.org/kbaig
jacobstewart1 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Guys do u know website that hire junior developers to develop small projects but that pays? :smile: