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
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
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;
}
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.
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.
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;
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.
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;
}
As we can have only 1 body tag, may I know the purpose of adding a class named “body” in body tag.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.