js.html

---
layout: default
title: Learn JavaScript
custom_css: js
---

<button id="openbtn" class="openbtn" onclick="openNav()">☰</button>

<!-- top menu -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Learn Web Dev</a>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarNav"
    aria-controls="navbarNav"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#basics">Basics, DOM & Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#cart-example">Shopping Cart Example</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Page content goes here -->
<div class="container-fluid">
  <div id="introduction" class="card">
    <div class="card-header">Introduction</div>
    <div class="card-body">
      <p>
        JavaScript is a programming language that is commonly used to add
        interactivity to websites. It can be used to create dynamic effects,
        validate forms, and manipulate HTML and CSS. In this tutorial, you will
        learn the basics of JavaScript and how to use it to enhance your
        websites.
      </p>
    </div>
  </div>
  <div class="card-deck">
    <div id="basics" class="card">
      <div class="card-header">
        <h6>JavaScript Basics</h6>
      </div>
      <img
        class="card-img-top"
        src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png"
        alt="JavaScript image"
      />
      <div class="card-body">
        <p>
          In this section, you will learn the basics of JavaScript, including
          variables, data types, operators, arrays, objects, and functions. You
          will also learn how to use conditional statements and loops to control
          the flow of your code.
        </p>
      </div>
      <div class="card-footer">
        <a href="jsbasics.html" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div id="events" class="card">
      <div class="card-header">
        <h6>JavaScript Events</h6>
      </div>
      <img
        class="card-img-top"
        src="https://blog.hubspot.com/hs-fs/hubfs/registration%20form%20template%20by%20W3Docs.png?width=600&name=registration%20form%20template%20by%20W3Docs.png"
        alt="JavaScript events image"
      />
      <div class="card-body">
        <p>
          JavaScript events are actions that can be detected by your web page,
          such as button clicks, mouse movements, and keyboard input. In this
          section, you will learn how to create interactive web pages that
          respond to user input.
        </p>
      </div>
      <div class="card-footer">
        <a href="events.html" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div id="dom" class="card">
      <div class="card-header">
        <h6>Document Object Model (DOM)</h6>
      </div>
      <img
        class="card-img-top"
        src="https://cdn.pixabay.com/photo/2016/03/27/18/54/technology-1283624_960_720.jpg"
        alt="DOM image"
      />
      <div class="card-body">
        <p>
          The Document Object Model (DOM) is a programming interface for HTML
          and XML documents. It represents the page so that programs can change
          the document structure, style, and content.
        </p>
      </div>
      <div class="card-footer">
        <a href="dom.html" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    <div id="faq" class="card">
      <div class="card-header">
        <h6>JavaScript FAQ</h6>
      </div>
      <img
        class="card-img-top"
        src="https://www.smtusa.com/uploads/faqs.jpg"
        alt="FAQ"
      />
      <div class="card-body">
        <p>
          Some of the frequently asked JavaScript questions for your reference.
        </p>
      </div>
      <div class="card-footer">
        <a href="challenges.html" class="btn btn-primary">Learn More</a>
      </div>
    </div>
  </div>
  <h1 id="cart-example">My Shopping Cart</h1>
  <div class="row">
    <div class="col-md-8">
      <h2>Products</h2>
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img
              class="card-img-top"
              src="https://via.placeholder.com/150x150.png"
              alt="Product 1"
            />
            <div class="card-body">
              <h5 class="card-title">Product 1</h5>
              <p class="card-text">&#8377;10</p>
              <button
                class="btn btn-primary add-to-cart"
                data-name="Product 1"
                data-price="10"
              >
                Add to Cart
              </button>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img
              class="card-img-top"
              src="https://via.placeholder.com/150x150.png"
              alt="Product 2"
            />
            <div class="card-body">
              <h5 class="card-title">Product 2</h5>
              <p class="card-text">&#8377;20</p>
              <button
                class="btn btn-primary add-to-cart"
                data-name="Product 2"
                data-price="20"
              >
                Add to Cart
              </button>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img
              class="card-img-top"
              src="https://via.placeholder.com/150x150.png"
              alt="Product 3"
            />
            <div class="card-body">
              <h5 class="card-title">Product 3</h5>
              <p class="card-text">&#8377;30</p>
              <button
                class="btn btn-primary add-to-cart"
                data-name="Product 3"
                data-price="30"
              >
                Add to Cart
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <h2>Cart</h2>
      <table class="table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody id="cart-body"></tbody>
        <tfoot>
          <tr>
            <td colspan="3" align="right">Total:</td>
            <td colspan="2" id="cart-total">&#8377;0</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>
<footer class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Learn Web Dev</a>
  <div class="container footer-text text-white">
    © 2023 Made with 🤍 by Vikas Bandaru
  </div>
</footer>

<a href="#top" id="up-arrow"
  ><img
    class="uparrow"
    src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-512.png"
    alt="Up Arrow"
/></a>
<script src="assets/js/cart.js"></script>