Initial commit: Add repository description and usage instructions

mouraleonardo · Oct 16, 2024 · 515a7bd · 515a7bd
1 parent 4c177eb
commit 515a7bd
Show file tree

Hide file tree

Showing 17 changed files with 3,743 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,72 @@
-# webprogrammingprinciples
-This repository provides examples for the Web Programming Principles course, focusing on JavaScript ES6 concepts like arrow functions, promises, modules, and destructuring. It also includes practical usage of HTML, CSS, DOM manipulation, AJAX, and JSON to help students apply core programming principles and build modern, dynamic web applications.
+# Welcome to the **Web Programming Principles** Repository!
+
+This resource is designed for students to explore core programming principles and modern web development using JavaScript ES6, HTML, CSS, DOM, AJAX, and JSON. It includes practical examples of ES6 features and essential web technologies to build dynamic web applications.
+
+## Description
+
+This repository contains several examples that cover JavaScript ES6 features and essential web development topics such as:
+
+- Introduction to JavaScript syntax
+- Arrow functions
+- Object-Oriented Programming (OOP) with classes
+- Promises for asynchronous code
+- Destructuring assignment
+- JavaScript modules
+- HTML fundamentals, forms, and media
+- DOM manipulation
+- And more!
+
+Each example is labeled as `example<number>.html` (e.g., `example1.html` for Introduction to JavaScript), corresponding to different lessons. This structure allows you to easily follow along with the course and build a solid understanding of JavaScript and web programming concepts.
+
+## How to Use
+
+To run and open the examples, follow these steps:
+
+1. **Clone the repository** to your local machine:
+   ```bash
+   git clone https://github.com/mouraleonardo/webprogrammingprinciples.git
+
+2. Navigate to the repository folder:
+
+    ```bash
+    cd webprogrammingprinciples
+
+3. **Open an example file in your browser:**
+
+Each example is located in a separate HTML file. Simply double-click the `example<number>.html` file you want to run, or open it directly through your browser.
+
+**Example**: To view the example for lesson 1, open the file `example1.html`.
+
+4. **Run JavaScript code in the browser console:**
+
+You can open your browser's developer tools (press `F12` or `Ctrl+Shift+I` in most browsers) to view the console and check the JavaScript output of each example.
+
+---
+
+### Example Files:
+
+- `example1.html`: Introduction to JavaScript and basic syntax.
+- `example2.html`: Understanding ES6 arrow functions.
+- `example3.html`: Javascript OOP working with classes.
+- `example4.html`: Working with promises for asynchronous code.
+- `example5.html`: Destructuring assignment for arrays and objects.
+- `example6.html`: Modules in JavaScript.
+- `example7.html`: HTML fundamentals.
+- `example8.html`: HTML Forms.
+- `example9.html`: HTML 5.
+- `example10.html`: HTML Tables Tutorial.
+- `example11.html`: HTML Media Tutorial.
+- `example12.html`: HTML vs XHTML.
+- `example13.html`: HTML Element Reference.
+- `example14.html`: Interactive Document Object Model (DOM) Programming Tutorial
+- ... more to be added as the course progresses.
+
+---
+
+## Prerequisites:
+
+To make the most of these examples, you will need:
+
+- A modern web browser (e.g., Chrome, Firefox, or Edge) to run the HTML/JavaScript files.
+
+- Basic knowledge of JavaScript and web development (HTML, CSS).
diff --git a/example1.html b/example1.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Introduction to JavaScript</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 600px;
+            margin: auto;
+        }
+        input {
+            margin: 10px 0;
+            padding: 8px;
+            width: calc(100% - 20px);
+        }
+        button {
+            padding: 8px 12px;
+        }
+        .output {
+            margin-top: 10px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h1>Introduction to JavaScript</h1>
+    <p>JavaScript is a versatile programming language primarily used for web development. It allows developers to create dynamic and interactive web pages. Here, we'll explore some basic syntax and write functions to solve common problems.</p>
+
+    <h2>Basic Syntax</h2>
+    <p>JavaScript syntax is the set of rules that define a correctly structured JavaScript program. Below are some fundamental components:</p>
+    <ul>
+        <li><strong>Variables:</strong> Used to store data values. Declared using <code>let</code>, <code>const</code>, or <code>var</code>.</li>
+        <li><strong>Functions:</strong> Blocks of code designed to perform a specific task. They can be defined using the <code>function</code> keyword.</li>
+        <li><strong>Conditional Statements:</strong> Allow you to perform different actions based on different conditions using <code>if</code>, <code>else</code>, and <code>switch</code>.</li>
+        <li><strong>Loops:</strong> Used to execute a block of code repeatedly using <code>for</code>, <code>while</code>, or <code>do...while</code>.</li>
+    </ul>
+
+    <h2>Problem Solutions</h2>
+
+    <h3>Problem 1: Calculate the Factorial of a Number</h3>
+    <input type="number" id="factorialInput" placeholder="Enter a number" />
+    <button onclick="calculateFactorial()">Calculate Factorial</button>
+    <div class="output" id="factorialOutput"></div>
+
+    <h3>Problem 2: Check if a String is a Palindrome</h3>
+    <input type="text" id="palindromeInput" placeholder="Enter a string" />
+    <button onclick="checkPalindrome()">Check Palindrome</button>
+    <div class="output" id="palindromeOutput"></div>
+
+    <h3>Problem 3: Return the Larger of Two Numbers</h3>
+    <input type="number" id="number1Input" placeholder="Enter first number" />
+    <input type="number" id="number2Input" placeholder="Enter second number" />
+    <button onclick="findLargerNumber()">Find Larger Number</button>
+    <div class="output" id="largerNumberOutput"></div>
+</div>
+
+<script>
+    // Function to calculate the factorial of a number
+    function calculateFactorial() {
+        // Get the input value
+        let number = parseInt(document.getElementById('factorialInput').value);
+        let result = factorial(number); // Call the factorial function
+        document.getElementById('factorialOutput').innerText = `Factorial of ${number} is ${result}`;
+    }
+
+    /**
+     * Function to calculate the factorial of a number.
+     * @param {number} n - The number for which to calculate the factorial.
+     * @returns {number|string} - The factorial of the number or an error message for invalid input.
+     */
+    function factorial(n) {
+        if (n < 0) return "Factorial not defined for negative numbers"; // Factorial is not defined for negative integers
+        if (n === 0) return 1; // The factorial of 0 is 1
+
+        let result = 1; // Initialize result to 1
+        for (let i = 1; i <= n; i++) { // Loop from 1 to n
+            result *= i; // Multiply result by the current number i
+        }
+        return result; // Return the final result
+    }
+
+    // Function to check if a string is a palindrome
+    function checkPalindrome() {
+        // Get the input value
+        let str = document.getElementById('palindromeInput').value;
+        let result = isPalindrome(str); // Call the palindrome check function
+        document.getElementById('palindromeOutput').innerText = result ? `"${str}" is a palindrome.` : `"${str}" is not a palindrome.`;
+    }
+
+    /**
+     * Function to check if a string is a palindrome.
+     * @param {string} str - The string to check.
+     * @returns {boolean} - True if the string is a palindrome, false otherwise.
+     */
+    function isPalindrome(s) {
+        // Normalize the string: remove non-alphanumeric characters and convert to lowercase
+        let normalizedStr = s.replace(/[\W_]/g, '').toLowerCase();
+        // Check if the string is the same forwards and backwards
+        return normalizedStr === normalizedStr.split('').reverse().join('');
+    }
+
+    // Function to find the larger of two numbers
+    function findLargerNumber() {
+        // Get the input values
+        let num1 = parseFloat(document.getElementById('number1Input').value);
+        let num2 = parseFloat(document.getElementById('number2Input').value);
+        let result = getLargerNumber(num1, num2); // Call the function to find the larger number
+        document.getElementById('largerNumberOutput').innerText = `The larger number is ${result}`;
+    }
+
+    /**
+     * Function to return the larger of two numbers.
+     * @param {number} a - The first number.
+     * @param {number} b - The second number.
+     * @returns {number} - The larger of the two numbers.
+     */
+    function getLargerNumber(a, b) {
+        return a > b ? a : b; // Return the larger number using a conditional (ternary) operator
+    }
+</script>
+
+</body>
+</html>