DEV Community: Codeflix

My website

Codeflix — Tue, 11 Jan 2022 06:10:12 +0000

My website
Join my website!!!

Host:-Chessplayer339 (owner of gameplay)

11 Useful HTML Attributes You Must Know

Codeflix — Wed, 29 Dec 2021 15:24:33 +0000

Hello, Readers, sorry I was busy in some work so it got late.

Let's Get Started

HTML attributes allow you to perform a lot more complex tasks directly on your HTML files. Here are some of the most useful ones to know!

HTML is the building block of the web. Knowing some less-known, but useful parts of this markup language can make your life a lot easier. HTML attributes provide several features that can help you to get the most out of HTML. It defines additional characteristics or properties of an HTML element.

In this article, you'll learn about 11 HTML attributes that you probably haven’t heard of yet.

1. Multiple

This attribute allows users to enter multiple values. You can use the multiple attribute with tags and tags. This boolean attribute is valid only for email or file input types.

Using multiple Attribute With Tag

<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>

Using multiple Attribute for File Input

By using the multiple attribute for file input, you can select multiple files (by holding the Shift or Ctrl keys).

<input type="file" multiple>

Using multiple Attribute for Email Input

By using the multiple attribute for email input, you can enter a list of comma-separated email addresses. All the white spaces will be removed from each address in the list.

<input type="email" multiple>

2.Contenteditable

You can make the HTML content editable on a web page using the contenteditable attribute. This is a global attribute, i.e, it's common to all HTML elements.

<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

3.Spellcheck

The spellcheck attribute specifies whether the element may be checked for spelling errors or not. You can spellcheck text in the elements, text in the editable elements, or text in the input elements(except passwords).

<p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

4.Dowmload

You can download a resource using the download attribute. The download attribute tells the browser to download the specified URL instead of navigating to it. You can use the download attribute with tag and tag.

Note: The download attribute only works with same-origin URLs. It follows the rules of the same-origin policy.

<a href="xyz.png" download="myImage">Download</a>

5.Accept

The accept attribute of the tag specifies the type of files a user can upload. You can specify a comma-separated list of one or more file types as its value.

Accepting an Audio File

<input type="file" id="audioFile" accept="audio/*">

Accepting a video file

<input type="file" id="videoFile" accept="video/*">

Accepting an Image File


<input type="file" id="imageFile" accept="image/*">

Accepting a Microsoft Word File

<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

Accepting PNG or JPEG Files

<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

Accepting a PDF File

<input type="file" id="pdfFile" accept>

6. translate

The translate attribute tells the browser that the element should be translated or not when the page is localized. It can have 2 values: "yes" or "no".

<p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

7. poster

The poster attribute is used to show an image while the video is downloading or until the user plays the video.

Note: If you don't specify anything, nothing is displayed until the first frame is available. When the first frame is available, it's shown as the poster frame.

<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8. inputmode

The inputmode attribute indicates the browser which keyboard to display when a user has selected any input or textarea element. This attribute accepts various values:

None

<input type="text" inputmode="none" />

Numeric

<input type="text" inputmode="numeric" />

Tel

<input type="text" inputmode="tel" />

Decimal

<input type="text" inputmode="decimal" />

Email

<input type="text" inputmode="email" />

URL

<input type="text" inputmode="url" />

Search

<input type="text" inputmode="search>

9. pattern

The pattern attribute of the <input> element allows you to specify a regular expression for which the element's value will be validated against. You can use the pattern attribute with several input types like text, date, search, URL, tel, email, and password.

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>

10. autocomplete

The autocomplete attribute specifies whether the browser should automatically complete the input based on user inputs or not. You can use the autocomplete attribute with several input types like text, search, URL, tel, email, password, date pickers, range, and color. You can use this attribute with the elements or

elements.

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>

11. autofocus

The autofocus attribute is a boolean attribute indicating that an element should be focused on page load. You can use this attribute with , , , , or elements.

Using autofocus Attribute With input Element

<input type="text" autofocus>

Using autofocus Attribute With select Element

<select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
Using autofocus Attribute With textarea Element
<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>

THE END

How to make a working login form with Html and Css(Transparent ,UI) (Part-1)

Codeflix — Wed, 24 Nov 2021 17:36:24 +0000

Hello, Readers and welcome to my new blog and today I am going to tell you How to make a working login and sign up form with Html, CSS.As you have seen many types of login and sign up form but this one is transparent . As you know that a login form is used to enter authentication credentials to access a restricted page or form. The login form contains a field for the username and another for the password. When the login form is submitted its underlying code checks that the credentials are authentic, giving the user can access the restricted page.

As you know that sign-up forms are an integral part of any website. Depending on the nature of your business, sign-up forms can be used for generating leads, collecting emails for your newsletter, and acquiring new customers. ... A sign-up form is essential in growing a list of permission-based, engaged subscribers.

If you want the code behind making this login and sign up form , you can read this whole blog and watch the preview of the login and sign up form using the link given below.

Video preview

The video preview will be available soon.

You can also subscribe to my channel To get latest updates.
🔗 Link- Codeflix

Please subscribe my friend's channel- Relaxing sounds and music
My second channel Relaxing sounds and music

Html

As you know The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such asand directly introduce content into the page. Other tags such as

surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

Source Code

Now let's not waste anymore time and get started.

Caution! - Read everything carefully typing mistakes can generate wrong results.

Step 1

Make a file named index.html and write the following code.
Basic code with link to css.

<!DOCTYPE html>
<!-- Created By Codeflix -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Transparent Login Form HTML CSS</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>

Step 2

Here we are adding a background image. I will send the image download 🔗 link in my video preview.

    <div class="bg-img">

Step 3

This code is for the Log-In form.

      <div class="content">
        <header>Login Form</header>
        <form action="#">
          <div class="field">
            <span class="fa fa-user"></span>
            <input type="text" required placeholder="Email or Phone">
          </div>
          <div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" class="pass-key" required placeholder="Password">
            <span class="show">SHOW</span>
          </div>

Step 4

We will make reset password later in the blog.


        <div class="pass">
            <a href="index 2.html">Forgot Password?</a>
          </div>

Step 5

This code is for the Login button.

 <div class="field">
<input type="submit"value="LOGIN">
          </div>
        </form>

Step 6

This Code Is For The Next (Or Login With)Section.

    <div class="login">Or login with</div>
        <div class="links">
          <div class="google">
            <i class="fab fa-google"><span>Google</span></i>
          </div>
          <div class="facebook">
            <i class="fab fa-facebook-f"><span>Facebook</span></i>
          </div>
        </div>

Step 7

We will make Sign Up page later in this blog.

<div class="signup">Don't have account? 
<a href="index{signup}.html">Signup Now</a>
        </div>
      </div>
    </div>

Javascript

JavaScript , often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation and first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. Over 97% of websites use it client-side for web page behavior, often incorporating third-party libraries.Most web browsers have a dedicated JavaScript engine to execute the code on the user's device.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).

The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but they are now core components of other software systems, most notably servers and a variety of applications.

Although there are similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in
design.

Scripts Source Code

Instructions ( Read Carefully)

We will write the script in index.html using the

tag . You can also make a script.js file if you want, and write the codes in it and don't forget to 🔗 link it.

Source Code

Step 1

This Code for the show and hide options in the password field, style...
This Also Contains the end tags for index.html,Read Instructions To Know More. ( Situated Above).

  const pass_field = document.querySelector('.pass-key');
  const showBtn = document.querySelector('.show');
  showBtn.addEventListener('click', function(){
   if(pass_field.type === "password"){
     pass_field.type = "text";
     showBtn.textContent = "HIDE";
     showBtn.style.color = "#3498db";
   }else{
     pass_field.type = "password";
     showBtn.textContent = "SHOW";
     showBtn.style.color = "#222";
   }
  });

Coding Games

Codeflix — Mon, 22 Nov 2021 15:08:15 +0000

Want to play games realeted to coding?

Well If you want to play copy and paste the 🔗 link in crome fast!!!!! 🔗 Link- https://classroom.google.com/c/NDM2NTMyMjczNzM4?cjc=uyuoahg

How to make a Tik Tak Toe Game (With Html, Css And Js)

Codeflix — Fri, 29 Oct 2021 08:24:54 +0000

Hello, readers welcome to my new blog and today I am going to tell you how to make a Tic Tac Toe game in Html, Css and Javascript .

As you know that Tic tac toe is a multiplayer game and the players of this game have to position their marks(sign) so that they can construct a continuous line of three cells or boxes vertically, horizontally, or diagonally. An opponent can stop a win by blocking the end of the opponent’s line.

In our program or design [Tic Tac Toe Game], at first, on the webpage, there is a selection box with the game title and two buttons which are labeled as “Player(X)” and “Player(O)”. Users must select one option or button to continue the game. If the user selects the X then the bot will be O and if the user selects the O then the bot will be X.

Once the user selects one of them, the selection box will disappear and the playboard is visible. There are the player names at the top in the playboard section and it indicates or shows whose turn is now. At the center of the webpage, there is a tic tac toe play area with nine square boxes. Once you click on the particular box then there is visible a sign or icon which you have chosen on the selection box.

Once you click on any box then after a couple of seconds the bot will automatically select the box which is not selected by you or the bot before, and the opposite icon is visible there means if your icon is X then the bot will have O. Once a match is won by someone, the playboard section will be hidden and the result box appears with the winner sign or icon and a replay button.

If no one wins the match and all nine-box selected then again the playboard section is hidden and the result box appears with “Match has been drawn text” and a replay button. Once you click on the replay button, the current page reloads and you can play again.

How To Make it A Search Box In Vanilla Javascript YouTube Preview

####Preivew

How To Make it A Search Box In Vanilla Javascript Code On YouTube

Now let's not waste anymore time and get started.

Html

surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

Source Code

The source code is given below please read and do it carefully any
mistake can generate wrong results.

Step 1

Make a file named index.html and write the following code.
Basic code with link to css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tic Tac Toe Game | Codeflix</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>

Step 2

This is the front page's html.

  <!-- select box -->
  <div class="select-box">
    <header>Tic Tac Toe</header>
    <div class="content">
      <div class="title">Select which you want to be?</div>
      <div class="options">
        <button class="playerX">Player (X)</button>
        <button class="playerO">Player (O)</button>
      </div>
      <div class="credit">Created By <a href="https://dev.to/codeflix/how-to-make-a-glassorphism-calculator-dhk" target="_blank">Codeflix</a></div>
    </div>
  </div>

Step 3

Code to tell which player's chance it is.

<!-- playboard section -->
  <div class="play-board">
    <div class="details">
      <div class="players">
        <span class="Xturn">X's Turn</span>
        <span class="Oturn">O's Turn</span>
        <div class="slider"></div>
      </div>
    </div>

Step 4

Code for playing area.

<div class="play-area">
      <section>
        <span class="box1"></span>
        <span class="box2"></span>
        <span class="box3"></span>
      </section>
      <section>
        <span class="box4"></span>
        <span class="box5"></span>
        <span class="box6"></span>
      </section>
      <section>
        <span class="box7"></span>
        <span class="box8"></span>
        <span class="box9"></span>
      </section>
    </div>
  </div>

Step 5

Replay button and link to javascript file.

<!-- result box -->
  <div class="result-box">
    <div class="won-text"></div>
    <div class="btn"><button>Replay</button></div>
  </div>

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

</body>
</html>

Css

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if
the content is accessed on a mobile device.

Css Source Code

Step 1

Make a css file named style.css
This code represents selection, body, about box, header, title, button and player's css code.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  color: #fff;
  background:#56baed;
}
body{
  background:#56baed;
}
.select-box, .play-board, .result-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.select-box{
  background: #fff;
  padding: 20px 25px 25px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
}
.select-box.hide{
  opacity: 0;
  pointer-events: none;
}
.select-box header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid lightgrey;
}
.select-box .title{
  font-size: 22px;
  font-weight: 500;
  margin: 20px 0;
}
.select-box .options{
  display: flex;
  width: 100%;
}
.options button{
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  border: none;
  background: #56baed;
  border-radius: 5px;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.options button:hover,
.btn button:hover{
  transform: scale(0.96);
}
.options button.playerX{
  margin-right: 5px;
}
.options button.playerO{
  margin-left: 5px;
}

Step 2

This code represents animation, credit ,details , players , victory text.

.select-box .credit{
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}
.select-box .credit a{
  color: #56baed;
  text-decoration: none;
}
.select-box .credit a:hover{
  text-decoration: underline;
}

.play-board{
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}
.play-board.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.play-board .details{
  padding: 7px;
  border-radius: 5px;
  background: #fff;
}
.play-board .players{
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
}
.players span{
  position: relative;
  z-index: 2;
  color: #56baed;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  cursor: default;
  user-select: none;
  transition: all 0.3 ease;
}
.players.active span:first-child{
  color: #fff;
}
.players.active span:last-child{
  color: #56baed;
}
.players span:first-child{
  color: #fff;
}
.players .slider{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #56baed;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.players.active .slider{
  left: 50%;
}
.players.active span:first-child{
  color: #56baed;
}
.players.active span:nth-child(2){
  color: #fff;
}
.players.active .slider{
  left: 50%;
}
.play-area{
  margin-top: 20px;
}
.play-area section{
  display: flex;
  margin-bottom: 1px;
}
.play-area section span{
  display: block;
  height: 90px;
  width: 90px;
  margin: 2px;
  color: #56baed;
  font-size: 40px;
  line-height: 80px;
  text-align: center;
  border-radius: 5px;
  background: #fff;
}

.result-box{
  padding: 25px 20px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  opacity: 0;
  text-align: center;
  background: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}
.result-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.result-box .won-text{
  font-size: 30px;
  font-weight: 500;
  display: flex;
  justify-content: center;
}
.result-box .won-text p{
  font-weight: 600;
  margin: 0 5px;
}
.result-box .btn{
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: center;
}
.btn button{
  font-size: 18px;
  font-weight: 500;
  padding: 8px 20px;
  border: none;
  background: #56baed;
  border-radius: 5px;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

JavaScript

Although there are similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in
design.

JavaScript Source Code

Firstly make a file named script.js.

Source Code

I've tried to explain each JavaScript line....Hope you'll understand

Step 1

Code of all required elements Such as:- Player, Win-Text , Result-Box, Buttons ect

const selectBox = document.querySelector(".select-box"),
selectBtnX = selectBox.querySelector(".options .playerX"),
selectBtnO = selectBox.querySelector(".options .playerO"),
playBoard = document.querySelector(".play-board"),
players = document.querySelector(".players"),
allBox = document.querySelectorAll("section span"),
resultBox = document.querySelector(".result-box"),
wonText = resultBox.querySelector(".won-text"),
replayBtn = resultBox.querySelector("button");

Step 2

This code means once window loaded and the player selected his/her team then hide select team box and show the playboard section

window.onload = ()=>{
    for (let i = 0; i < allBox.length; i++) {
       allBox[i].setAttribute("onclick", "clickedBox(this)");
    }
}

selectBtnX.onclick = ()=>{
    selectBox.classList.add("hide"); 
    playBoard.classList.add("show");
}

Step 3

The first line of code tells the computer the icon playerX
(fas fa-times is the class named fountausome cross icon)
and the second line represents the icon of PlayerO
(far fa-circle is the class name fountausome circle icon)

let playerSign = "X";

this is a global variable beacuse we've used this variable inside multiple functions

let runBot = true;

this also a global variable with boolen value..we used this variable to stop the bot once match won by someone or drawn

let playerXIcon = "fas fa-times";
let playerOIcon = "far fa-circle"; 
let playerSign = "X"; 
let runBot = true;

Step 4

This tells the computer that if player choose O then change playerSign to O in the next line we are adding circle icon tag inside user clicked element/box.
In seventh line of code we have added active class in players.
In tenth line of code we have are
adding cross icon tag inside user clicked element/box.Last line of code we have added active class in player.

function clickedBox(element){
    if(players.classList.contains("player")){
        playerSign = "O"; 
        element.innerHTML = `<i class="${playerOIcon}"></i>`; 
        players.classList.remove("active"); 
        element.setAttribute("id", playerSign); 
    }else{
        element.innerHTML = `<i class="${playerXIcon}"></i>`; 
        element.setAttribute("id", playerSign); 
        players.classList.add("active"); 
    }

Step 5

The fist line of code tells the computer that once user have selected any box then that box can'be clicked again. Forth line of code tells the computer that add pointerEvents none to playboard so user can't immediately click on any other box until bot select.
The eigth line of code tells the computer that generating random number so bot will randomly delay to select unselected box.

Tip- There are some comments pasting with the comments won't generate wrong results.

selectWinner( );
    element.style.pointerEvents = "none"; 
    playBoard.style.pointerEvents = "none"; 
    let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); 
    setTimeout(()=>{
        bot(runBot); 

    }, randomTimeDelay); //passing random delay value
}

// bot auto select function
function bot(){
    let array = []; //creating empty array...we'll store unclicked boxes index
    if(runBot){ //if runBot is true
        playerSign = "O"; //change the playerSign to O so if player has chosen X then bot will O
        for (let i = 0; i < allBox.length; i++) {
            if(allBox[i].childElementCount == 0){ //if the box/span has no children means <i> tag
                array.push(i); //inserting unclicked boxes number/index inside array
            }
        }

Step 6

The firt line of code tells the computer that getting random index from array ,so bot will select random unselected box.
The forth line of code tells the computer that if player has chosen O then bot will X. In the fifth and sixth line we are adding cross icon tag inside bot selected element. In the line-no 21 we have added pointerEvents auto in playboard so user can again click on box.

playerSign = "X"; //if player has chosen X then bot will be O right then we change the playerSign again to X so user will X because above we have changed the playerSign to O for bot.

Tip- There are some comments pasting with the comments won't generate wrong results.

 let randomBox = array[Math.floor(Math.random() * array.length)]; 
        if(array.length > 0){ //if array length is greater than 0
            if(players.classList.contains("player")){ 
                playerSign = "X"; 
                allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`; //adding cross icon tag inside bot selected element
                allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign
                players.classList.add("active"); //add active class in players
            }else{
                allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`; //adding circle icon tag inside bot selected element
                players.classList.remove("active"); //remove active class in players
                allBox[randomBox].setAttribute("id", playerSign); //set id attribute in span/box with player choosen sign
            }
            selectWinner(); //calling selectWinner function
        }
        allBox[randomBox].style.pointerEvents = "none"; //once bot select any box then user can't click on that box
        playBoard.style.pointerEvents = "auto"; //
    }
}

function getIdVal(classname){
    return document.querySelector(".box" + classname).id; //return id value
}
function checkIdSign(val1, val2, val3, sign){ //checking all id value is equal to sign (X or O) or not if yes then return true
    if(getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign){
        return true;
    }
}
function selectWinner(){ //if the one of following winning combination match then select the winner
    if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){
        runBot = false; //passing the false boolen value to runBot so bot won't run again
        bot(runBot); //calling bot function
        setTimeout(()=>{ //after match won by someone then hide the playboard and show the result box after 700ms
            resultBox.classList.add("show");
            playBoard.classList.remove("show");
        }, 700); //1s = 1000ms
        wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`; //displaying winning text with passing playerSign (X or O)
    }else{ //if all boxes/element have id value and still no one win then draw the match
        if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){
            runBot = false; //passing the false boolen value to runBot so bot won't run again
            bot(runBot); //calling bot function
            setTimeout(()=>{ //after match drawn then hide the playboard and show the result box after 700ms
                resultBox.classList.add("show");
                playBoard.classList.remove("show");
            }, 700); //1s = 1000ms
            wonText.textContent = "Match has been drawn!"; //displaying draw match text
        }
    }
}

replayBtn.onclick = ()=>{
    window.location.reload(); //reload the current page on replay button click
}

Hi, Everyone hope you have learnt how to make a Tic Tac Toe game in JavaScript and please support me by subscribing my channel codeflix- Codeflix

Join my classes - Class Code-764co6g Class Link- Join My Classes

Join my classroom

Codeflix — Thu, 28 Oct 2021 15:49:17 +0000

Join my classroom to connect with me and learn every type of coding languages , answer different types of quizes and many more
Join 🔗 link- https://classroom.google.com/c/NDE5MDU2MDYzOTcw?cjc=764co6g

How to make a Calculator (Working and Animated)

Codeflix — Tue, 26 Oct 2021 08:30:15 +0000

Hello, Readers welcome to my new blog and today I am going to tell you how to Make a Calculator. This Calculator has some features that make it different from a normal calculator. Those features are- I have added animation ,Made the calculator transparent.

As you know, calculator is a machine which allows people to do math operations more easily.
For Example - Most calculator will add, substract, multiply, divide these are the basic functions of a calculator. Scientific calculator, Special purpose calculators financial calculators etc.

Some also do square roots, and more complex calculators can help with calculus and draw function graphs.

This Calculator's bubble or box animation make it look even more beautiful and it is also transparent making it more ausome

If you want the real animation of these small boxes and the code behind making this calculator, you can read this whole blog and watch the preview of the calculator using the link given below.

Tutorial of Calculator using HTML CSS & JavaScript

Calculator Preview
And please visit my site it is under construction - Currently unavalible
Please subscribe my friend's channel- Relaxing sounds and music
My second channel Relaxing sounds and music

Html

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as and directly introduce content into the page. Other tags such as

surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

Source Code

The Source Code is given below

STEP 1

Make a file named index.html and write the following code.

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
   <!--- <title> Glassmorphism Calculator| Codeflix </title>--->
    <link rel="stylesheet" href="style.css">
   </head>
<body>

STEP 2

This is the animation part (Do it carefully). Each lot contains 7 bubbles.

<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>
<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>
<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>
<div class="bubbles">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>
  <span class="five"></span>
  <span class="six"></span>
  <span class="seven"></span>
  <span class="seven"></span>
</div>

STEP 3

This code will make the container of the calculator.

 <div class="container">
   <form action="#" name="forms">
     <input type="text" name="answer">
     <div class="buttons">
       <input type="button" value="AC" onclick="forms.answer.value = ''">
       <input type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)">
       <input type="button" value="%" onclick="forms.answer.value += '%'">
       <input type="button" value="/" onclick="forms.answer.value += '/'">
     </div>

STEP 4

This code represents how buttons should function and their size and all other content.

<div class="buttons">
       <input type="button" value="7" onclick="forms.answer.value += '7'">
       <input type="button" value="8" onclick="forms.answer.value += '8'">
       <input type="button" value="9" onclick="forms.answer.value += '9'">
       <input type="button" value="*" onclick="forms.answer.value += '*'">
     </div>
     <div class="buttons">
       <input type="button" value="4" onclick="forms.answer.value += '4'">
       <input type="button" value="5" onclick="forms.answer.value += '5'">
       <input type="button" value="6" onclick="forms.answer.value += '6'">
       <input type="button" value="-" onclick="forms.answer.value += '-'">
     </div>
     <div class="buttons">
       <input type="button" value="1" onclick="forms.answer.value += '1'">
       <input type="button" value="2" onclick="forms.answer.value += '2'">
       <input type="button" value="3" onclick="forms.answer.value += '3'">
       <input type="button" value="+" onclick="forms.answer.value += '+'">
     </div>
     <div class="buttons">
       <input type="button" value="0"  onclick="forms.answer.value += '0'">
       <input type="button" value="00" onclick="forms.answer.value += '00'">
       <input type="button" value="." onclick="forms.answer.value += '.'">
       <input type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)">
     </div>
   </form>
 </div>
</body>
</html>

Css

Css codes in this project

Css plays an important role in this project and Css codes are also available below.

Css codes

Now we will make a file named style.css and write paste the following code.

STEP 1

This code represents Fonts, Container, Background Colour

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#2196f3 , #e91e63);
}

STEP 2

This Css code is used to add animation,Colour to the bubbles.
Each lot contains 7 bubbles.

.bubbles{
  position: absolute;
  bottom: -120px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 70px;
  width: 100%;
  justify-content: space-around;
}
.bubbles span{
  height: 60px;
  width: 60px;
  background: rgba(255, 255, 255, 0.1);
  animation: move 10s linear infinite;
  position: relative;
  overflow: hidden;
}
@keyframes move {
  100%{
    transform: translateY(-100vh);
  }
}
.bubbles span.one{
  animation-delay: 2.2s;
  transform: scale(2.15)
}
.bubbles span.two{
  animation-delay: 3.5s;
  transform: scale(1.55)
}
.bubbles span.three{
  animation-delay: 0.2s;
  transform: scale(0.35)
}
.bubbles span.four{
  animation-delay: 6s;
  transform: scale(2.15)
}
.bubbles span.five{
  animation-delay: 7s;
  transform: scale(0.5)
}
.bubbles span.six{
  animation-delay: 4s;
  transform: scale(2.5)
}
.bubbles span.seven{
  animation-delay: 3
  transform: scale(1.5)
}
.bubbles span:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 60px;
  width: 40%;
  transform: skew(45deg) translateX(150px);
  background: rgba(255, 255, 255, 0.15);
  animation: mirror 3s linear infinite;
}
@keyframes mirror {
  100%{
    transform: translateX(-450px);
  }
}
.bubbles span.one:before{
  animation-delay: 1.5s;
}
.bubbles span.two:before{
  animation-delay: 3.5s;
}
.bubbles span.three:before{
  animation-delay: 2.5s;
}
.bubbles span.four:before{
  animation-delay: 7.5s;
}
.bubbles span.five:before{
  animation-delay: 4.5s;
}
.bubbles span.six:before{
  animation-delay: 0.5s;
}
.bubbles span.seven:before{
  animation-delay: 6s;
}

STEP 3

This code represents container's colour, Text input in the container , Colour Of the buttons.

  z-index: 12;
  width: 360px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.container input[type="text"]{
  width: 100%;
  height: 100px;
  margin: 0 3px;
  outline: none;
  border: none;
  color: #fff;
  font-size: 20px;
  text-align: right;
  padding-right: 10px;
  pointer-events: none;
  background: transparent;
}
.container input[type="button"]{
  height: 65px;
  color: #fff;
  width: calc(100% / 4 - 5px);
  background: transparent;
  border-radius: 12px;
  margin-top: 15px;
  outline: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.container input[type="button"]:hover{
  background: rgba(255, 255, 255, 0.1);
}```