this is a special one, I've performed my first test ever, i used React, Tailwind-CSS for the style with the help of Vite and Vitest to perform my first unit testing on the helper functions.
this challenge was easy overall and i enjoyed working on it, the hardest part was the deployment, it toke me even longer than the time the project toke me to finish it π.
this is a special one, my first react & tailwind-CSS with the help of Vite project, in fact, it's a single component and it shouldn't be created using react, but because I'm in the learning phase, it's Ok π.
I've tried to apply the concepts of react as much as i can and tried to use the most advanced methods that i know, Vite was a faster than the create-react-app and that eases the production.
I'll appreciate your feedback as well.
i enjoyed working on this challenge, I've used JavaScript to implement the logic of validation of inputs and tried to cover all the possible scenarios including the range of the inputs and validation of each input according to the other inputs (which month/ leap year or not) as well as the validation of the date as whole.
I've tried to make the calculation of the age as accurate as possible and i think it's accurate enough with incremental animation when the result is ready.
the implementation of logic toke the big part of the work.
it was pretty challenging to perform the toggle of the prices using just CSS, especially that I'm working with Tailwind-CSS.
i will appreciate any feedback.
check out my first tailwind-css project π.
i don't if I've done everything the right way but at least I've tried, i will appreciate your feedback as well.
if you have a section that contains just a background-image and it's height isn't fixed, you can set the display of its parent to grid and set the right fractions to make its height according to the rest chidrens, for exmple:
<main>
<header></header>
<section>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem amet, illo
odio atque cupiditate quam adipisci minus neque impedit ipsum!
</p>
<button>Lorem, ipsum dolor.</button>
</section>
</main>
in this case, the header element doesn't have a specific height, but you can give it a height accourding to the height of the section element height:
main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr;
}
like this, the height of the header will be auomatically half the height of the section element;
this was my first react project, a simple calculator app with three themes.
the logic of the equations calculation was made by me and may contain some mistakes.
your preferred theme will be saved and reloading the page won't set the default theme.
i don't know if this is the right structure and if I've done thing properly, i hope i can get some advice and let me know if there is any issue with the app.
this challenge was new for me, this was the first time i deal with API's, i've also learnt something which is browsers doesn't treat api requests the same, for exmple in this challenge, chrome generate a new advice everytime the dice is clicked while firefox generate a new advice just once unless you are in the private mode.
to solve this problem i've added a cache-busting parameter to the API request URL:
<section>
<q id="advice"></q>
</section>
const timestamp = new Date().getTime();
request.open("GET", `https://api.adviceslip.com/advice?time=${timestamp}`);
hi, this is the hardest one till now, Connect-Four game with play-vs-cpu option (it's not that easy to win the cpu π¬), i'll really appreciate your feedback and please let me know if there are any issues either with the front-end or with the game logic.
i would also like to know your score against the cpu π.