Looking to hire developers?
@Jumanjigobez
@tonia83731
Submitted
What are you most proud of, and what would you do differently next time?
Finally learns how to use useContext in react
What challenges did you encounter, and how did you overcome them?
I think for this project, styling is the biggest problem. I do try to use unset but found out didn't work, so I change all style and comes to the final result.
What specific areas of your project would you like help with?
@Jumanjigobez
Posted
Hey @tonia83731, Congrats on finishing this project it looks great. I also learnt use of Context have you tried out REDUX also, It is also the best and easy in managing of States on all components at once.
Have a great Coding Day Maan....
@riqqer
Submitted
Hello to everyone!
Don't mind to share your opinion on my approach to this challenge. I am learning to work with React, therefore I decided to use it here combining it with APIs.
@Jumanjigobez
Posted
Hey, @riqqer Congrats for your successful completion of the challenge.
It's Dope! Wonderful job.
#Don't Give Up
@Johannes-pries
Submitted
Hi there, Here is my solution to "Social links profile". I would appreciate it if you could give me feedback.
@Jumanjigobez
Posted
Hey, @Johannes-pries Congrats for your successful completion of the challenge.
It's Dope! Wonderful job.
#Don't Give Up
@justinconnell
Submitted
I decided to build this project using Vanilla JS and standard CSS3. I used web-components to break the page down into it's respective content areas:
Each component contains the relevant HTML and CSS for rendering the component and base CSS is homed in the root style.css file.
@Jumanjigobez
Posted
Hey, @justinconnell Congrats for your successful completion of the challenge.
It's Dope! Wonderful job.
#Don't Give Up
@Ayoubrabiae
Submitted
I think the project is easy overall, but I didn't think that the project could be very helpful for me. I learned a lot to create this project, using a flowchart as an example.
@Jumanjigobez
Posted
Hey @Ayoubrabiae,
Loved your solution especially on the animation part but Can I kindly give a suggestion on a little adjustment on your code.
I saw a lot of if conditions statements, which are not bad, but I would recommend you check on my Js code on this link -> here where I have used an object of inputs with their properties and looped through each by using the if condition statements. (This will enhance at least better readability and structure of your code)
Hope this was Helpful :)
Otherwise, you are doing a great job to grow in the field.
Marked as helpful
@Muxammedzi
Submitted
Works with your localStorage. You can also Delete and Edit your tasks.
Feedbacks are very much welcome. Thank you!
@Jumanjigobez
Posted
Hey, @Muxammedzi Congrats for your successful completion of the challenge. Loved the Idea of LocalStorage. It is a dope idea maan :)
@Ahmed-dev-98
Submitted
@Jumanjigobez
Posted
Sorry, I am unable to pass the phoneNumber field! Kindly check on that.
Hope this will be helpful to counter check your code.
@ivannetreba
Submitted
@Jumanjigobez
Posted
Hey there Ivan,
Congrats on finishing your first challenge :)
I have seen you didn't try on adding the pattern images and also on the carousel section. You are free to check on my code for my solution I did a simple trick using css only to make the pattern images fit their position and also the carousel part.
Otherwise, the solution is responsive that's great.
Hope this will be helpful to you.
Marked as helpful
@tahobbit11
Submitted
@Jumanjigobez
Posted
Hey @tahobbit11; Congratulation on completing this challenge but maybe if I could add sth.
When the number is so large maybe if you could place the input box to have a css of overflow: scroll so that the number doesn't go outside the input box. input I tested with 6500000000000000000000000000000
I inspected your code and the below is how you should have done on the input part:
#input{
width: 100%; /*to fit the wrapper container*/
overflow: scroll; /*enable scroll when the input is so large*/
}
If the scrollbar is huge and looking bad you can add the following in your css:
*::-webkit-scrollbar{/*the size of the scrollbar*/
width: 5px;
height: 5px;
}
*::-webkit-scrollbar-track{
background: rgba(0,0,0,0.2); /*the background color of the scroll track*/
}
*::-webkit-scrollbar-thumb{
background: #fafafa;
}
Sorry for the long text :) otherwise I hope this will be helpfull to you.
Kudos and Happy Coding Bro.
Marked as helpful
@jonesmarquelle
Submitted
@Jumanjigobez
Posted
Perfectly done bro, Keep Coding. I like the idea of how you placed the countries container into a scrollable mode :)
@J11tendra
Submitted
@Jumanjigobez
Posted
Nice One Bhai keep on coding I like the way you made the hero picture be perfectly set, not like mine :)
@hackerYuvrajSingh
Submitted
@Jumanjigobez
Posted
Congrats @hackerYuvrajSingh, I love how you were not confused with the colors not like me, but I had a suggestion maybe making the numbers greater than a thousand to have commas and that is easy (i.e 1,000).
Just checked out your code in the index1.js inside the button.click(function()). there is a condition if (buttonElm === '='){ screen.value = eval(screenValue); // just add .toLocaleString() function and it will do for you :) }
screen.value = eval(screenValue).toLocaleString();
You can check out my solution also on this to check my code, but I was confused on the colors :)
Otherwise, Kudos, Keep Coding Keep Pushing.
Hope it was helpful :)
Marked as helpful
@AlgirdasU
Submitted
This is my first project with API, I am not sure if this is correct. I think I will have to rewrite some parts of this code. It can search for any IP address but I don't understand, how to search using domain.
@Jumanjigobez
Posted
Hey @AlgirdasU, Your solution looks great, I tried entering a domain, but it didn't go through.
I just also viewed your question problem, it was also disturbing me, but I did a small trick with the URL of the Api, I would suggest if you can view my code on this challenge on my js script code you can find the url trick I placed.
Otherwise, it's great and Hope this will be helpful.
Marked as helpful
@AdrianoEscarabote
Submitted
👨💻 Hello everyone.
This was an excellent challenge to train and improve my knowledge with js! I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!
I added:
Feel free to leave comments on how I can improve my code.
Thanks! 😊
@Jumanjigobez
Posted
I love the solution you did, but I have a suggestion as in, the Number of people you could have made it to be only whole numbers not a decimal like I tried placing 1.5 and it calculated, so the logic gets lost.
I reviewed your index.html and I so on the input you place type="text", Maybe you can try it to be type="number" and check it out maybe :)
Otherwise it is wonderful it calculates nicely only the logic of number of people doesn't make sense.
Hope this will be helpful.
Have a nice day coding, Don't Give Up :)
Marked as helpful
@Juanies
Submitted
@Jumanjigobez
Posted
Hello Juanies I checked out your solution it was great but the submit button should not submit unless I have choosed a rate value.
Through viewing of your script code in:
submit.addEventListener('click', () =>{ tarjeta.style.display = 'none'; thanks.style.display = 'flex'; nota.textContent = ${value}});
In the above function I think you should have placed an if condition that checks if a rate is selected then proceed to thank card page else maybe alert or disable the button.
Kindly checkout my solution on this challenge and check out my script code.
Otherwise Hope this is Helpful and keep coding :)
Marked as helpful
@Odo-Peter
Submitted
I would appreciate feedbacks on better way to go about this challenge.
@Jumanjigobez
Posted
Hello @Odo-Peter,
I have just previewed your solution but it has a problem like the errors should not be displayed if the fields are not empty...
I think you can check out my solution on this I did it well and hope it will be hopeful to you. Just understand the code on use of if and else statements...
Other wise keep coding bro :)
Marked as helpful
@Ayman91
Submitted
@Jumanjigobez
Posted
I think your styles.css have not loaded up am only seeing the structure. Kindly checkout your code semantics and view the folder and subfolders of your styles.. Hope it will be helpful to you otherwise it is great keep coding bro :)
@Chromax-D
Submitted
What is the best way to actually make the hero section responsive? That section gave a tough time. Please your answers and feedback will be appreciated.
@Jumanjigobez
Posted
Hello @Chromax-D,
for the hero image maybe I suggest you checkout my solution code on this in my profile. In my style.css.
Hope it will help you. Other wise keep coding bro.
@Yoryao
Submitted
@Jumanjigobez
Posted
Hello @Yoryao, I just previewed your solution but you could have disabled the button until a rate is chosen. The user should not submit an empty rate from 1 to 5.
I also checked your code and I would suggest maybe in your sendRating() function maybe you place an if condition to check the value of rating if it is not null then you proceed else you do something like either you alert telling the user to select a rate or disable the button from submitting.
Hope it was helpful if you need more clarification on this don't hesitate just reply.
Marked as helpful
@iyke-e
Submitted
i had a little problem with the javascript pls how can i stop my code from selecting another option once one option has been selected useful feebacks would be appreciated
@Jumanjigobez
Posted
Hey @iyke-e, well done! your solution seems nice but there are some improvements which could be made...
In order to solve the above two points you can add some code into your JavaScript and a little bit onclick attributes into your html circles part..
I have done it to your code this is for html changes:
<div class="button">
<button class="circle" onclick="active(1)"> 1 </button>
<button class="circle" onclick="active(2)"> 2 </button>
<button class="circle" onclick="active(3)"> 3 </button>
<button class="circle" onclick="active(4)"> 4 </button>
<button class="circle" onclick="active(5)"> 5 </button>
</div>
<button class="submit" onclick="submit()">Submit</button>
<div class="counter ">
<p> You selected <span id="result"> </span> out of 5 </p>
</div>
Below is for the JavaScript:
const numRating = document.querySelectorAll('.circle');
const starRating = document.querySelector('.countingSec');
const thankYou = document.querySelector('.thankYou');
const numValue = document.querySelector('#result');
let rate = " ";//The rate value will be stored here
active = (x) => {//The function for the rate buttons when clicked
for (let i = 1; i <= 5; i++) {//since rating is from 1 to 5 we are looping till 5
if(i==x){//If user input matches any rating
numRating[i-1].style.background = "hsl(25, 97%, 53%)";
numRating[i-1].style.color="white";
}else{//else do this
numRating[i-1].style.background= "var(--MediumGrey)";
numRating[i-1].style.color = "var(--LightGrey)";
}
}
rate = x; //rate value sets to value x
}
//Function for submit
submit = () => {
if(rate!=" "){ //if user has selected any rating, only then do this
numValue.innerText = rate;
starRating.hidden = true;
thankYou.hidden = false;
}else{//If user has not selected anything but clicked submit then you can do sth
alert("Kindly choose a rating value to proceed!");
}
}
:) Sorry for the long comment, hope it helped you to solve your issue otherwise keep coding and have a wonderful day.... .
Marked as helpful
@Manik2375
Submitted
Any feedback is appreciated.
@Jumanjigobez
Posted
Hey @Manik2375, you did it well may I kindly suggest on the population numbers part you can add in your htmlGenerator.js code <dd class="country__property-value">${population}</dd>
you can add this ${population.toLocaleString()} to make it have comma separated values. Hope it helped otherwise keep coding bro :)
Marked as helpful
@EngineerCookie
Submitted
Tried implementing accessibility for screen-readers. Don't know if it's working. Also, the numbers in the rating scale doesn't seem to be in the center.
@Jumanjigobez
Posted
Hey @EngineerCookie Am seeing the rating buttons are okay. But maybe I would suggest you give the card a border radius maybe 12px to look the same as the design one. Otherwise hope it was helpful and keep coding bro.
