Theory
Theory
Comments

Script to start!

Muffin took several orders from online stores and is going to drop by to see you soon and give you some tasks to do. While the Boss is on the way, we’ll figure out how to enable the scripts on the page.

Before that, we wrote programs that were not related to the interface of the site. It won’t work for an online store, because here you have to manipulate the elements on the page. To do this, you need to enable your code correctly.

You can add scripts to a page using the <script> tag in two ways:

Inline code. The code is written inside the <script> tag.

<body>
  …
  <script> console.log('I’m an inline script');</script>
</body>

External file with a code. Attribute src is added to the <script> tag, and in this attribute, the path to the file with the script is specified.

<body>
  …
  <script src="script.js"></script>
</body>

Note that these two methods cannot work together. If the src attribute is specified for the <script> tag, the inline code is ignored and not executed, that’s why it must be in another <script>.

<body>
  …
  <!-- Inline script cannot talk about itself -->
  <script src="script.js">console.log('I’m an inline script');</script>

  <!-- Entire console listens to inline script -->
  <script src="script.js"></script>
  <script>console.log('I’m an inline script');</script>
</body>

Scripts are executed as you enable them on the page. If the script tag is followed by markup, it will not be rendered until the script is executed (in the case of an inline code) or until it is loaded from an external resource and executed (when an external file is enabled).

Therefore, we will connect the script before the closing <body> tag, this way we will be sure that all markup is displayed on the page and that we can work with it.

To better understand what will happen next, we recommend taking course on HTML and CSS.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Catalog | Technomart</title> <link rel="stylesheet" href="technomart/setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="products"> <li class="product"> <h2 class="product__title">Combination pliers “Superhook”</h2> <img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Combination pliers “Superhook”"> <p class="product__price">800 ₽</p> </li> <li class="product"> <h2 class="product__title">Screwdriver “Philly”</h2> <img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Screwdriver “Philly”"> <p class="product__price">550 ₽</p> </li> <li class="product"> <h2 class="product__title">Pliers “Copernicus”</h2> <img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Pliers “Copernicus”"> <p class="product__price">1,350 ₽</p> </li> <li class="product"> <h2 class="product__title">Puncher “Hello, neighbor!”</h2> <img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Puncher “Hello, neighbor!”"> <p class="product__price">7,500 ₽</p> </li> <li class="product"> <h2 class="product__title">Hammer “Mjöllnir”</h2> <img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Hammer “Mjöllnir”"> <p class="product__price">2,000 ₽</p> </li> </ul> </body> </html>

CSS

.product { position: relative; display: flex; flex-direction: column; align-items: center; width: 220px; margin-bottom: 20px; text-align: center; border: 1px solid #cccccc; } .product--available::before { content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; padding: 5px; background-image: url("technomart/check.svg"); background-repeat: no-repeat; background-position: center; background-size: 18px; border: 1px solid #4eb543; border-radius: 50%; } .product--unavailable { filter: grayscale(1) opacity(0.7); } .product--unavailable::before { content: "Out of stock"; position: absolute; top: 0; left: 0; padding: 5px; font-size: 14px; } .product--special { flex-basis: 100%; order: -1; border-color: #ee3643; } .product--special::after { content: "Product of the day"; position: absolute; top: 0; right: 0; height: 30px; padding-right: 10px; padding-left: 10px; line-height: 30px; color: #ffffff; background-color: #ee3643; }

JavaScript

// document.body.style.background = 'rgba(48, 213, 200, .3)';

Click inside the mini browser to put the focus in this window.

Goalscompleted

Add script.js to the page before the closing </body> tag.
Uncomment the code in the “script.js” tab.

Script to start!

Comments

Log in

Sign up

Restore access