Code with Charles

Shout out to my newest followers! Excited to have you onboard! Chảo Bánh Nguyễn, Vusiswa Vuyo Khz, Ismail Isah, Joefer Arceño, Dada Jamali, Ashikur Rahman, Shabbz Morriz, ادم مختار, Faraz Hussain Mahar, Alif Mahmud, Lance Rankin, Matthew Markle, Faith Asamoah, Hubet Cárdenas Isla, Ìtz ẞrãìñ Õñtøp, Tang Kea Tuy, M Hussain Malik, Salva Trucha

Big shout out to my newest top fans! Ict Coding

Shout out to my newest followers! Excited to have you onboard! Abdulqadr Mohammadyasin, Nushrat Farjana, Md Walid Jamader, Elvis Agada, Satish Gautam, Dhî Yyâh, Jeon Dhoha, Amine Mehri

Shout out to my newest followers! Excited to have you onboard! Dine Houari, Mahider Asrat, Eelie Raachel Nganga, Aisosa Albert, Aakif Manahil, David Akinlabi, Alex Nyagah, Chee Chen, Mado Ngwe, Tobi Dickson, Leviticus Snr, M Babar, Taira Tarin, Denis Kipyegon, Blend Gashi, Abba Tee Net, Nizar Najjar, Salim Aminu, Koroma Anthony, Dairy De Cracker, Salim

Shout out to my newest followers! Excited to have you onboard! Rahmat Ullah Baheer, Ibrahim Ali, Phyllis Mwangi, Moman Khan, Ani Ket, هلال ننګرهاری, Adamu Alasan Kiri, Əl Møģhňî, Moony Khan, Abraham Boluwatife, Jair Noble, Kibrom Bahre, Said Adil Pacha, ভোরের মানব, Abrham Gezae, Gojo Saturo, Ian Ian

Big shout out to my newest top fans! Alexander Akranza, Tonny Tonny

Shout out to my newest followers! Excited to have you onboard! Marius Cristian, Halle Alex

JS - Day 06

NOTE: DO ALL 'Try it Yourself>>' ON W3SCHOOLS FOR DEEP LEARNING!!!

Topic to Study:

1. Select options Collection
https://www.w3schools.com/jsref/coll_select_options.asp

2. HTML DOM Element getAttribute()
https://www.w3schools.com/jsref/met_element_getattribute.asp

3. JavaScript parseFloat()
https://www.w3schools.com/jsref/jsref_parsefloat.asp

4. Input Text value Property
https://www.w3schools.com/jsref/prop_text_value.asp

5. JavaScript Number toFixed()
https://www.w3schools.com/jsref/jsref_tofixed.asp

Mini Project

Day 06 mini project creates a simple Fruit Shop. User will select a fruit from 3 options and enter the desired quantity in kg. Clicking the button will calculate the total cost.

Let's go through the code step by step:

HTML Body

Fruit Shop

Select a fruit:

Apple ($2/kg)
Orange ($2.5/kg)
Banana ($1.5/kg)

Enter weight (kg):

Calculate Total



HTML Body
Heading: element displaying "Fruit Shop".

Form:
contains the elements for selecting fruit and entering weight.

Label and Select for Fruits:
Select a fruit: is associated with the fruit dropdown.

contains elements with value and data-price attributes. The data-price attribute holds the price per kg.

Label and Input for Weight:
Enter weight (kg): is associated with the weight input.

is an input field where the user can enter the weight. The step="0.5" attribute means the input will increase/decrease by 0.5 kg.

Button:
Calculate Total is a button that, when clicked, calls the calculateTotal() function.

Total Cost Display: will display the calculated total cost.

JavaScript

function calculateTotal() {
let fruitSelect = document.getElementById("fruitSelect");
let selectedOption = fruitSelect.options[fruitSelect.selectedIndex];
let pricePerKg = parseFloat(selectedOption.getAttribute("data-price"));
let weightInput = parseFloat(document.getElementById("weightInput").value);

let totalCost = pricePerKg * weightInput;
document.getElementById("totalCost").innerText =
"Total Cost: $" + totalCost.toFixed(2);
}


Function calculateTotal():

Get selected fruit and its price:
let fruitSelect = document.getElementById("fruitSelect"); gets the fruit select element.

let selectedOption = fruitSelect.options[fruitSelect.selectedIndex]; gets the selected option.

let pricePerKg = parseFloat(selectedOption.getAttribute("data-price")); retrieves the data-price attribute and converts it to a float.

Get entered weight:
let weightInput = parseFloat(document.getElementById("weightInput").value); gets the weight input value and converts it to a float.

Calculate total cost:
let totalCost = pricePerKg * weightInput; calculates the total cost.

document.getElementById("totalCost").innerText = `Total Cost: $ ${totalCost.toFixed(2)}`; sets the text of the totalCost div to display the formatted total cost.

Replit link:
https://replit.com//js006 .js

JS - Day 05

Topic to Study:

1. JavaScript Template Strings
https://www.w3schools.com/js/js_string_templates.asp

2. JavaScript Arrays
https://www.w3schools.com/js/js_arrays.asp

3. JavaScript Array forEach()
https://www.w3schools.com/jsref/jsref_foreach.asp .tab=0

Mini Project

Day 05 mini project creates a simple interface with three clickable letters (J, A, and Y) and a message that updates dynamically to show which letter was clicked.

Let's break down the JavaScript code within the tag:

1. const letters = document.querySelectorAll(".letter");: This line selects all elements with the class "letter" and stores them in the letters variable. This variable will contain a NodeList of all the letter elements in the document.

2. const message = document.querySelector(".message");: This line selects the element with the class "message" and stores it in the message variable. This variable will contain a reference to the message element in the document.

3. letters.forEach((letter) => { ... });: This code iterates over each letter element in the letters NodeList using the forEach method. For each letter element, it executes the code inside the callback function.

4. letter.addEventListener("click", (e) => { ... });: This code adds a "click" event listener to each letter element. When a letter element is clicked, the callback function is executed.

5. message.innerText = You clicked letter ${letter.textContent};: This line updates the text content of the message element to display a message indicating which letter was clicked. It uses template literals to dynamically insert the text content of the clicked letter element (letter.textContent) into the message string.

In summary, this JavaScript code adds a click event listener to each letter element. When a letter is clicked, it updates the message element to display which letter was clicked.

Replit link:
https://replit.com//js005 .html