DEV Community: BenjaminRoberts23505

Document Object Models

BenjaminRoberts23505 — Wed, 13 Jan 2021 22:54:45 +0000

What is DOM?

DOM stands for Document Object Model. DOM is a programming interface for HTML and XML documents. We can think of it as a way the document is represented so programs can change the document structure, style and content. We can view the DOM by going on to the console of the webpage and typing 'document'. Then we can search for what we find on the webpage or what code.

What is the query selector?

The method Query Selector returns the first element that matches a specified CSS selector(s) in the document. In the example below we specify the tag 'p' so the selector goes through the document from top to bottom searching for anything with that tag. Now whatever is in the 'p' tag will appear in the console.

Const para = document.querySelector('p');
console.log(para);

How else can we query the DOM?

There are other ways we can query the DOM when searching for elements by ID, class name, or their tag name. We can always use the console log to see what we are looking for but we are going to find it by using a method called 'getelementby___'. The extra space is for which way we are going to get it. Here is an example:

cosnt title = document.getelementbyId('page-title');
console.log(title);

const errors = documents.getelementsbyclassname('error');
console.log(errors);

const paras = document.getelementsbytagname('p');
console.log(paras);
console.log(paras[1]);

How do we add and change page content?

Here we are going to see how we can change text or things on our documents and how we can add as well. When we want to change some content on our doc we will use our query.selectorto select what we are changing. We will then select what we change by using the inner text property and set it to a new value. Check it out:

<html>
<body>

<p id="D1">I hate cheese!</p>

<script>
document.getElementById("D1").innerHTML = "I love cheese!";
</script>

</body>
</html>

How can we get and set attributes?

When we get an attribute from a document we want to set a variable to where we are getting it from and use the query selector to then get what we are setting. Here what we are going to do is set text to a link. We will use a link variable and the method setAttribute to set the link to the text. Here is how it looks:

const link = document.queryselector('a');
console.log(link.getattribute('href'));
link.setAttribute('href', 'https://www.youtube.com');

How can we change CSS styles?

When changing CSS styles we are also going to be using our Query.selector and the method setAttribute. What we are doing is inserting a piece of code into our HTML or CSS text and changing styles. Here I will show you how we select a style of a paragraph and change it:

const title = document.querySelector('p1');
title.setAttribute('style', 'margin: 50; px');

We can also see all of our properties we can use in CSS by setting our query selector in the console log. We go into our log and look at our console, there will be a big object with a list of CSS properties. Here is how it is done:

const title = document.querySelector('p1');
console.log(title.style)

How do you add and remove classes?

When adding classes we will want to use a method called add. Pretty simple right? We will write it as a class list with the add method and where we add it with our query.selector. Here is how it looks:

const content = document.queryselector('p');
console.log(content.classList);
content.classList.add('error');
content.classList.remove('error');

What are parents, children and siblings?

Parents, children and siblings represent the relationship between elements in JavaScript. In a simple HTML document with some CSS, the parent could be the body tag and the children can be the div tags. From here the siblings are the p tags as they are on the same level as the div tags. Now lets look at an example of these node relationships with the getElementBy method:

<body>
  <ul id="myList">
    <li>Example one</li>
    <li>Example two</li>
    <li>Example three</li>
    <li>Example four</li>
    <li>Example five</li>
    <li>Example Six</li>
  </ul>
</body>

<script>
var myList = document.getElementById('myList');

console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6
#How do you create and remove elements?
</script>

What are events?

Events can be things or changes that happen to HTML elements. In JavaScript we react to these elements. So basically, and event can be something the user or browser does. Examples of some HTML events would be you clicked something, the page loaded, an input box was changed or you selected a new input. We can also have event bubbling. This is the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event. So now you may ask, "well what can we do with JavaScript here?". Well we can use JavaScript to set when we interact with the page, the page reacts. Check it out:

<button onclick="displayDate()">The time is?</button>
<button onchange ="displayDate()">The time is?</button>
<button onmouseover="displayDate()">The time is?</button>

How can we add and delete elements from the DOM?

When adding or removing things using our query selector, we will always use a method. In this case, to remove elements we will use the method remove. When adding elements to our document in the DOM we will use add or create followed by what exactly we are adding. Here is an example:

var para = document.createElement("p");
var node = document.createTextNode("This is a new paragraph.");
var elmnt = document.getElementById("p1");
elmnt.remove();

How do we build a Popup?

When building a popup in JavaScript we want to start by adding our HTML and our class as popup. We also need our CSS so our popup can be stylish and look good in general. From here we are now going to use our JavaScript. We are going to use the classList and show tag to then show our popup. Here is how it should look:

<script>
var modal = document.querySelector(".modal");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");

    function toggleModal() {
        modal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
        if (event.target === modal) {
            toggleModal();
        }
    }

    trigger.addEventListener("click", toggleModal);
    closeButton.addEventListener("click", toggleModal);
    window.addEventListener("click", windowOnClick);
</script>

Conclusion

In conclusion the DOM has a wide variety of functions that range from changing up the document to adding new elements. In the DOM we can change just about anything in our document with the query.selector and the method we are going to use.

Flexbox Blog Post

BenjaminRoberts23505 — Mon, 02 Nov 2020 01:47:46 +0000

What is Flexbox?

Flex box is a CSS web layout model, it allows responsive elements to be rearranged depending on screen size. The main axis of flex has four different directions: Row, Row-reverse, Column, and column-reverse. To start using flex box we first have to define a flex container. Here we have a flex container with three flex items. We do this part in HTML.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

What is Flexbox in CSS?

Now that we have seen how to target what we want to use flexbox with, we can hop into the CSS! In CSS, flexbox has 6 container properties:

display
flex-direction
flex-wrap
flex-flow 
justify-content 
align-items
align-content

Each of these properties does their own thing. Flex-direction stacks items. Flex-wrap specifies if items should wrap or not. Flex-flow is a shorthand property for setting both the flex-direction and flex-wrap properties. Justify-content is used to align the flex items along with align-items and align-content doing the same.

In this image you can see a draft of how my partner and I are putting together a food website with flexbox by moving around recipe cards.

Basic parts

There are 5 Basic parts of Flexbox. We have main-axis which is the main axis of a flex container. Next we have main-start/main-end in which the flex items are placed and can be moved starting on the main-start and going toward the main-end side. After this one we have main-size which helps determine the width or height of the flex item. Cross-axis is the next one and it is very similar to main-axis because it is perpendicular to it. Cross-size in the width or height of a flex item.

Starting the Website

After we had our draft down we started to work on our website with some starting HTML code that consisted of Recipe-Cards. We wanted to make our website look just like our figma design so we used HTML to make Recipe-cards and then used Flexbox in CSS to move them and style them how we wanted. Here is an example of the Recipe-card:

 <div class="recipe-card">
      <img src="./Images/Croissant_2.jpg" alt="">
      <div class="recipe-info">
        The highest quality most delicious croissant!
         <a href="https://bakingamoment.com/easy-homemade-croissant-recipe/">recipe</a>
      </div>
    </div>

Once the HTML was looking crisp we had to sharpen it up with some CSS. In our CSS we use Display: Flex, Flex-direction, Flex-wrap and Align-Content Here is what is looked like in the end.

.recipe-card{
  display: flex;
  flex-direction: column;
  height: 450px;
  width: 400px;
  background-color: black;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 10px 15px;
}

After we finished putting together the CSS and HTML we added some hyperlinks that took you to a recipe page that shows you how to cook the food you clicked on. Here is the final product.

Conclusion

In conclusion Flexbox is a very good alternative to something like float where it gives you the advantage with layout. Obviously something like CSS grid is also very good for arranging things in multiple rows but for now we are only using single rows with the property justify-content, I think that Flexbox is the best way to go.