It was a great project to practice dynamic routes in Sveltkit.
But i could not find the way to catch the API call errors on the client side.
Maybe you know how ? 😊
I would also like to implement a caching system (maybe service worker ??) for already fetched endpoints.
If you have any advice or resources on that matter or anything about the layout or the code feel free to share.
Have a nice day/night. Peace
Hi Antoinec,
Your project is good and works as expected.
Regarding your question about :
But i could not find the way to catch the API call errors on the client side.
I read your code, in the requests.config.ts, you need to pass error as catch parameter, then pass the error again in your throw.
So, insted of writing this in your code :
catch (_) {
throw new Error("Sorry! We could not access the API.");
}
You should write like so :
catch (error) {
throw new Error(`Sorry! We could not access the API because ${error}`);
}
Hope it helps and good luck!
👾 Hello, Frontend Mentor coding community. This is my solution for the Todo app.
Feel free to leave any feedback and help me improve my solution or make the code clean!✨❤️
Hi Adarsh,
Your app looks amazing, without bugs and has great animations, well done !
I have one feedback for you when I forked your project and looked at your script.js file. It is quite long and not very readable, especially the main function. What you can do is you can extract some code inside your function to another smaller function. Example : Instead of :
function main() {
code...
code..
code..
}
You can write as :
function main() {
function1()
function2()
function3()
}
This is more readable for the one who will read your code (your co-workers) and cleaner as it follow the principle of one function should only do one thing and one thing only. Also, make sure your function name is meaningful so others can understand its job in one glance.
Secondly, you can further improve your code by separating your code into several files, grouping similar functions and variables inside a file and making use of import and export statements.
For example you can split into three files : script.js for storing your global variables and main function, addTodo.js for adding todo and utils.js for other functions. Then, you can export function to be available in another file. For example :
Firstly, you need to make change to your HTML file, add type="module" to your link to script.js file. This will make your JS files able to import and export function and variables to each other.
For example :
// addTodo.js
export function addTodo() {
…doAwesomeThings()
}
// main.js
import { addTodo} from “./addTodo.js”
function main() {
...code...
addTodo()
...code...
}
You can do this for every other function and group similar functions in one js file.
Just reply me if something is not working.
Hope it helps and good luck Adarsh!
this was one of my hardest project I have ever done and still edit button does not work I did use React for this project and had lots of fun using react!
Hi Arash,
Your project looks good ! It matches the design.
Can you provide link to your github repo so I can see why the edit button did not work ?
It took me the longest time to figure out how to add the white box around the content (the img, and the text).
Is there another way to make the what box around the image other than what I did? I also used <br> to create the text-wrap effect however, agin i'm not sure if thats the way to go about it.
Feed back is very welcome as I am only a week into this and would love to learn the correct process.
Hi Jessie,
It's amazing that you manage to create this awesome looking card when you just a week into this. Way to go !
I have taken a look at your index.html file, and I have a few suggestion and answer for your question.
Is there another way to make the what box around the image other than what I did?
Yes, and this should be made using padding, since it is the way CSS makers give for exactly this kind of design. It gives an inside space, between border and the content. So, instead of giving margin: auto to your img, you should give your .box class a padding. You can write :
.box {
padding: 15px
}
I'm not sure about how much px is correct for this design, you can change it as you like.
I also used <br> to create the text-wrap effect however, agin i'm not sure if thats the way to go about it.
Sure, using <br> is acceptable method for text-wrap. Me and my coworkers still used it in our day to day job. So no problem with that.
I have a few more suggestions, but it's totally optional for you to implement it.
Firstly, the card is in the center of the viewport in the design. The easiest way to position it is using flex in your parent element (body in this case). Like so :
body {
display: flex;
justify-content: center;
align-items: center
}
This should nicely center your card.
Secondly, I notice that the font used is not the same as the design. I took a look at the challenge's style-guide is Outfit (https://fonts.google.com/specimen/Outfit). You can easily change this by including link tag to this Google Font and paste it anywhere inside your HTML's <head> tag. Here I copied the link for you :
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
Just paste it inside your <head> tag. Finally, you need to use the font-family in your CSS. In this case because the design only has one font, you can add it globally in your body selector like so :
body {
...your CSS...
font-family: 'Outfit'
}
And the font should change.
That's all. Just DM me if any of my suggestion is not working properly.
Good luck !
Hello, so I finally finished this project, which should be completely bug-free. Anything appearing or not appearing should be part of my intended logic. But I have one problem. I have no idea how to create clean, reusable, and maintainable javascript code. It's just a big chunk of complicated, unclean, and bad-looking code. Any ideas on how to improve that and learn how to create clean, reusable, and maintainable code?
Hi Daniel,
First off I’d say that your result is great! It looks exactly like the design and works well. Well done!
I have taken look at your source code and I have a suggestion for your question about how to refactor your main.js file.
First, I see a lot of code inside your updateBill function and it’s not very readable. What you can do is you can extract every code inside an if or else if to another function. Example :
Instead of :
if(foo) {
…foocode..
} else if (bar)
…barcode…
{
You can write as :
if (foo) {
doFoo()
} else if (bar) {
doBar()
}
This is more readable for the one who will read your code (your co-workers) and cleaner as it follow the principle of one function should only do one thing. Also, make sure your function name is meaningful and should be a verb.
Secondly, you can further improve your code by separating your code into several files, grouping similar functions and variables inside a file and making use of import and export statements.
For example you can split into three files : main.js for storing your global variables, updateBill.js for updating functions and utils.js for other functions. Then, you can export function to be available in another file. For example :
// updateBill.js
export function updateBill() {
…doAwesomeThings()
}
// main.js
import { updateBill } from “./updateBill.js”
updateBill()
You can do this for every other function and group similar functions in one js file.
Hope it helps and good luck Daniel !