SEC S19W6 || Data type and Conditional statement

in dynamicdevs-s19w6 •  3 months ago 


Greetings to All


Hy guys, I wish you all the blessings and mercy of Almighty Allah and I hope you enjoy the beautiful days of your lives. Today I am here to participate in the Steemit Engagment Challenge Week 6 in the course of dynamics devs.I was not able to participate due to my exams in the previous three weeks.So lets move towards the way of creation of a dynamic website.

image.png

Image taken from source

image.png

Practical Questions

Create a Fibonacci series using the JavaScript loop

image.png

First task is about to display the Fibonacci series using the javascript loop. As I have not participated in the previous week task so I designed the same page to display my this week work.

Fibonacci Series

Fibonacci series is actually the series of numbers in which each number is the sum of the two preceding ones.it starts with zero and one and then each number is the sum of previous two.

Mathematically...
F(0) = 0
F(1) = 1
For n > 1, F(n) = F(n-1) + F(n-2)
so the series will begin just like in example shown below.
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...

Javascript loop

The main function of loop is actually to implement a function repetitively. In this regard there are several types of loop present in the JavaScript such as ** For loop, do ,while loop etc.

JavaScript provides several types of loops to repeat code execution:

for Loop: Ideal for situations where the number of iterations is known beforehand.
  • For....

for (initialization; condition; increment) { The functionality to repeat will apear here }

while Loop: Continues execution as long as a specified condition is true.
  • While....

while (condition) { // code to execute}

do...while Loop: Similar to while, but guarantees that the loop body is executed at least once.

do { // code to execute} while (condition);

For generating the Fibonacci series for loop is a good option.

javascript:

image.png

Javascript to create fabonacii series

Output

image.png

So this is the final execution of the code. First of all I have implemented the logic to appear the Fibonacci series. Secondly I have used the for loop of JavaScript to keep the operation running. In the input box we can give any of the number and then click on generate on to see the series.

image.png

Output

image.png

Write a JavaScript program that generate the average marks of the following students. Then, this average is used to determine the student grade. based on the criterias listed below

image.png

JavaScript

image.png
image.png

Here is the code to calculate and generate the average marks of the given student list .For now I have just generated the result of the given students marks average and their grade in the final output I have also implemented the function to add any values randomly to generate the average marks and display them. Their are basically two functions here one will calculate and input the marks and then calculate average and other will display the result. Here the final result of the given student average marks is 68.17 and the Grade is C.

Output

image.png
image.png

image.png

Iii. Create 2 functions that would solve division in one and multiplication in the other. It must have 3 parameters.

image.png

so Now we will move towards the code of division , multiplication that will use the JavaScript and take three inputs from the user then after calculation display the results. Here in my code I have added a dropdown that will switch the operations between division and multiplication and also added the addition and subtraction as well.

So Here is the code that will take three parameters and then display the result after calculations....

Javascript....

image.png
image.png

Output....

image.png

Addition

image.png

Subtraction

image.png

Multiplication

image.png

Division

So in the output you can see that I have performed different operations of division, addition, multiplication, subtraction using the JavaScript code. The code of html and CSS I will show in the End of the post.

image.png

Create object for 5 steemians with username, rep, country, position held on steemit properties.

image.png

Object is the data type to store the data and these objects are stored in the arrays. Here is the code in which I have created 5 objects for different steamians and store their data in the array and the use the display function to show the username and country of the steemians...Here you can see the code.

Javascript....

image.png
image.png

Output....

image.png
image.png

So here in output you can see the names of the steemians along with their country names. Now lets move to the next question.

image.png

Why do we need Conditional statement and how do we use them?

image.png

So here we will demonstrate about what are conditional statements and why they are necessary and also implement its example in our page..

What are conditional statments

Conditional statements are the fundamental of programming and they help to make decisions and execute different code paths according to the conditions. Conditional statements are really necessary to create the dynamic and interactive sites.

Why we need Conditional Statment....
  • It helps in the decision making based on the inputs or other conditions.

  • Allow a program to handle different scenarios based on the input of user ,environment factors or other data such that a weather app might display different messages based on messages or graphic designing whether its sunny ,rainy or cloudy...

  • It helps to improve efficiency by implementing the code or logics when necessary.

Use of Conditional Statements

  • if Statement:

Used To execute a block of code if a specified condition evaluates to true.
Syntax:
if (condition) {// Code to execute if condition is true}

  • Else statement:

To provide an alternative block of code to execute if the if condition evaluates to false.

Example

let number = -5;
if (number > 0) {
console.log("The number is positive.");
} else {
console.log("The number is negative or zero.");
}

  • else-if statment

To check multiple conditions if the initial if conditions is false.

Example

let age = 20;
if (age < 13) {
console.log("You are a child.");
} else if (age < 20) {
console.log("You are a teenager.");
} else {
console.log("You are an adult.");
}

  • Switch statment

it is executed based on the value and mostly it is used for multiple possible values..

Example

let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Weekend");
break;
}

Implementation Example JavaScript code...
image.pngimage.png
  • Output
image.png
image.png

image.png

Combining All the Code

image.png

Index.html....

image.pngimage.png
image.pngimage.png

Styles.css

image.pngimage.png
image.pngimage.png
image.pngimage.png
image.pngimage.png

Script.js

image.pngimage.png
image.pngimage.png
image.pngimage.png
Output Video

So here is the completion of my entry. Feel free to tell me if I have any mistake

image.png

So that was all from my side about the topic and I hope that you all will like to read the post and support the content

I would like to invite

to participate in the contest

Thanks for Reading
Regards @mateenfatima
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
Loading...

Thank you, friend!
I'm @steem.history, who is steem witness.
Thank you for witnessvoting for me.
image.png
please click it!
image.png
(Go to https://steemit.com/~witnesses and type fbslo at the bottom of the page)

The weight is reduced because of the lack of Voting Power. If you vote for me as a witness, you can get my little vote.

Loading...

Great job on the coding .The Fibonacci series and the average marks calculator are working well. I like you used dropdowns for different operations. The objects for Steemians looking good too. Your explanation of conditional statements is clear and helpful. Keep up the good work💖🤗🌸💞

Thanks for your valuable feedback.

Hi
Greetings to you
You present your task in a good way and use the good color combinations. Each and every part is well explained. I wish you more success. You task is appreciated .

Thanks for visit.

Hi @mateenfatima you have done a great job in explaining all the required questions. You have used your best knowledge to complete it.

You are right condition statements are used for the decision making. And it is a very important concept in the development.

All the tasks like Fibonacci series, average marks calculation and the simple calculator is working wonderful.

The array of steemians objects has also been implemented in a good way.

Wow really very nice post. You have made an amazing post with the video explanation. You have made a good design for the web view and the working of the functions is just amazing.

You have creatively integrated html CSS and JavaScript to get the best results in the form of correct outputs.

Your working and the compilation of the code is also good. Best of luck 🤞

Thanks for your valuable feedback.

You are welcome