1

I'm trying to write this piece of code in the format of a shipping address inside my paragraph element. For example.

NAME (first and last)
NUMBER STREET
CITY, STATE ZIPCODE

I'm grabbing these values from an object I was given. I'm aware that you can write template literals on multiple lines, but I've only been seeing this done with template literal strings, what about a template literal filled with literal expressions? I'm using these template literals expressions inside of a function so I can change the value of them later when I change the values of the object I'm using. I can't find anything on the internet on putting template literal expressions on multiple lines, and the only way I can seem to do this is by putting each line I want to do in a separate paragraph and adding it to the div, but it ends up being too much space in-between them. I hope I've clearly explained my problem I am having and I will appreciate any feedback and help with this, thanks. Always this is in JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags-->
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <meta name="description" content="Kenzie" />
    <meta name="author" content="Kenzie" />
    <meta name="keywords" content="Kenzie" />

    <!-- Title Page-->
    <title>Kenzie JavaScript Page</title>

    <!-- CSS-->
    <link href="style.css" rel="stylesheet" media="all" />
  </head>

  <body>
    <script src="code.js"></script>
  </body>
</html>

.card {
  margin: 10px;
  padding: 10px;
  width: 300px;
  text-align: center;
  background-color: lightgray;
}

ul {
  padding-left: 0;
  list-style: none;
}

//object
let examplePerson = {
  firstName: "Homer",
  lastName: "Simpson",
  hobbies: ["Television", "Eating Donuts", "Playing with his Kids"],
  address: {
    number: 742,
    street: "Evergreen Terrace",
    city: "Springfield",
    state: "Illinois",
    zipcode: "12345",
  },
  "favorite color": "yellow",
};

//variables
let firstInitial = examplePerson.firstName;
let lastInitial = examplePerson.lastName;
let streetNumber = examplePerson.address.number;
let streetName = examplePerson.address.street;
let cityName = examplePerson.address.city;
let stateName = examplePerson.address.state;
let zipcodeNumber = examplePerson.address.zipcode;

function renderPerson(person) {
  //create a container/div
  let div = document.createElement("div"); 
  div.classList= "card"; // adding css class to element
  document.body.append(div); 

//create shipping address
  let heading4 = document.createElement("h4");
  document.body.append(heading4);
  heading4.textContent = "Shippping Address";
  
  let p = document.createElement("p");
  document.body.append(p);
  p.textContent = `${firstInitial} ${lastInitial}
   ${streetNumber} ${streetName}
   ${cityName} ${stateName} ${zipcodeNumber}`;

  div.append(heading4);
  div.append(p);
}

renderPerson();
Ryce Yee
  • 23
  • 3
  • 2
    You're modifying the DOM and [new lines are ignored in HTML](https://jsbin.com/jokagil/edit?html,output). Either replace them with `
    ` tags, or wrap in different elements, or use a CSS rule with `white-space: pre-line;`     – VLAZ Jun 03 '21 at 09:47

0 Answers0