bytegrad / professional-javascript-course Goto Github PK

This repo contains everything you need as a student of the Professional JavaScript Course by ByteGrad.com

Home Page: https://bytegrad.com/courses/professional-javascript

HTML 15.99% JavaScript 30.26% CSS 53.74%

course javascript

professional-javascript-course's Introduction

Professional JavaScript Course -- See course here

Important: my new React & Next.js course is almost released and will only be available on https://ByteGrad.com - Make sure you're subscribed to the email newsletter to be notified & get a launch discount: https://email.bytegrad.com

You can find the final code for each video in the project folders. Use that if you get stuck. There is also a bugs file, a slides file and a readme file (you're reading it right now).

Something is not working! What should I do?

Follow these steps:

Check if you made any typos. Also, check your terminals (if we're using those in the videos) to see if there are errors, fix those and try again. This will fix your issue 99% of the time so make sure you've done this thoroughly.
Still not working? Check the file in this repo called 'bugs' and see if your problem is present and follow the steps there.
Still not working? Copy and paste the final code of the video you're stuck at (you can find the final code in the project folders). If you change the package.json file, run the command npm install to make sure you have the correct dependencies installed.
Still not working? Please open an issue in this GitHub repository with a clear description of what's not working. I will help you as quickly as I can. But from my experience: the vast majority of your problems will be because of typos / simple mistakes.

I'm online throughout most of the day and will help you as quickly as I can! In the meantime, I apologize for the inconvenience. Sometimes things break after recording the videos, but I try to be quick with any bugs that come up.

How can I contact you?

Please open an issue in this GitHub repo or contact me on the private Discord (see 'resources' below video to find link). You can also contact me at [email protected].

professional-javascript-course's People

Contributors

Stargazers

Watchers

professional-javascript-course's Issues

Page bug solution

Just add pagination__button--hidden class to line 77 in index.html

                    <button class="pagination__button pagination__button--next pagination__button--hidden">

Add bookmarkClickHandler feature.

Color match solution

It is indeed a major hassle to match the colors on the jobs, but there is a simple solution. Just hash the id with the last digit to each color, since 4 colors are provided, then we just need to use id % 10 % 10 % 4, then add that selector to each jobItem, add those 4 colors with differnt selector. We just can't guarantee the color is rotated like it was set before.

JobList.js

       <div class="job-item__badge job-item__badge--color${parseInt(jobItem.id % 10 % 4)}">${jobItem.badgeLetters}</div>

JobDetails.js

									<div class="job-info__badge job-info__badge--color${parseInt(jobItem.id % 10 % 4)}">${jobItem.badgeLetters}</div>

index.css

.job-item__badge {
    font-size: 13px;
    height: 46px;
    width: 38px;
    /* background-color: #8dd335; */
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    margin-right: 13px;
}

.job-item__badge--color0 {
    background-color: #8dd335;
}

.job-item__badge--color1 {
    background-color: #3D87F1;
}

.job-item__badge--color2 {
    background-color: #D2D631;
}

.job-item__badge--color3 {
    background-color: #D96A46;
}

/* .job-item:nth-child(4n+2) .job-item__badge {
    background-color: #3D87F1;
}

.job-item:nth-child(4n+3) .job-item__badge {
    background-color: #D2D631;
}

.job-item:nth-child(4n+4) .job-item__badge {
    background-color: #D96A46;
} */



.job-info__badge {
    width: 55px;
    height: 70px;
    /* background-color: #d0d335; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 13px;
}

.job-info__badge--color0 {
    background-color: #8dd335;
}

.job-info__badge--color1 {
    background-color: #3D87F1;
}

.job-info__badge--color2 {
    background-color: #D2D631;
}

.job-info__badge--color3 {
    background-color: #D96A46;
}

Why body class in corpComment ?

As we can have only 1 body tag, may I know the purpose of adding a class named “body” in body tag.

Fancy Counter CSS

Media query at fancy counter CSS showing an error. Its says curly excepted in an "or" statement. I even copy and pasted your CSS code it still the same error. please check

Doubt : Selection Property

Project : CorpComment

In heading we have used pseudo-class selection , which I tried playing around and understood, but I couldn't understand the use case of former one with first-heading*::selection

I could see it's effect if I disable the property but couldn't really understand.

Placeholder

I tried understanding this CSS for placeholder, but stuck at not(:placeholder-shown), may you please help

.form__textarea:focus + .form__label,
.form__textarea:not(:placeholder-shown) + .form__label {
    opacity: 0;
    transition: 0.5s;
}

How do we implement the bookmark click function like the one in React and Next JS Course?

I implemented the bookmark clickhandler in rmtdev project and it works. But now I want it to work like the rmtdev project in React and Next JS course? How shoud we do that? I tried different solution and none worked like expected.

This code will have problem. When we click the bookmark icon, it will show like this without the "#" in the url.
.

jobListSearchEl.addEventListener("click", (event) => {
  if (event.target.classList.contains("job-item__bookmark-icon")) {
    bookmarkClickHandler(event);
  }else{
  clickHandler(event)
}
});

This is my bookmarkclickhandler and it works.

import {
  state,
  bookmarksBtnEl,
  jobDetailsEl,
  jobListBookmarksEl,
  jobListSearchEl,
} from "../common.js";
import renderJobList from "./JobList.js";

const bookmarkClickHandler = (event, bookmarkTag = "item") => {
  if (!event.target.className.includes("bookmark")) {
    return;
  }

  if (state.bookmarkJobItems.some((jobItem) => jobItem.id === state.activeJobItem.id)) {
    state.bookmarkJobItems = state.bookmarkJobItems.filter((jobItem) => jobItem.id !== state.activeJobItem.id);
  } else {
  	state.bookmarkJobItems.push(state.activeJobItem);
  }

	localStorage.setItem("bookmarkJobItems", JSON.stringify(state.bookmarkJobItems));
	document.querySelector(`.job-${bookmarkTag}__bookmark-icon`).classList.toggle(`job-${bookmarkTag}__bookmark-icon--bookmarked`);
	renderJobList();
  renderJobList("bookmarks");
};

const mouseEnterHandler = () => {
  bookmarksBtnEl.classList.add("bookmarks-btn--active");
  jobListBookmarksEl.classList.add("job-list--visible");
  renderJobList("bookmarks");
};

const mouseLeaveHandler = () => {
  bookmarksBtnEl.classList.remove("bookmarks-btn--active");
  jobListBookmarksEl.classList.remove("job-list--visible");
};

bookmarksBtnEl.addEventListener("mouseenter", mouseEnterHandler);
jobListBookmarksEl.addEventListener("mouseleave", mouseLeaveHandler);
jobListBookmarksEl.addEventListener("click", (event) => {
  bookmarkClickHandler(event);
});
jobListSearchEl.addEventListener("click", (event) => {
  bookmarkClickHandler(event); 
});
jobDetailsEl.addEventListener("click", (event) => {
  bookmarkClickHandler(event, "info");
});

export default bookmarkClickHandler;

What is use case of Backface Property ?

W3 School defines backface-visibility property as whether the back face of an element should be visible when facing the user.

I could see its effect, but I am unable to understand the use case and property itself.