Skip to content
OverviewSolutions
7
Comments
175

Ivan

@isprutfromuaUkraine2,610 points

Fe From Free Ukraine 🇺🇦

I’m currently learning...

➡️ Svelte ➡️ Vue ➡️ Typescript

Latest solutions

View more solutions

Latest comments

  • Ivan•2,610
    @isprutfromua

    Hi there. Good job!

    I have some suggestions for improvement

    • Close the picture by clicking on the background

    • It would be good if the detail page occupied the entire height of the screen, no more

    • The bottom panel twitches when you open the details page

    • Why do you need the index and [index] folders, what is the difference between them? I think folder components would be enough

    • instead of the slide-out.ts animation you could use the built-in fly animation with the value set to y

    I hope my feedback will be useful to you

    Good luck

  • Ivan•2,610
    @isprutfromua

    Hi there

    Please note the variable declarations. It is better not to use var, it will also be better if you declare the types of these elements.

    var intereactiveNumber=document.querySelectorAll(".numbers")!;
let mainDiv=document.querySelector('.main')!;
var submitBtn=document.querySelector('.sb-btn')!;
let updateRatingDiv=document.querySelector('.ratingText')!;
let ratingDiv=document.querySelector('.rate')!;
var ratingPoint: HTMLInputElement;

    It is better not to use any type, especially since you will always have an event target.

    element.addEventListener("click",(e: { target: any; })=>{

    You don't get an input element here, it's just a number

    let targets=e.target.dataset.num as HTMLInputElement;

    that would be enough

    let targets: number = +e.target.dataset.num

    In general, I'll recommend to repeat Javascript Basics Concepts

    REgards

  • Ivan•2,610
    @isprutfromua

    Hi there

    About your question: you can use an empty block with a minimum height, or do the same with the grid areas.

    Regards

  • Ivan•2,610
    @isprutfromua

    Hi there.

    Your work is very similar to the design, it's great!

    But, I think you should make more use of the framework. Here are some of my tips:

    • move the cards to the data and use the loop each .. as. The data can look like this:
    [{stat: '10k +', content: 'companies'}]
    • You can also create individual components. For example - an image

    I hope my feedback will be helpful.

    Good luck and fun coding 🤝⌨️

    Marked as helpful
  • Ivan•2,610
    @isprutfromua

    Hi there! Good job

    I have some recommendations for you

    • you need to stretch the background with background-size: cover

    • in my opinion, the calcTimer function is redundant. Instead, you could use the following construction:

    let diff = dateToLaunch - today;

function calculateTimer() {
.......
}

window.addEventListener('DOMContentLoaded', () => {
  const timerInterval = setInterval(calculateTimer, 1000);

  if (diff <= 0) {   
    clearInterval(timerInterval)
  }
});
    • In each interval tick you declare new variables with functions, this reduces performance
      const days = String(Math.trunc(time / (1000 * 60 * 60 * 24))).padStart(2, 0);
  const hours = String(Math.trunc((time / (1000 * 60 * 60)) % 24)).padStart(2, 0);
  const minutes = String(Math.trunc((time / 1000 / 60) % 60)).padStart(2, 0);
  const seconds = String(Math.trunc((time / 1000) % 60)).padStart(2, 0);

    I would make calculations in separate constants. The date calculation would look like this:

    const DAYS = 1000 * 60 * 60 * 24;
....
const left = {
  DAYS: null
  .....
}
...
calculateTimer() {
....
left.DAYS = Math.trunc(time / DAYS)

daysValue.textContent = days > 10 ? + days : `0${days}` ;   // use ternar because padStart is experimental
}

    I hope my feedback will be useful.

    Good luck and fun coding 🤝⌨️

    Marked as helpful
  • Ivan•2,610
    @isprutfromua

    Hi there. Great work!

    I have a few comments and suggestions:

    • first of all - test your work yourself. If the top of the text is full of text, it will not be visible. Try it yourself. It is better to avoid fixed sizes where content can change

    • is an extremely unreliable selector

    .content section button

    • please set an unique class for the button. also i would add a smooth background color transition when hovering

    • It is better to use such a tag structure

    article
    header
        section
    footer
        section
        section

    I hope my feedback will be useful.

    Good luck and fun coding 🤝⌨️

    Marked as helpful
View more comments