Design comparison
Solution retrospective
Definetily I'll do this one in React, TypeScript with Vite and Vitest next time!!! And other than that, I'll be focusing on resolving the JS problem(where in the add ons section, when you select yearly payment, you should see yearly prices, not monthly or incorect calcs)
What specific areas of your project would you like help with?Any ideas to show properly the add-ons when is yearly(not showing as expected) is welcome!
Community feedback
- @SvitlanaSuslenkovaPosted 2 months ago
Any ideas to show properly the add-ons when is yearly(not showing as expected) is welcome! - this. it's strange that you did it with prices but not text, you were almost there.
const texts = document.querySelectorAll(text's class);
function switchPrice(checked) { ...
if (checked) { texts.forEach((text)=> {add class or style here} .... }
else { ... texts.forEach((text)=> {display none here}
Marked as helpful1@sksksk2024Posted 2 months agoHello, @SvitlanaSuslenkova !! 👋👋
I think I'm brain freezed, I can't understand this problem. Can you show me the solution. Maybe give me some tips in using alternative variables(I'm not that good at those).
0@SvitlanaSuslenkovaPosted 2 months ago@sksksk2024 oh, I'm sorry, I checked the wrong stage of the form and talked about the plans.
In your HTML create your <p class="texts">2 month free</p>
Here is the function that you already created:
function switchPrice(checked) {
const monthlyPrice = [9, 12, 15];
const prices = document.querySelectorAll(".plan-priced");
const texts = document.querySelectorAll(.texts);
if (checked) {
texts.forEach((text)=>{text.style.display = "block"}
prices[0].innerHTML =
$${monthlyPrice[0] * 10}/yr; prices[1].innerHTML =$${monthlyPrice[1] * 10}/yr; prices[2].innerHTML =$${monthlyPrice[2] * 10}/yr; setTime(true) } else {texts.forEach((text)=>{text.style.display = "none"}
prices[0].innerHTML =
$${monthlyPrice[0]}/mo; prices[1].innerHTML =$${monthlyPrice[1]}/mo; prices[2].innerHTML =$${monthlyPrice[2]}/mo; setTime(false) } }Marked as helpful1@SvitlanaSuslenkovaPosted 2 months ago@sksksk2024 was a question about <p class="price">+$1/mo</p>?
const prices = document.querySelectorAll(".price"); You have to pass time to your function, if(time) {prices[0].innerHTML=} else {...}
Marked as helpful1@sksksk2024Posted 2 months agoThanks a ton, @SvitlanaSuslenkova !!! I've resolved the problem!! 🙌
0 - @jjdavenportPosted 3 months ago
The path to your images is wrong, should be "./assets/images/img".
1@jjdavenportPosted 2 months ago@sksksk2024 The path to your images, to fix the problem with the path to the fav icon would be, <!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" <------------- />Marked as helpful1@sksksk2024Posted 2 months agoYap, I didn't see that, @jjdavenport !! Thanks for correcting me, mate! 🔥🔥🔥
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord