Skip to content
OverviewSolutions
12
Comments
11

Kenpachi-bit

@Kenpachi-bit200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Kenpachi-bit•200
    @Kenpachi-bitPosted about 2 months ago

    fantastic absolutely amazing

    0
  • Kenpachi-bit•200
    @Kenpachi-bitPosted 2 months ago

    fantastically done

    0
  • Kenpachi-bit•200
    @Kenpachi-bitPosted 2 months ago

    well attempted however the height and placement of the cards' content needs some work

    0
  • Enoch Mwanga•290
    @enochmwangaSubmitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    Updating the states in case of invalid email input. This was solve by modifying the class names using JavaScript.

    What specific areas of your project would you like help with?

    Any suggestion for further improvement is welcome.

    Newsletter Sign up form using HTML, CSS and JavaScript

    1
    Kenpachi-bit•200
    @Kenpachi-bitPosted 2 months ago

    The main card was done ok(needs some minor alterations on the email input to look closer the original), however the design on mobile may need a bit more work to look closer to the one presented in the documents

    0
  • Ghozy•250
    @Ghozy165Submitted 2 months ago
    What specific areas of your project would you like help with?

    need help for using JS to change CSS style and change icon color correctly?

    Article Preview Component

    2
    Kenpachi-bit•200
    @Kenpachi-bitPosted 2 months ago

    while the desktop version is alright, the mobile version is lacking specifically with the share section. I would suggest using event listeners within Javascript to add and remove classes and allow for CSS editing, below is a snippet of my JS code

    let shareButton = document.querySelector(".share-icon-container");
let footer = document.querySelector(".profile");
let container = document.querySelector("main");
let deskTooltip = document.querySelector(".desktop-share");
const head = document.querySelector("h1");


let containerLength = container.offsetWidth;


deskTooltip.classList.add("invisible");


window.addEventListener("resize", () => {
  containerLength = container.offsetWidth;
  if (containerLength > 340) {
    footer.classList.remove("dark");
    
  }

  if (containerLength <= 340) {
    deskTooltip.classList.add("invisible");
  }
});

shareButton.addEventListener("click", () => {
  if (containerLength <= 340) {
  
    if (footer.classList.contains("dark")) {
      footer.classList.remove("dark");
      console.log("removed");
    } else {
      footer.classList.add("dark");
      console.log("added");
    }
  } else if (containerLength > 340) {
    footer.classList.remove("dark");
    deskTooltip.classList.toggle("invisible");
  }
});

    the CSS styles can be added within CSS and be toggled in Javascript, I suggest using display:none for elements you want removed within your html. With regards to the share icon, I was also unable to change its color. Apologies if this explanation is a bit confusing I also had some difficulty with this exercise until I figured it out

    Marked as helpful
    0
  • Kenpachi-bit•200
    @Kenpachi-bitPosted 2 months ago

    Well attempted however the site lacks responsive elements especially for mobile screens

    0
View more comments