john-smilga/javascript-basic-projects

Vanilla JS Projects

Enroll In The Course

My Javascript Course

Support

Find the Content Useful? You can always buy me a coffee

You can see all projects in action here

Projects

1. Color Flipper
2. Counter
3. Reviews
4. Navbar
5. Sidebar
6. Modal
7. Questions
8. Menu
9. Video
10. Scroll
11. Tabs
12. Countdown Timer
13. Lorem Ipsum
14. Grocery Bud
15. Slider

Course Exclusive

16. Counters (OOP)
17. Gallery (OOP)
18. Numbers
19. Dark Mode
20. Filters
21. Dad Jokes
22. Products
23. Random User
24. Cocktails
25. Slider
26. Stripe Submenus
27. Pagination
28. Wikipedia
29. Comfy Sloth

javascript-basic-projects's Issues

Menu project

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!

forth project doesn't work

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

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

Issue with menu final documents

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 :)

Online banking

The Hex page has the simple heading

hex.html file has ||simple heading

Can i add Tic-tac-toe game ?

Using HTML CSS and Javascript

menu project

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) 
})
})

error navbar project

word pronounciation

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

Bzbsnsbsb

Music player

Minor typo in project 3 , review carousel, app.js file. console.log( "hello") is not needed in the code

should be updated to :

Minor Presentation Bug in "12 - Countdown-timer" project final/app.js

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!

Setup has the same app.js file as Final

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 .😁

Typescript Tutorial

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

Java

Simple Stopwatch using javascript

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

Another solution to the 16 - counter project in the Javascript project series

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);`

Can i add simple websites using javascript

Error when extracting the zip file

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!

Menu Project

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?

Project 07

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