abbymachine #3

i am finally understanding basic facts about how CSS and HTML function together. it looks like you can have a class for anything in your CSS file? and then you can attach that class to any element within your HTML file? i think that's how it works. it looks too like you can manipulate these classes using javascript. the button-pressing functionality on this page is written out using javascript. here is what is in the javascript so far:

document.querySelector(".button1").addEventListener("click", () => {
  document.querySelectorAll(".hidden").forEach((item) => {
    item.classList.toggle("showing");
  });
    });

    document.querySelector(".button2").addEventListener("click", () => {
  document.querySelectorAll(".hidden2").forEach((item) => {
    item.classList.toggle("showing2");
  });
  });

    document.querySelector(".button3").addEventListener("click", () => {
  document.querySelectorAll(".hidden3").forEach((item) => {
    item.classList.toggle("showing3");
  });
  });

each of the buttons here are defined by classes in the CSS that are then called in the javascript. these are "button1", "button2", "button3". clicking those buttons toggles between CSS classes representing the "hidden" and the "showing" versions of each section on this page. the "hidden" classes ("hidden1", "hidden2", etc), which are set as the initial class for each section in the HTML, are styled in the CSS to not display any content. likewise, the "showing" classes that the buttons toggle to are each styled in the CSS file. these ones are distinct: one of the "showing" classes displays a blue box with yellow text, while another shows text in a red/orange/purple gradient, and another displays in a plain black serif (Georgia if your browser supports it).

i hope you understand and accept that this project is, in large part, a notebook for my self-education in programming and web development. i wanted to read a bunch of books and watch a bunch of videos, and i have been doing that. the button functionality on this page came from a video on LinkedIn Learning about the basics of web development. it is fun to read and to listen, but it is important to get directly involved in the process of writing and debugging code.

return to abbymachines.art/A/abbymachine #2

abbymachine #3