DEV Community: Abhi Develops - SunTech

My Discord Server - Gaming

Abhi Develops - SunTech — Thu, 27 Jan 2022 04:42:05 +0000

Hi Everyone!
I would really appreciate if you would join my Discord Server - Ninja Gamers: https://discord.gg/jjbzwPtXWx

Thanks!

Infinite Loops in Javascript

Abhi Develops - SunTech — Thu, 09 Dec 2021 05:02:03 +0000

Hi Everyone!
In this post I will be showing you what Infinite Loops are and how to avoid them while writing Javascript.

I have created many Javascript programs that include for or while loops and have messed up a lot. Most of the times I put the wrong operator in the loop which causes an Infinite Loop and my computer crashes.

I am going to show you an example of a for() infinite loop.

for (let i = 1; i >= 0; i++) {
    console.log(i)
}

Just those 3 lines of code will make you have to restart your computer.

Here is another Infinite Loop example but it is a while() loop.

   const count = 1;
   while(count > 1) { 
       count++;
       console.log(count);
}

Those lines of code can also crash your computer.

Do you want to know how to infinite loops?
The answer is: PUT THE CORRECT OPERATOR IN THE LOOP!!!

A Correct for() Loop:

for (let i = 1; i <= 0; i++) {
    console.log(i)
}

A Correct while() Loop:

   const count = 1;
   while(count < 1) { 
       count++;
       console.log(count);
}

I hope you enjoyed this post. Please remember to follow me for more posts.

Byeee👋!

Cool Python Project 5: Car Shopping

Abhi Develops - SunTech — Tue, 07 Dec 2021 02:18:35 +0000

Hi Everyone! Welcome to Cool Python Projects!
In this post I will be showing you how to make a Birthday Estimator in Python. Please remember to follow me to stay updated on any new projects.

Python Code:

print('@*@*@*@*@*@*@*@*@*@*@*@*@*@*')

print('CAR TIME')

print('Welcome Shopper - Lets take you on a car shopping journey!!!')

print()

print('Zoooooooooooooooooooooommmmmmmmmmm!')

print('@*@*@*@*@*@*@*@*@*@*@*@*@*@*')

print('')

user_car = input('Do you want a) sports car, b) a luxury car,or a c) normal car d) Nothing? Enter a,b,c,or d - ')

#just giving value to variables to start with

user_like = 'az'

if user_car == 'd':

  print('Bye Bye!')

  exit()

#code for sports car

if user_car == 'a':

    print('Welcome Sports Car shopper')

    user_money= input('How much money do you want to spend (in million dollars?)')

    user_money_int = int(user_money)

    user_model = input('Choose from these cars - a) Bugatti Chiron; b) Lamborghini Huracan c) Bugatti Divo,Choose a,b or c - ')

    if user_model== 'a':

      number_of_cars = (user_money_int)/3

      car_name = 'Bugatti Chiron'

    elif user_model == 'b':

      number_of_cars = (user_money_int)/0.5

      car_name = 'Lamborghini Huracan'

    elif user_model == 'c' :

        number_of_cars = (user_money_int)/6

        car_name = 'Bugatti Divo'

    print('***** You can buy {0} {1} '.format(number_of_cars,car_name))

#Chiron = 3M, Huracan = 0.3M, Divo = 6M

print()

#code for luxury car

if user_car == 'b':

   print('Welcome Luxury Car shopper')

   user_money2=input('How much money do you want to spend(in millions?) ')

   user_money2_int = int(user_money2)

   user_model2 = input('Choose from these cars - a) Rolls Royce; b) Audi c) BMW, choose a,b,or c - ')

   if  user_model2 == 'a' or 'Rolls Royce':

       number_of_cars2 = (user_money2_int)/1

       car_name= 'Rolls Royce'

   elif user_model2 =='b' or 'Audi':

        number_of_cars2 = (user_money2_int)/0.1

        car_name = 'Audi'

   elif user_model2 =='c' or 'BMW':

        number_of_cars2 = (user_money2_int)/0.2

        car_name = 'BMW'

   print('***** You can buy {0} {1} cars'.format(number_of_cars2,car_name))

#Royce = 1M, Audi = 0.1M , BMW = 0.2M

print()

#code for normal car

if user_car == 'c':

   print('Welcome Normal Car shopper')

   user_money3= input('How much money do you want to spend(in thousand dollars)?')

   user_money3_int = int(user_money3)

   user_model3 = input('Choose from these cars - a) Toyota Corolla; b) Nissan Altima c) Honda Accord, choose a,b,or c - ')

   if user_model3 == 'a' :

       number_of_cars3 = (user_money3_int)/19.6

       car_name = 'Toyota Corolla'

   elif user_model3 == 'b' :

       number_of_cars3 = (user_money3_int)/21.1

       car_name = 'Nissan Altima'

   elif user_model3 == 'c' :

       number_of_cars3 = (user_money3_int)/20

       car_name = 'Honda Accord'

   print('***** You can buy {0} {1} cars'.format(number_of_cars3,car_name))

#Toyota = 19.6K, Nissan = 21.1K, Honda = 20K

print('***** Hope you enjoyed shopping with us *****')

print()

if user_car !='d':

   user_like = input('How did you like the experience of shopping a car?   a)  GOOD OR b) BAD? ')

if  user_like == 'a':

   print('Thanks! We are sooooooooo happy to see you happy!')

else: print('I will someday make you feel that you like this Car Shopper!')

I hope you enjoyed this Python project.

All the projects code in the series

Cool Python Project 4: Calculator

Abhi Develops - SunTech — Tue, 07 Dec 2021 02:16:54 +0000

Hi Everyone! Welcome to Cool Python Projects!
In this post I will be showing you how to make a Calculator in Python. Please remember to follow me to stay updated on any new projects.

Python Code:

def divide (user_number_3, user_number_4):

   result1 = user_number_3 / user_number_4

   return result1

def add (user_number_3, user_number_4):

   result2 = user_number_3 + user_number_4

   return result2

def multiply (user_number_3, user_number_4):

   result3 = user_number_3 * user_number_4

   return result3

def subtraction (user_number_3, user_number_4):

   result4 = user_number_3 - user_number_4

   return result4

def main ():

   user_choice = input("Do you want to a)add or b)multiply c)divide d) subtract - Enter a, b , c, or d ")

   user_number_1 = int(input('Enter first number '))

   user_number_2 = int(input('Enter second number '))

   if user_choice == 'a':

       result = add(user_number_1, user_number_2)

       print('The result is: {}'.format(result))

       print("Hope you had fun with our calculator!")

   if user_choice == 'b':

       result = multiply(user_number_1, user_number_2)

       print('The result is: {}'.format(result))

       print("Hope you had fun with our calculator!")

   if user_choice == 'c':

       result = divide(user_number_1, user_number_2)

       print('The result is: {}'.format(result))

       print("Hope you had fun with our calculator!")

   if user_choice == 'd':

       result = subtraction(user_number_1, user_number_2)

       print('The result is: {}'.format(result))

       print("Hope you had fun with our calculator!")

main()

I hope you enjoyed this Python project.

All the projects code in the series

Cool Python Project 3: Next Leap Year

Abhi Develops - SunTech — Tue, 07 Dec 2021 02:14:59 +0000

Hi Everyone! Welcome to Cool Python Projects!
In this post I will be showing you how to make a Leap Year project that tells you when the next leap year will be. Please remember to follow me to stay updated on any new projects.

Python Code:

print("In this app you will know when the next leap year is this year a leap year.")

what_is_leap_year = input("Do you know what a leap year is? a)YES or b)NO? ")

if what_is_leap_year == 'a':

   print("Awesome!")

elif what_is_leap_year == 'b':

   print("I will tell you.")

   print("A leap year happens every 4 years when February has 29 days, understand.")

   print()

print("Next I will tell you if it is a leap year now.")

what_year = int(input("What year is it? "))

division = (float(what_year/4))

if division.is_integer():

   print('The year {} is a leap year'.format(what_year))

else:

   print("It is not a leap year.")

division_int = int(division)

for x in range(2):

   next_division = division_int + 1

   next_leap_year = next_division * 4

   print('The next leap year will happen in {}'.format(next_leap_year))

   division_int = division_int + 1

print("I hope you liked this calendar game!")

I hope you enjoyed this Python project.

All the projects code in the series

Cool Python Project 2: Guess that Number Game

Abhi Develops - SunTech — Tue, 07 Dec 2021 02:09:23 +0000

Hi Everyone! Welcome to Cool Python Projects!
In this post I will be showing you how to make a Guess that Number Game in Python. Please remember to follow me to stay updated on any new projects.

import random

print("I have thought of a number between 1 and 10. But I will not tell you, you have to guess it.")

the_number = random.randint(1, 10)

username = input("What is your name? ")

if username == 'Abhinav Gupta':

   print("Hello Abhinav Gupta, my name is Alexa.")

user_int = -1

while user_int != the_number:

   user_input = input("Guess a number between 1 and 10. ")

   user_int = int(user_input)

   if user_int > the_number:

       print('Oh No {0}, Your guess {1} is too high!'.format(username, user_int))

   elif user_int < the_number:

       print('Uh Oh, {0} Your guess {1} is to small!'.format(username, user_int))

   else:

       print("YOU GOT IT, WELL DONE!")

print("Well Done, take rest now.")

I hope you enjoyed this Python project.

All the projects code in the series

Cool Python Project 1: Birthday Estimator

Abhi Develops - SunTech — Tue, 07 Dec 2021 01:50:40 +0000

Hi Everyone! Welcome to Cool Python Projects!
In this post I will be showing you how to make a Birthday Estimator in Python. Please remember to follow me to stay updated on any new projects.

Python Code:

import datetime

def get_birthday_from_user():

   year = int(input('What year were you born? '))

   month = int(input('What month were you born? '))

   day = int(input('What day were you born? '))

   user_bday=datetime.date(year,month,day)

   return user_bday

def compute_days_between_dates(bday2,today2):

   bday2 = datetime.date(today2.year,bday2.month, bday2.day)

   days3 = bday2 - today2

   print(days3, type(days3))

   return days3.days

def print_birthday_information(bday4):

   if bday4 < 0:

       print('Your Birthday was {0} days ago!'.format(-bday4))

def main ():

   user_bday2 = get_birthday_from_user()

   today = datetime.date.today()

   days_to_bday = compute_days_between_dates(user_bday2,today)

   print_birthday_information(days_to_bday)

main()

I hope you enjoyed this Python project.

All the projects code in the series

My New Website - SunTech

Abhi Develops - SunTech — Sun, 05 Dec 2021 07:26:04 +0000

Hi Everyone!
I just released my new website and I wanted to share it with all of you. I have an interest in creating websites so I decided to start creating websites for clients. You can Hire Me at my new website. Please view Terms of Service and Privacy Policy before hiring.

Links:
Website
Hire Us
Website Plans
Ecom/Business Plans
Terms of Service
Privacy Policy

Enjoy!

My Public Inbox

Abhi Develops - SunTech — Mon, 01 Nov 2021 05:52:35 +0000

If you need any help or would like something, you can let me know in my Public Inbox.
Type your question in the discussion to get it answered.

Contact Me: abhinavherein@gmail.com

My Website: https://abhinav-gupta-w3.w3spaces.com

How to make a Memory Matching Card Game with Javascript

Abhi Develops - SunTech — Wed, 27 Oct 2021 06:14:39 +0000

Hi Everyone!
In this post, I will be showing you how to make a Memory Matching Card Game with HTML, CSS, and Javascript. If you enjoy this project, please remember to follow me for more cool projects.
Let's get started!

The HTML User Interface:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Memory Matching Card Game</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--Linking our CSS file-->
<link rel="stylesheet" href="style.css">
<!--Linking Bootstrap Fontawesome-->
    <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!--Linking Google Fonts-->
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
    <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Permanent+Marker" >
</head>
<body>

    <div class="container">
        <header>
            <h1>Memory Matching Card Game</h1>
        </header>

        <section class="score-panel">
            <ul class="stars">
                <li><i class="fa fa-star"></i></li>
                <li><i class="fa fa-star"></i></li>
                <li><i class="fa fa-star"></i></li>
            </ul>

            <span class="moves">0</span> Move(s)

            <div class="timer">
            </div>

            <div class="restart" onclick="startGame()">
                <i class="fa fa-repeat"></i>
            </div>
        </section>

        <ul class="deck" id="card-deck">
            <li class="card" type="diamond">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card" type="plane">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card match" type="anchor">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card" type="bolt" >
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card" type="cube">
                <i class="fa fa-cube"></i>
            </li>
            <li class="card match" type="anchor">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card" type="leaf">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card" type="bicycle">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card" type="diamond">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card" type="bomb">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card" type="leaf">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card" type="bomb">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card open show" type="bolt">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card" type="bicycle">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card" type="plane">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card" type="cube">
                <i class="fa fa-cube"></i>
            </li>
        </ul>

        <div id="popup1" class="overlay">
            <div class="popup">
                <h2>Congratulations 🎉</h2>
                <a class="close" href="#">×</a>
                <div class="content-1">
                    Congratulations you're a winner 🎉🎉
                </div>
                <div class="content-2">
                    <p>You made <span id="finalMove"> </span> moves </p>
                    <p>in <span id="totalTime"> </span> </p>
                    <p>Rating:  <span id="starRating"></span></p>
                </div>
                <button id="play-again"onclick="playAgain()">
                    Play again 😄</a>
                </button>
            </div>
        </div>

    </div>

    <!--Linking our Javascript File-->
    <script src="script.js"></script>
</body>
</html>

Now the CSS to style it:

 html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff;
    font-family: 'Permanent Marker', cursive;
    font-size: 16px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1 {
    font-family: 'Gloria Hallelujah', cursive;
}


/*
 * Styles for the deck of cards
 */


.deck {
    width: 85%;
    background: #716F71;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 0 3em;
}

.deck .card {
    height: 3.7rem;
    width: 3.7rem;
    margin: 0.2rem 0.2rem;
    background: #141214;;
    font-size: 0;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(0);
    background: #02b3e4;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-duration: .75s;
}

.deck .card.show {
    font-size: 33px;
}

.deck .card.match {
    cursor: default;
    background: #E5F720;
    font-size: 33px;
    animation-name: rubberBand;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-duration: .75s;
}

.deck .card.unmatched {
    animation-name: pulse;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-duration: .75s;
    background: #e2043b;
}

.deck .card.disabled {
    pointer-events: none;
    opacity: 0.9;
}


/*
 * Styles for the Score Panel
 */


.score-panel {
    text-align: left;
    margin-bottom: 10px;
}

.score-panel .stars {
    margin: 0;
    padding: 0;
    display: inline-block;
    margin: 0 5px 0 0;
}

.score-panel .stars li {
    list-style: none;
    display: inline-block;
}

.score-panel .restart {
    float: right;
    cursor: pointer;
}

.fa-star {
    color: #FFD700;
}

.timer {
    display: inline-block;
    margin: 0 1rem;
}


/*
 * Styles for congratulations modal
 */


.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 70px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 5px;
    width: 85%;
    position: relative;
    transition: all 5s ease-in-out;
    font-family: 'Gloria Hallelujah', cursive;
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.popup .close:hover {
    color: #E5F720;
}

.popup .content-1,
.content-2 {
    max-height: 30%;
    overflow: auto;
    text-align: center;
}

.show {
    visibility: visible !important;
    opacity: 100 !important;
}

#starRating li {
    display: inline-block;
}

#play-again {
    background-color: #141214;
    padding: 0.7rem 1rem;
    font-size: 1.1rem;
    display: block;
    margin: 0 auto;
    width: 50%;
    font-family: 'Gloria Hallelujah', cursive;
    color: #ffffff;
    border-radius: 5px;
}

/* animations */
@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, .95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}


/****** Media queries
***************************/


@media (max-width: 320px) {
    .deck {
        width: 85%;
    }

    .deck .card {
        height: 4.7rem;
        width: 4.7rem;
    }
}


/* For Tablets and larger screens
****************/

@media (min-width: 768px) {
    .container {
        font-size: 22px;
    }

    .deck {
        width: 660px;
        height: 680px;
    }

    .deck .card {
        height: 125px;
        width: 125px;
    }

    .popup {
        width: 60%;
    }
}

Next let's add Javascript:

// cards array holds all cards
let card = document.getElementsByClassName("card");
let cards = [...card];

// deck of all cards in game
const deck = document.getElementById("card-deck");

// declaring move variable
let moves = 0;
let counter = document.querySelector(".moves");

// declare variables for star icons
const stars = document.querySelectorAll(".fa-star");

// declaring variable of matchedCards
let matchedCard = document.getElementsByClassName("match");

 // stars list
 let starsList = document.querySelectorAll(".stars li");

 // close icon in modal
 let closeicon = document.querySelector(".close");

 // declare modal
 let modal = document.getElementById("popup1")

 // array for opened cards
var openedCards = [];


// @description shuffles cards
// @param {array}
// @returns shuffledarray
function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
};


// @description shuffles cards when page is refreshed / loads
document.body.onload = startGame();


// @description function to start a new play 
function startGame(){

    // empty the openCards array
    openedCards = [];

    // shuffle deck
    cards = shuffle(cards);
    // remove all exisiting classes from each card
    for (var i = 0; i < cards.length; i++){
        deck.innerHTML = "";
        [].forEach.call(cards, function(item) {
            deck.appendChild(item);
        });
        cards[i].classList.remove("show", "open", "match", "disabled");
    }
    // reset moves
    moves = 0;
    counter.innerHTML = moves;
    // reset rating
    for (var i= 0; i < stars.length; i++){
        stars[i].style.color = "#FFD700";
        stars[i].style.visibility = "visible";
    }
    //reset timer
    second = 0;
    minute = 0; 
    hour = 0;
    var timer = document.querySelector(".timer");
    timer.innerHTML = "0 mins 0 secs";
    clearInterval(interval);
}


// @description toggles open and show class to display cards
var displayCard = function (){
    this.classList.toggle("open");
    this.classList.toggle("show");
    this.classList.toggle("disabled");
};


// @description add opened cards to OpenedCards list and check if cards are match or not
function cardOpen() {
    openedCards.push(this);
    var len = openedCards.length;
    if(len === 2){
        moveCounter();
        if(openedCards[0].type === openedCards[1].type){
            matched();
        } else {
            unmatched();
        }
    }
};


// @description when cards match
function matched(){
    openedCards[0].classList.add("match", "disabled");
    openedCards[1].classList.add("match", "disabled");
    openedCards[0].classList.remove("show", "open", "no-event");
    openedCards[1].classList.remove("show", "open", "no-event");
    openedCards = [];
}


// description when cards don't match
function unmatched(){
    openedCards[0].classList.add("unmatched");
    openedCards[1].classList.add("unmatched");
    disable();
    setTimeout(function(){
        openedCards[0].classList.remove("show", "open", "no-event","unmatched");
        openedCards[1].classList.remove("show", "open", "no-event","unmatched");
        enable();
        openedCards = [];
    },1100);
}


// @description disable cards temporarily
function disable(){
    Array.prototype.filter.call(cards, function(card){
        card.classList.add('disabled');
    });
}


// @description enable cards and disable matched cards
function enable(){
    Array.prototype.filter.call(cards, function(card){
        card.classList.remove('disabled');
        for(var i = 0; i < matchedCard.length; i++){
            matchedCard[i].classList.add("disabled");
        }
    });
}


// @description count player's moves
function moveCounter(){
    moves++;
    counter.innerHTML = moves;
    //start timer on first click
    if(moves == 1){
        second = 0;
        minute = 0; 
        hour = 0;
        startTimer();
    }
    // setting rates based on moves
    if (moves > 8 && moves < 12){
        for( i= 0; i < 3; i++){
            if(i > 1){
                stars[i].style.visibility = "collapse";
            }
        }
    }
    else if (moves > 13){
        for( i= 0; i < 3; i++){
            if(i > 0){
                stars[i].style.visibility = "collapse";
            }
        }
    }
}


// @description game timer
var second = 0, minute = 0; hour = 0;
var timer = document.querySelector(".timer");
var interval;
function startTimer(){
    interval = setInterval(function(){
        timer.innerHTML = minute+"mins "+second+"secs";
        second++;
        if(second == 60){
            minute++;
            second=0;
        }
        if(minute == 60){
            hour++;
            minute = 0;
        }
    },1000);
}


// @description congratulations when all cards match, show modal and moves, time and rating
function congratulations(){
    if (matchedCard.length == 16){
        clearInterval(interval);
        finalTime = timer.innerHTML;

        // show congratulations modal
        modal.classList.add("show");

        // declare star rating variable
        var starRating = document.querySelector(".stars").innerHTML;

        //showing move, rating, time on modal
        document.getElementById("finalMove").innerHTML = moves;
        document.getElementById("starRating").innerHTML = starRating;
        document.getElementById("totalTime").innerHTML = finalTime;

        //closeicon on modal
        closeModal();
    };
}


// @description close icon on modal
function closeModal(){
    closeicon.addEventListener("click", function(e){
        modal.classList.remove("show");
        startGame();
    });
}


// @desciption for user to play Again 
function playAgain(){
    modal.classList.remove("show");
    startGame();
}


// loop to add event listeners to each card
for (var i = 0; i < cards.length; i++){
    card = cards[i];
    card.addEventListener("click", displayCard);
    card.addEventListener("click", cardOpen);
    card.addEventListener("click",congratulations);
};

That's It! You have now successfully made a Memory Matching Card Game with Javascript. I hope you enjoyed!

Live Demo

Full Code

How to make a movie app in Vanilla Javascript

Abhi Develops - SunTech — Thu, 21 Oct 2021 05:41:38 +0000

Hi Everyone!
In this post I will show you how to make a Movie App in HTML, CSS, and Vanilla Javascript. It will use data from The Movie Database (TMDB) and display it on the user's screen. When you hover over a movie, you will see the details. You can also see the amount of votes of each movie. The app will include a search bar so the user can search for any movie. If you would like more fun projects, please follow me.
Let's get started!

First we are going to create the basic user interface with HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Movie App</title>
    <meta charset="UTF-8" />
    <!--linking the stylesheet-->
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <form id="form">
        <input type="text" id="search" placeholder="Search" class="search" />
      </form>
    </header>
    <main id="main"></main>
    <!--linking the javascript file-->
    <script src="script.js"></script>
  </body>

Now let's use CSS to make the app look better:

body {
  font-family: sans-serif;
  background-color: #22254b;
}

header {
  background-color: #373b69;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}

.search {
  background-color: transparent;
  border: 2px solid #22254b;
  border-radius: 50px;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.search::placeholder {
  color: #7378c5;
}

.search::focus {
  background-color: #22254b;
}

main {
  display: flex;
  flex-wrap: wrap;
}

.movie {
  background-color: #373b69;
  border-radius: 3px;
  box-shadow: 0 4px 5px;
  overflow: hidden;
  position: relative;
  margin: 1rem;
  width: 300px;
}
.movie img {
  width: 100%;
}

.movie-info {
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 1rem;
  letter-spacing: 0.5px;
}
.movie-info span {
  background-color: #22254b;
  border-radius: 3px;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
}

.movie-info span.green {
  color: green;
}

.movie-info span.orange {
  color: orange;
}

movie-info span.red {
  color: red;
}

.overview {
  background-color: #fff;
  padding: 2rem;
  position: absolute;
  max-height: 100%;
  overflow: auto;
  left: 0;
  bottom: 0;
  right: 0;
  transform: translateY(101%);
  transition: transform 0.3s ease-in;
}
.overview h3 {
  margin-top: 0;
}

.movie:hover .overview {
  transform: translateY(0);

Next let's add Javascript.
Adding your API key from TMDB - you will need to signup to TMDB for the API key:

        const APIURL =
  "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=YOUR_API_KEY&page=1";
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
  "https://api.themoviedb.org/3/search/movie?&api_key=YOUR_API_KEY&query=";

Remember to replace YOUR_API_KEY with your api key.
Next let's add data display:

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

const getMovies = async (url) => {
  const resp = await fetch(url);
  const respData = await resp.json();

  console.log(respData);

  showMovies(respData.results);
};

const showMovies = (movies) => {
  main.innerHTML = "";

  movies.forEach((movie) => {
    const { poster_path, title, vote_average, overview } = movie;

    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");

    movieEl.innerHTML = `
      <img
        src="${IMGPATH + poster_path}"
        alt="${title}"
      />
      <div class="movie-info">
        <h3>${title}</h3>
        <span class="${getClassByRate(vote_average)}">${vote_average}</span>
      </div>
      <div class="overview">
        <h3>Overview:</h3>
        ${overview}
      <div>`;
    main.appendChild(movieEl);
  });
};

Then, let's add the Votes functionality:

getMovies(APIURL);

const getClassByRate = (vote) => {
  if (vote >= 8) {
    return "green";
  } else if (vote >= 5) {
    return "orange";
  } else {
    return "red";
  }
};

Lastly, the search bar functionality:

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const searchTerm = search.value;

  if (searchTerm) {
    getMovies(SEARCHAPI + searchTerm);
    search.value = "";
  }
});

That's it! You have now made a good-looking and working Movie App.

Live Demo

Full Code

How to make Rock Paper Scissors in Javascript

Abhi Develops - SunTech — Sun, 10 Oct 2021 20:31:19 +0000

Hi Everyone!
In this post, I will show you how to make Rock Paper Scissors in HTML, CSS, and Javascript. Follow me for more projects. Let's get started!

This will be the basic HTML User Interface:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Rock Paper Scissor Game</title>
    <!--Fontawesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div class="scores">
            <p>Computer : 
                <span id="computer_score">0</span>
            </p>
            <p>
                You :
                <span id="user_score">0</span>
            </p>
        </div>
        <div class="weapons">
            <button onclick="checker('rock')">
                <i class="far fa-hand-rock"></i>
            </button>
            <button onclick="checker('paper')">
                <i class="far fa-hand-paper"></i>
            </button>
            <button onclick="checker('scissor')">
                <i class="far fa-hand-scissors"></i>
            </button>
        </div>
        <div class="details">
            <p id="user_choice"></p>
            <p id="comp_choice"></p>
            <p id="result"></p>
        </div>
    </div>

<!--linking the javascript file-->
<script src="app.js"></script>
</body>

Now let's style it to make it look better:

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #ffcf1b,
        #ff8b1b
    );
}
.container{
    width: 45%;
    min-width: 500px;
    background-color: #ffffff;
    padding: 40px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.scores{
    margin-bottom: 50px;
    text-align: right;
}
.weapons{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-around;
}
.weapons button{
    background-color: #ffd51b;
    color: #000000;
    border: none;
    font-size: 50px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}
.details{
    margin-top: 30px;
    text-align: center;
}
.scores,.details{
    font-family: 'Poppins',sans-serif;
    font-weight: 400;
    font-size: 15px;
}
#result{
    width: 180px;
    padding: 10px 0;
    margin: 30px auto;
    font-weight: 600;
    letter-spacing: 0.5px;
}
#user_choice,
#computer_choice{
    font-weight: 400;
    margin-bottom: 10px;
}
span{
    font-weight: 600;
}

Lastly, let's add the Javascript to make it functional:

 let [computer_score,user_score]=[0,0];
let result_ref = document.getElementById("result");
let choices_object = {
    'rock' : {
        'rock' : 'draw',
        'scissor' : 'win',
        'paper' : 'lose'
    },
    'scissor' : {
        'rock' : 'lose',
        'scissor' : 'draw',
        'paper' : 'win'
    },
    'paper' : {
        'rock' : 'win',
        'scissor' : 'lose',
        'paper' : 'draw'
    }

}

function checker(input){
    var choices = ["rock", "paper", "scissor"];
    var num = Math.floor(Math.random()*3);

    document.getElementById("comp_choice").innerHTML = 
    ` Computer choose <span> ${choices[num].toUpperCase()} </span>`;

    document.getElementById("user_choice").innerHTML = 
    ` You choose <span> ${input.toUpperCase()} </span>`;

    let computer_choice = choices[num];

    switch(choices_object[input][computer_choice]){
        case 'win':
            result_ref.style.cssText = "background-color: #cefdce; color: #689f38";
            result_ref.innerHTML = "YOU WIN";
            user_score++;
            break;
        case 'lose':
            result_ref.style.cssText = "background-color: #ffdde0; color: #d32f2f";
            result_ref.innerHTML = "YOU LOSE";
            computer_score++;
            break;
        default:
            result_ref.style.cssText = "background-color: #e5e5e5; color: #808080";
            result_ref.innerHTML = "DRAW";
            break;
    }

    document.getElementById("computer_score").innerHTML = computer_score;
    document.getElementById("user_score").innerHTML = user_score;
}

That's it! You have now created Rock Paper Scissors in HTML, CSS, and Javascript.

Live Demo

Full Code