Code Monkey home page Code Monkey logo

professional-javascript-course's Issues

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.

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

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;

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

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

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

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.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.