Flashcards Using HTML and JavaScript With Code

Hello Coder! Welcome to Codewithrandom with this new and fresh blog. In this article, we will create a Flashcard using HTML, CSS, and JavaScript With Code. A study or memorization aid with information on one or both sides is flashcards. Students of all levels can learn effectively and efficiently by using flashcards.

This is basically a new way of learning JavaScript it will contain all the questions related to JavaScript. It will provide a new way of learning JavaScript using the front-end development tool and scripting language HTML, CSS, and JavaScript.

We'll show you Flashcards Using HTML, CSS, and JavaScript with Source Code available so you just copy and paste it into your project.

Html Flashcards Code:-

<html>
  <head>
    <title>JavaScript &amp; javascript Flashcards</title>

    <link rel="stylesheet" href="c ss/flashcards.css" />

  <script src="js/jquery-1.11.0.js"></script>

  </head>
  <body>
  <div class="wrap-container">
    <div class="container-fluid">

    <div class="head">
      <h2>Welcome to Javascript Flashcards!</h2>
    </div>

    <div class="section">
      <h2>Want to try a new way of learning ?</h2>
      <h4>50 pairs of flashcards are waiting for you to shuffle them</h2>
      <button type="button" class="btn btn-default" id="question">Try the flashcards method!</button>
    <div class="row">

    <div class="col-md-4" > </div>
    <div class="flashcard col-md-4" >
      <img src="" id="card" class="img-responsive">
    </div>

    <div class="col-md-4" > </div>

   </div>
      <button type="button" class="btn btn-default" id="checkanswer">Check answer</button>
  </div>

 </div>  
    <footer>
<p> &copy; Codewithrandom</p>
    </footer>
  </div>  
  </body>
</html>

This project will be elevated by the inclusion of the linked and jQuery framework in the header portion of the HTML code. Then we specified a header, a section with a few paragraphs and two buttons to help users begin learning and check their responses, and a footer section with a copyright logo.

To give our flash cards structure, we used some fundamental HTML components. The heading for the flash card will be added using the h2 inside the head portion.

Now we will add the content to the section using the h2 and h4 tags, and we will make the button for creating the flash card using the button tag.

Let us code the CSS part to style the project flashcards.

CSS Flash Cards Code:-

body{
  background-color:black;
}

.wrap-container{
  background-color: #6f9899;
}
.container-fluid{
  margin:0;
  padding:0;
}
.head{
  background-color: #6f9899;
  padding:0px 0 5px 0;
}
.head h2{
text-align: center;
}
.section{
  background: url('https://agoragdl.com.mx/wp-content/themes/made/made/images/backgrounds/bg-blur-14.jpg')  no-repeat center center fixed;
  background-size: cover;
  padding: 15px 15px;
  text-align: center;
}
.section h2{
  text-align: center;
  color: #c0c1b0;
  text-shadow: 2px 2px 2px black;
}
.section h4{
  color:black;
  text-shadow:1px 1px 1px #c0c1b0;
  padding-top:10px;
}
.btn{
  font-size: 18px;
  text-align: center;
  background-color: orange;
  margin-top: 20px;
  margin-bottom: 30px;

}


.flashcard{
  border:1px solid white; 
  margin:15px auto;
}

.col-md-4{
  padding: 0;
}

footer{
  background-color: #6f9899;
  text-align: center;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 40px;

}
footer p{
  text-align: center;

}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .head h2{
    font-size:18px;
  }
  .section h2{
   font-size:18px; 
  }
  .flashcard{
    max-width:230px;
    margin:0 auto;
  }
}

In this CSS code we have first defined a body bg color for the project then we have called wrap content and there we have defined another color which is basically the color of the cards. Then the header and section in which the content is defined it has been styled by giving text color and alignment.

After that, we styled the footer with background color, height, padding, and text alignment. And in last we have defined the media-only screen part which will display only the media which is defined under that section.

We'll use the body tag selector to set the background color to "black," the class selector (.container) to set the background color to "black," the tag selector to center the text, and the background picture to add to our flash cards.

Our flash cards now have some basic styling added, and I think you should try adding some of your own styling to add the unique aspects to the flash cards.

Let us code the JavaScript part to make it use responsive.

Javascript Flashcards Code:-

$( document ).ready(function() {

var cards=[
{id:0,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668181/Flashcards/js/JS_Q1.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668173/Flashcards/js/JS_A1.png'},

{id:1,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668182/Flashcards/js/JS_Q2.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668172/Flashcards/js/JS_A2.png'},

{id:2,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668182/Flashcards/js/JS_Q3.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668175/Flashcards/js/JS_A3.png'},

{id:3,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668182/Flashcards/js/JS_Q4.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668174/Flashcards/js/JS_A4.png'},

{id:4,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668182/Flashcards/js/JS_Q5.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668173/Flashcards/js/JS_A5.png'},
{id:5,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668183/Flashcards/js/JS_Q6.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668174/Flashcards/js/JS_A6.png'},

{id:6,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668183/Flashcards/js/JS_Q7.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668173/Flashcards/js/JS_A7.png'},

{id:7,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668183/Flashcards/js/JS_Q8.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668175/Flashcards/js/JS_A8.png'},

{id:8,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668184/Flashcards/js/JS_Q9.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668175/Flashcards/js/JS_A9.png'},

 {id:9,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668183/Flashcards/js/JS_Q10.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668176/Flashcards/js/JS_A10.png'},

{id:10,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668183/Flashcards/js/JS_Q11.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668176/Flashcards/js/JS_A11.png'},

{id:11,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668184/Flashcards/js/JS_Q12.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668176/Flashcards/js/JS_A12.png'},

{id:12,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668184/Flashcards/js/JS_Q13.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668176/Flashcards/js/JS_A13.png'},

{id:13,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668184/Flashcards/js/JS_Q14.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668178/Flashcards/js/JS_A14.png'},

{id:14,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668185/Flashcards/js/JS_Q15.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668177/Flashcards/js/JS_A15.png'},

{id:15,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668184/Flashcards/js/JS_Q16.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668171/Flashcards/js/JS_A16.png'},

{id:16,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668187/Flashcards/js/JS_Q17.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668171/Flashcards/js/JS_A17.png'},

{id:17,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668185/Flashcards/js/JS_Q18.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668170/Flashcards/js/JS_A18.png'},

{id:18,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668185/Flashcards/js/JS_Q19.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668171/Flashcards/js/JS_A19.png'},

{id:19,
 question:'http://res.cloudinary.com/aliencharm/image/upload/v1494668181/Flashcards/js/JS_Q1.png',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668172/Flashcards/js/JS_A20.png'},

{id:20,
 question:'',
 answer:'http://res.cloudinary.com/aliencharm/image/upload/v1494668172/Flashcards/js/JS_A20.png'}

];
/*for (var i=0;i<cards.length;i++) {
var randomcard = Math.floor(Math.random() * cards.id);
console.log(randomcard);

}*/

var ran;
ran= Math.round(Math.random()*20);
/*var blindcard=cards[20].question;
    var el=document.getElementById('card');
    //el[0].classList.add('img-responsive');//+=' flashtext';
    el.src=blindcard;
*/
    $('.flashcard').hide();
    $('#checkanswer').hide();
 var displaycard=cards[ran].question;
    var el=document.getElementById('card');
    el.src=displaycard;


$('#question').on('click',function(){

    ran= Math.round(Math.random()*20);

    //console.log(ran);

    var displaycard=cards[ran].question;
    var el=document.getElementById('card');
    el.src=displaycard;

    $('.flashcard').show();
    $('.flashcard').effect("bounce",{ times: 3 },"slow");
    $('#checkanswer').show();
    });

    $('#question').on("mousedown",function(){
            $('#question').css("background-color","#f2551d");
    });
    $('#question').on("mouseleave",function(){
            $('#question').css("background-color","orange");
    });
    $('#question').on("mouseenter",function(){
            $('#question').css("background-color","#f2551d");
        });


$('#checkanswer').on('click',function(){

    var displayanswer=cards[ran].answer;
    var el1=document.getElementById('card');
    el1.src=displayanswer;

    $('.flashcard').show();
    $('.flashcard').effect("bounce",{ times: 3 },"slow");

    });

    $('#checkanswer').on("mousedown",function(){
            $('#checkanswer').css("background-color","#f2551d");
    });
    $('#checkanswer').on("mouseleave",function(){
            $('#checkanswer').css("background-color","orange");
    });
    $('#checkanswer').on("mouseenter",function(){
            $('#checkanswer').css("background-color","#f2551d");
        });
})

20 images of questions and answers are linked together in this JavaScript code, and after that, we call the function math random, which arranges the imported image in random order and displays it when the user presses the button. We have established a click function with a time delay to check the answer, and we have also established a color for the check answer area. The media screen section of the CSS code makes this feasible. Let's examine the project's outcome.

We have successfully created our Flashcards using HTML, CSS and JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You For Visiting!!!

Written By – Harsh Sawant

Code By – harshh9