DEV Community: Hamza Elkotb

Open source JavaScript Quiz App

Hamza Elkotb — Tue, 25 Jul 2023 20:51:30 +0000

Last days I was applying on JS by making some JS tutorials. I started building a simple Quiz App using vanilla js. I decided to make it open-source so any js developer can contribute to it on github or learn new things from it.

Features

The project contains the following features:

Beautiful UI
Responsive UI
Quiz page
Results Page
Basic quiz app features:
- next\previous btns
- move between questions
- choose answer
- timer
- submit btn
- question points
- number of questions
- see results

Logic

Quiz content is rendered from JSON file - to HTML page - that will contain every thing (time, questions, options, true answers ...etc) using API fetch. "Simulating calling quiz data from server"
The answers will be putted in a new JSON file - Copy of the Quiz JSON file - that will be sent to another html page - called results.html - where the answers file will be rendered in it with the same quiz data.
The Answers JSON will be sent to the results Page using postMessage and message EventListener. then rendered.

NOTE: the only different between Quiz JSON and Answers JSON, is that the answers JSON will includes the user answers.

Last Note: This project is completely built on FP (Functional Programming) Concept. I'll continue developing it from time to time and improve the code and make it cleaner.

Finally

This project is completely open-source, under MIT license. You can contribute on it and learn from each others.

👉 Source Code: https://github.com/HamzaElkotp/Quiz-Answers_Project
🌐 Live Preview: https://quizanswersproject.netlify.app/quiz.html
🐱 My GitHub: https://github.com/HamzaElkotp
👕 To get Coding Shirts: https://my-store-c54a10.creator-spring.com/

Understanding Generators in JavaScript with examples

Hamza Elkotb — Sun, 09 Oct 2022 18:21:36 +0000

First of all: what is Generators in js?🤔

Generators are functions.
Generator Function Run Its Code When Required.
Generators Are iterables.
It doesn't run unless you need it.
Generator Function Return Special Object [Generator Object].
That Object can loop on generator function data.

❗NOTE: The data is present but when the function run, it generates the data.

Briefly:

Generators functions are different from normal function it doesn't run until you need it, they are iterable & return special object.

Example from real live:

like tickets generator device, when you pay it generates new serial number and print on new ticket then you get it, Here serial number already exists but it didn't print until get order to create a new ticket.

Generators Methods:

next() to get next yield.
return() to return a value & stop generating.
throw() to throw an error & stop generating.

Generators properties:

done if iteration done or not, return boolean value.
value current yield value.

Syntax:

function* generatorName(){
}

Now you can put in it any JS code and also can add the data that want to generate and we'll see how in next paragraph👇.

Yield Data | Data Production Process

Yield keyword used to data production process, and then you can loop on it using next() with Generator Object.

so you use yield keyword and put it's value.

function* generatorName(){
  yield "hello";
  yield "bye";
  yield 1;
  yield 2;
}

you can put any type of data (boolean, object...)

lets try Looping on Generator function Yields🔃

for (let i of generateNums()){
  console.log(i);
}

the output will be:
"hello"
"bye"
1
2
this also what next() method does!

Create Generator Object🏭

let generator = generatorName();

lets see something will make this clear to you💯
lets check typeof

console.log(typeof generator); // object
console.log(typeof generatorName); // function
console.log(generator); // Object: Generator {...}

next method | Accessing Yields

It returns value & done state

console.log(generator.next()); // Object { value: "hello", done: false }
console.log(generator.next()); // Object { value: "bye", done: false }
console.log(generator.next()); // Object { value: 1, done: false }
console.log(generator.next()); // Object { value: 2, done: false }

As you note every time you use next() method, it returns the next yield and can't undo this action.⏩

Now we looped on all yields, if we use next() again guess what we'll happen!🤔

console.log(generator.next()); // Object { value: undefined, done: true }

yes, it returned value: undefined that's because there is no more yield to access, also you'll find done: true because loop is over.

value property:

Use it with next() method to get the current yield value.

console.log(generator.next().value); // undefined

I want you to think why it returned undefined.🤔
I'll be 😊 if you answered it true in comments.

done property:

console.log(generator.next().done); // true

return & throw Methods | Controlling yield process

1- return

Use return method to stop yielding process, making done:true & value: undefined also you can return a custom value.
Let's see an example😬

these are our generator function & generator object:

function* letter(){
  yield "A";
  yield "B";
  yield "C";
}
let gen2 = letter();

also we can access normally:

console.log(gen2.next()); // Object { value: "A, done: false }
console.log(gen2.next()); // Object { value: "B", done: false }

Now if we used return method this is what will happen

console.log(gen2.return()); // Object { value: undefined, done: true }

As you noticed we still have one yield we didn't access it before, plus if you used next() method again you'll get { value: undefined, done: true }.
that is what return is here to do!

also you can return any value, by putting it between ()

console.log(gen2.return("visit youtube.com/devcoder"));

now output will change to { value: "visit youtube.com/devcoder", done: true }.

2- throw

It's like return() method, but it throws custom errors like throw keyword.

let gen3 = letter();
console.log(gen3.next()); // Object { value: "A, done: false }
console.log(gen3.throw("Hi coder!")); // Error: Uncaught Hi coder!
console.log(gen3.next()); // not working

❗NOTE: throw() method doesn't stop your code, just stop the generator object.

Use Case: for example we have a generator function to generate random numbers, if that number is duplicated, it throws error.

Loop on generator yields

if we tried to loop through gen2 no output will appear

for (let i of gen2){
  console.log(i);
}

that's because we already accessed gen2 in past examples, so will create new generator object and loop though

let gen4 = letter()
for (let i of gen4 ){
  console.log(i);
}

try that, will work.✅

Generate Infinite Numbers

function* infinity(){
  let index = 0
  while(true){
    yield index++
  }
}
let inf = infinity();

Now as you see we're able to add normal JS code inside generator function,
1- when inf visit infinity() for first time index = 0 and will enter the infinite loop and will not exit
2- in loop, every time we use next(), index will increment and yield will equal the new index value.

NOW, let's use next() on it

console.log(inf.next()); // Object { value: 0, done: false }
console.log(inf.next()); // Object { value: 1, done: false }
console.log(inf.next()); // Object { value: 2, done: false }
console.log(inf.next()); // Object { value: 3, done: false }
...

🔴IMPORTANT

yield*

What is deference between yield & yield*, the answer will be clear if we try it with an array.👇

function* GeneAll(){
  yield* [4,5];
  yield [6,7];
}

let gen754 = GeneAll()

Now let's try to access for one time

console.log(gen754.next()); // Object { value: 4, done: false }

as you noticed it returned only the first element from our array.
let's try again!

console.log(gen754.next()); // Object { value: 5, done: false }

Now it returned the second element.
let's try again!

console.log(gen754.next()); // Object { value: [6,7], done: false }

But now it returned the full array, why???🤯

the yield* treat value as individual elements, so it converts the array value into more small values, but yield doesn't do this.
The same thing applies to string!

Delegate Generator Function | (Generator Function Chaining)

it's a function that delegate another function yield

take an example🎴

function* nums(){
  yield 1;
  yield 2;
  yield 3;
}

function* letter(){
  yield "A";
  yield "B";
  yield "C";
}

function* AllYields(){
  yield nums(); // without starter"*" will return the name of function
  yield* nums(); // this will include an array contains all nums() yields
  yield* letter()
  yield [6,7]; // without starter"*" it'll return an array
}

let gen55 = AllYields()

Let's see what will happen in first next()

console.log(gen55 .next()); // Object { value: Generator, done: false }

as you saw it returned the function name

console.log(gen55.next()); // Object { value: 1, done: false }
console.log(gen55.next()); // Object { value: 2, done: false }
console.log(gen55.next()); // Object { value: 3, done: false }

What happened behind the since?🤯
1- gen55 will go to every yield and enter it to access all data in it.
2- it will find that first yield without * and contains a generator function nums().
3- will return it's name.
4- after that gen55 will go to next yield "yield* nums()" with * so, will go through it.
5- it will find that it contains other yields so, will go through every yield and return it on every next() method call until it end accessing all nums() yields.
6- and now it went through out our second yield "yield* nums()" .
7- Then go to next yield in AllYields() and repeat the same process etc...

Conclusion

This was all what I know about generators in javascript, I hope you enjoyed with this article and learned a new thing,
I'll be happy for that.
If you have any notes about this article or new information tell me about in comments.
Follow me on YouTube , GitHub .
For Coding T-shirts visit: CodingShirts .
And don't forget to read these references👇.
See you again, Bye👋

References

MDN: Generator
MDN: function*
MDN: Iterators and generators
digitalocean: understanding generators in JS
JavaPoint: ES6 Generators

Booking List📅Tutorial Using DOM {JavaScript}

Hamza Elkotb — Fri, 08 Apr 2022 20:54:04 +0000

This simple tutorial will be a simple exercise about JavaScript DOM,
I'll use:

HTML
CSS => Bulma or any css framework toin bulma make styling easy
JS => DOM

What is DOM?

(Document Object Model) is an interface that allows developers to manipulate the content, structure and style of a website.

📁Starting Up Project

HTML File
JavaScript File

📙HTML

Main HTML Structure

<html dir="ltr" lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS BookList App</title>
</head>

<body class="container">

</body>

</html>
<script src="javascript.js"></script>

HTML head: adding Bulma CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

HTML Body: creating form

create a form and add id to can select it using js DOM easily to get inputs value.
create 2 inputs: one to get the full name and other to get phone number.
every input has a name to can select it in js DOM.
every input above it there is a label.
after every input there is a paragraph that contains input instructions with .help class.
create select to select the destination.
adding select options with values to can read it in js DOM.
creating submit button that check if the inputs are filled then get values from them.

<form action="" class="form" id="bookForm">
    <!-- Name Input -->
    <label class="label">Full Name</label>
    <div class="control">
        <input class="input is-success" type="text" placeholder="Firts name" name="Fname">
    </div>
    <p class="help is-success">Enter Your Full Name in Your ID Card</p>

    <!-- Phone Input -->
    <label class="label">Phone Number</label>
    <div class="control">
        <input class="input is-success" type="text" placeholder="Firts name" name="Pnum">
    </div>
    <p class="help is-success">Enter Your Phone Number</p>

    <!-- Destination Select -->
    <label class="label">Destination:</label>
    <div class="control">
        <div class="select">
            <select>
                <option value="KSA: Mekka">KSA: Mekka</option>
                <option value="KSA: Ryahd">KSA: Ryahd</option>
                <option value="Egy: Cairo">Egy: Cairo</option>
                <option value="Egy: Sharm Elshek">Egy: Sharm Elshek</option>
                <option value="USA: Area 51">USA: Area 51</option>
            </select>
        </div>
    </div>

    <!-- Form Submit -->
    <button class="button is-success is-fullwidth">Submit</button>
</form>

Result:

HTML: creating result box

will contain a table that contains the submitted data
contain clear button to remove all table data
adding "res" class

<div class="res">

</div>

HTML {result box}: creating table

style using Bulma classes

<table class="result table is-fullwidth is-bordered is-striped is-narrow is-hoverable is-success">

</table>

HTML {result box}: adding table thead

style using Bulma classes
adding main columns

<thead class="has-background-success">
    <tr>
        <th>Full Name</th>
        <th>Phone Number</th>
        <th>Destination</th>
    </tr>
</thead>

HTML {result box}: adding table thead

<tbody>
</tbody>

let it empty, because content will be added using JS when user clicks form submit button

HTML {result box}: creating clear button

styling in Bulma

<div class="control">
    <button class="button is-danger delB">clear</button>
</div>

last thing in html But not least in our project
HTML {form}: adding warnning text
this text will be shown when user clicks submit button and one of the inputs is empty

adding before submit button
style color to red and bigger font-size, in bulma
adding warning class to can select this element in js DOM

<p class="help is-danger has-text-centered is-size-6 warning">Fill Empty Inputs Please!</p>

Final HTML Result

Final HTML Code

<html dir="ltr" lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS BookList App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body class="container">
    <form action="" class="form" id="bookForm">
        <div class="field">
            <label class="label">Full Name</label>
            <div class="control">
              <input class="input is-success" type="text" placeholder="Firts name" name="Fname">
            </div>
            <p class="help is-success">Enter Your Full Name in Your ID Card</p>

            <label class="label">Phone Number</label>
            <div class="control">
              <input class="input is-success" type="text" placeholder="Firts name" name="Pnum">
            </div>
            <p class="help is-success">Enter Your Phone Number</p>

            <label class="label">Destination:</label>
            <div class="control">
                <div class="select">
                    <select>
                      <option value="KSA: Mekka">KSA: Mekka</option>
                      <option value="KSA: Ryahd">KSA: Ryahd</option>
                      <option value="Egy: Cairo">Egy: Cairo</option>
                      <option value="Egy: Sharm Elshek">Egy: Sharm Elshek</option>
                      <option value="USA: Area 51">USA: Area 51</option>
                    </select>
                </div>
            </div>
            <p class="help is-danger has-text-centered is-size-6 warning">Fill Empty Inputs Please!</p>
            <button class="button is-success is-fullwidth">Submit</button>
        </div>
    </form>

    <br>

    <div class="res">
        <table class="result table is-fullwidth is-bordered is-striped is-narrow is-hoverable is-success">

            <thead class="has-background-success">
                <tr>
                    <th>Full Name</th>
                    <th>Phone Number</th>
                    <th>Destination</th>
                </tr>
            </thead>

            <tbody>
            </tbody>

        </table>
        <div class="control">
            <button class="button is-danger delB">clear</button>
        </div>
    </div>
</html>
<script src="javascript.js"></script>

📒JavaScript

JS: styling Body

document.querySelector("body").style.cssText = "padding: 40px 20px";

JS: styling Elements with "help" class

get all ".help" elements in the array
loop on them and add to them style

let helparr = document.querySelectorAll(".help");
helparr.forEach(ele => {
    ele.style.cssText = "margin-bottom: 15px";
})

JS: styling "warning" element

hide this element using opacity

let warn = document.querySelector(".warning");
warn.style.cssText = "opacity: 0";

JS: styling resultBox ("res") element

make scroll

let resultBox = document.querySelector(".res");
resultBox.style.cssText = "height: 400px; overflow: auto;";

JS: styling clear button box("control") element

make button fixed above when scrolling

let control = resultBox.querySelector(".control");
control.style.cssText = "position: sticky; bottom: 0;";

JS {form}: select using js
we need this step to get the inputs value and control submit conditions

let form = document.getElementById("bookForm");

JS {form}: select elements

here we can access the inputs and control it or get them values

let FnameV = form.Fname;
let PnumV = form.Pnum;

JS {form}: select submit button

let SubmitButton = form.querySelector("button");

JS {table}: select tbody

we select it now to can make form submit conditions clearly: when submit form adds the data to the table

let SubmitButton = form.querySelector("button");

JS {form}: make submit logic

start with onclick when click the button do the next

SubmitButton.onclick = function(ele){

};

JS {submit}: disable the main function of button
when click the submit button, it automatically refresh the page, but this isn't what we need, we need when submit the form the the data automatically enter the table
so we well use preventDefault()

ele.preventDefault();

NOTE: _ele _here == this button onclick function (what this button will do when click on it)
To see a clearer picture, type:
console.log(ele)

JS {submit}: adding conditions (if)

check on inputs if they are empty or not
if not empty:
- hide warning text when it's shown.
- create a new variable, call: "FnameValue" and it equal the Fname value.
- create a new variable, call: "PnumValue" and it equal the Pnum value.
- create a new variable, call: "DisValue" and it equal the select value.
- inner all these variables into the table

if(FnameV.value != "" && PnumV.value != ""){
    warn.style.opacity = "0";
    let FnameValue = form.Fname.value;
    let PnumValue = form.Pnum.value;
    let DisValue = form.querySelector("select").value;

    tbody.innerHTML += (`<tr> <th>${FnameValue}</th> <th>${PnumValue}</th> <th>${DisValue}</th> </tr>`);
}

JS {submit}: adding conditions (else)

if the inputs empty:
- show warning text

else{
    warn.style.opacity = "1";
}

JS {Clear Button}: functionality

when click the button the table be empty

let delbutton = document.querySelector(".delB");
delbutton.onclick = function(){
    tbody.innerHTML = "";
};

Final JavaScript Code

// ################### Normalize ################### 
document.querySelector("body").style.cssText = "padding: 40px 20px";
let helparr = document.querySelectorAll(".help");
helparr.forEach(ele => {
    ele.style.cssText = "margin-bottom: 15px";
})

let warn = document.querySelector(".warning");
warn.style.cssText = "opacity: 0";

// ################# result BOX ################ 
let resultBox = document.querySelector(".res");
resultBox.style.cssText = "height: 400px; overflow: auto;";
let control = resultBox.querySelector(".control");
control.style.cssText = "position: sticky; bottom: 0;";

// ################### Form ################### 
let form = document.getElementById("bookForm");
let FnameV = form.Fname;
let PnumV = form.Pnum;
let SubmitButton = form.querySelector("button");
let tbody = document.querySelector("tbody");

SubmitButton.onclick = function(ele){
    ele.preventDefault();
    if(FnameV.value != "" && PnumV.value != ""){
        warn.style.opacity = "0";
        let FnameValue = form.Fname.value;
        let PnumValue = form.Pnum.value;
        let DisValue = form.querySelector("select").value;

        tbody.innerHTML += (`<tr> <th>${FnameValue}</th> <th>${PnumValue}</th> <th>${DisValue}</th> </tr>`);
    }
    else{
        warn.style.opacity = "1";
    }
};

// ################### Clear Button ################### 
let delbutton = document.querySelector(".delB");
delbutton.onclick = function(){
    tbody.innerHTML = "";
};

That's the end of this tutorial I hope you like it

If you like Coding Shirts Check my merch😊
My Merch

See You in next article👋