daniel

Latest comments

• 

  nodegreecode•270

  @nodegreecodeSubmitted 23 days ago

  What are you most proud of, and what would you do differently next time?

  Overall, I’m quite satisfied with my solution, but there’s always room for improvement. Next time, I’ll focus on refining the layout and enhancing the script logic. The content within the activity boxes could be positioned more precisely to better align with the design. While it might be a bit of an overkill for a project like this, implementing an MVC pattern for data fetching and other JavaScript functionality could add more structure and flexibility.

  What challenges did you encounter, and how did you overcome them?

  Managing click events on links was quite a challenge, but revisiting topics from JavaScript course — especially event propagation and delegation—proved to be incredibly helpful.

  What specific areas of your project would you like help with?

  Event delegation.

  

  Responsive time tracking dashboard SASS and JavaScript

  #sass/scss

  1

  00
  

  daniel•205

  @danielashjariPosted 19 days ago

  This is the summary of my script and i think it could be useful

  you can check out mdn for more help

  • MDN json

  • MDN promises

  async function populate() {
      const requestURL = "dist/js/data.json";
      const response = await fetch(requestURL);
      const data = await response.json();
      ...   
      dailyBtn.addEventListener("click", () => {
          populateDaily(data);
      });
  
  function populateDaily(data) {
      data.forEach(item => {
          ...
          const time = container.querySelector(".time");
          const lastTime = container.querySelector(".last-time");
  
          time.innerHTML = `${item.timeframes.daily.current}hrs`;
          lastTime.innerHTML = `Last Day - ${item.timeframes.daily.previous}hrs`;
      });
  }
  

  0
• 

  ps1089•80

  @ps1089Submitted over 1 year ago

  

  Newsletter sign-up form with success message using HTML,SCSS & JS.

  #sass/scss

  1

  50
  

  daniel•205

  @danielashjariPosted 28 days ago

  eventhough i didnt enter my email it showed me the success message you can check the value of email using this

  const isValidEmail = (email) => {
      const re =
          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
  };
  

  0
• 

  vladyslav-shulhach•170

  @vladyslav-shulhachSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  I'm proud to have finally completed the project - what a relief! Next time I'd like to streamline my workflow to complete projects more efficiently.

  What challenges did you encounter, and how did you overcome them?

  One challenge was to keep a steady pace throughout the project. I tackled this by staying consistent and focusing on making gradual progress.

  What specific areas of your project would you like help with?

  I'd like to improve my styling techniques and refine my HTML and JavaScript skills. Any feedback on best practices or optimisations would be greatly appreciated!

  

  Article Preview Component Solution

  #sass/scss

  2

  20
  

  daniel•205

  @danielashjariPosted about 1 month ago

  nice animations, great accessibility just I'd like to add screen reader only text

  <h1 class="sr-only"> Article about furnitures</h1>
  

  .sr-only {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
  } 
  

  Marked as helpful

  1
• 

  Sebastian Rodriguez•510

  @JuSeRDevSubmitted about 1 month ago

  

  solution

  1

  10
  

  daniel•205

  @danielashjariPosted about 1 month ago

  The only thing I'd add to your code is ARIA attributes and screen reader only sections.

  .sr-only {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
  } 
  

    <h1 class="sr-only"> Article about furniture</h1>
  

  This is an article about WAI-ARIA attributes.

  0
• 

  Tunde Abdulhamid Sanusi (Tuham)•190

  @tuhamworldSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  Combining CSS Grid and CSS Flexbox to achieve desired results

  What challenges did you encounter, and how did you overcome them?

  Ensuring the main container stays in the middle of the body regardless of what devices are being used to view the website.

  I initially used margin: 0 auto but there was an issue using it, eventually, I was able to use display: flex with align-items and justify-content to be center

  

  Testimonials Grid Section

  #sass/scss

  1

  40
  

  daniel•205

  @danielashjariPosted about 2 months ago

  The only thing I'd add is the aria roles and labels to make it more accessible (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) I'd also name the colors differently(based on what element will be that color) for example instead of

  --very-dark-blue:fffff;
  ``` id do
  

  --background: fffff; BTW, you nailed it

  0
• 

  Semandr•170

  @SemandrSubmitted almost 3 years ago

  

  Four card feature section

  #bem#sass/scss

  1

  20
  

  daniel•205

  @danielashjariPosted about 2 months ago

  It's magnificent. The only thing I'd do differently is to set the tablet design for smaller screen

  0