Latest solutions

Latest comments
- @mattari97#svelte#tailwind-css#typescript#axios@fadhilradh
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 passerror
as catch parameter, then pass theerror
again in yourthrow
.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!
- @AdarshRai0@fadhilradh
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 themain
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 andmain
function,addTodo.js
for adding todo andutils.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!
- @deadazix@fadhilradh
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 ?
Marked as helpful - @Jessfabian@fadhilradh
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 givingmargin: auto
to yourimg
, you should give your.box
class apadding
. 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
isOutfit
(https://fonts.google.com/specimen/Outfit). You can easily change this by includinglink
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 thefont-family
in your CSS. In this case because the design only has one font, you can add it globally in yourbody
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 !
Marked as helpful - @DanoSvK@fadhilradh
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
andexport
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 !
Marked as helpful