john-smilga / javascript-basic-projects Goto Github PK

hex.html file has ||simple heading

Great video and tutorials!

12 - Countdown-timer final/app.js : https://github.com/john-smilga/javascript-basic-projects/blob/master/12-countdown-timer/final/app.js

See PR #62

I was playing with the code adjusting the hours (11) and minutes (30) in this line:

const futureDate = new Date(tempYear, tempMonth, tempDay + 10, 11, 30, 0);

If const minutes = futureDate.getMinutes(); is 0, it displays "Giveaway ends on Monday, 25 April 2022 11:0am" instead of "Giveaway ends on Monday, 25 April 2022 11:00am".

This is because Date.getMinutes(); returns an integer between 0 and 59. So I think you forgot to test for cases where if futureDate.getMinutes() < 10 is true, add a leading zero to the display string in the giveaway.textContent variable.

Also, as coded,giveaway.textContent will always display "am". According to the MDN docs for Date(), Date.getHours() is in 24hr format and returns an integer between 0 and 23). So you should probably either drop the "am" and use 24 hour time format, or convert it to 12 hour time format with AM/PM and add a conditional check to display "12:00:00 AM" if futureDate.getHours == 0, as that is the convention used in 12hr time, not "00:00:00 AM".

The proposed fix would be to add the following code, or something similar, under the line const = futureDate.getMinutes(); :

var displayHours = hours;
var displayMinutes = minutes;
var meridiem = "AM";

displayMinutes  = (displayMinutes < 10) ? "0" + displayMinutes : displayMinutes;

meridiem = (displayHours >= 12) ? "PM" : "AM";
displayHours = (hours > 12) ? displayHours -12 : hours;
displayHours = (hours == 0) ? 12 : displayHours;

and then change the giveaway.textContent string literals to use the new variables...

giveaway.textContent = `giveaway ends on ${weekday}, ${date} ${month} ${year} ${displayHours}:${displayMinutes} ${meridiem}`;

Sorry, I don't mean to be picky or pedantic about it. It is a good tutorial. I just wanted to help make it the best it can be! :)

Best Regards!

Was running through your javascript project tutorials and I suggest a shorter solution to the 16- counter project

First, i select all the necessary DOM queries of the first and second counter
`const firstCounter = document.querySelector('.first-counter')
const secondCounter = document.querySelector('.second-counter')

const firstButtons = [...firstCounter.querySelectorAll('.btn')]
const secondButtons = [...secondCounter.querySelectorAll('.btn')]

const valueOne = firstCounter.querySelector('.value')
const valueTwo = secondCounter.querySelector('.value')`

next I create a function called counter that takes 3 parameters,
const counter = (value, buttons, finalValue) => { buttons.forEach((btn) => { btn.addEventListener("click", () => { if (btn.classList.contains("decrease") && value > 0) { value--; } if (btn.classList.contains("increase")) { value++; } if (btn.classList.contains("reset")) { value = 0; } finalValue.innerHTML = value; }); }); };

Then I call it on both counters;
`//work on first counter
counter(parseInt(valueOne.textContent), firstButtons, valueOne);

//work on second counter
counter(parseInt(valueTwo.textContent), secondButtons, valueTwo);`

Hey, just wanted to first of all thank you for all your dedication and good work, you're making a difference. And then I wanted to ask, as I tried to catch the bug in my code which wouldn't let me have both buttons and menu items, I tried to copy your final app.js file and link it to my html to see if it would work, same error basically, and then I went to see your other files like the html, and it had all the items hard coded anyway (?), I am new to coding and programming so maybe this can be something really simple, would appreciate any help :)

Hi there,

I followed the youtube tutorial and I'm unable to get the same result.

I tried copying and pasting the final code and it still only gives me the buttons and not the filtered menu with all the information inside the array.

Thanks for the great work teaching, but this time I don't know what's wrong!

I made a simple stopwatch using javascript.
Tech stack:
Html
CSS
Javascript.

At 2:33:00 in the video you show code like this:

const menu = [array];
const sectionCenter = document.querySelector('.section-center');

window.addEventListener('DOMContentLoaded', function() {
  let displayMenu = menu.map(function (item) {
    // console.log(item);
    return "<h1>${item.title}</h1>";
  });
  console.log(displayMenu);
});

and your devtools console shows the array as being the 9 titles of the items but mine just shows the string

"<h1>${item.title}</h1>"

nine times. Has something changed since the creation of the tutorial or have I made a mistake?

Hello John. Your courses are very awesome. Can you add to your courses Typescript tutorial ? Thank you very much. YOU ARE THE BEST.

hi I was doing the menu project and everything was going okay until i reached the for each part i wrote the code but nothing happened so i don't know where i went wrong . here's the code:

filterBtns.forEach(function (btn){
  btn.addEventListener('click',function(e){
  console.log(e.currentTarget.dataset) 
})
})

can i add word pronounciation ai, that help pronounce word?

Hi there,

I have downloaded the javascript-basic-projects-master.zip file, but when I try uncompressing using winrar, I get the following error:

javascript-basic-projects-master.zip: The archive is corrupt

The file is 16.8mb.
Any pointer will be appreciated.
Thanks for your great work, sir!

When I open it with final folder, menu items are not apparent.

https://github.com/john-smilga/javascript-basic-projects/tree/master/4-navbar

should be updated to :

https://github.com/john-smilga/javascript-basic-projects/tree/ff3cdf1fb023f2aba73fed37b56721ec6114f11b/03-reviews

Setup up folder app.js should only contain reviews array but the whole functionality has been added. Nothing major .😁

In the question project the opening div close with closing main tag

Using HTML CSS and Javascript