You are currently viewing Flashcards Using HTML, CSS, & JavaScript

Flashcards Using HTML, CSS, & JavaScript

Flashcards Using HTML, CSS, & JavaScript

In this article, we are going to create a flashcard project using HTML, CSS & JS. 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 & JavaScript.

Hello Coders!! Welcome to Codewithrandom with this new and fresh blog in which we are going to make a flashcards project using the scripting language HTML, CSS & JavaScript. I hope you have got an idea about this project.

We’ll show you Flashcards Using HTML, CSS, & JavaScript with complete source code available for you so you just copy and paste it into your project.

HTML Code for Flashcards

Table of Contents

<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>

In this HTML Code in the header section we have linked and jQuery framework which will give another level to this project. Then we defined a header and then a section that has some paragraphs and two buttons that will help to start the learning and check the answer and a footer section with a copyright logo. Let us code the CSS part to style the project flashcards.

Color Slider using HTML, CSS &JavaScript (RGB Color Slider)

CSS Code for Flashcards

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. Let us code the JavaScript part to make it use responsive.

Price Range Slider Using HTML , CSS & JavaScript

JavaScript Code for Flashcards (include jquery link form codepen below)

$( 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");
        });


})

In this code of JavaScript, we have linked 20 images of questions and answers and then we have called a function math random which will arrange the imported image randomly and will display it as soon as the user will click the button. To check the answer we have defined a click function and there we have defined a time delay and in that we have also defined a color for the check answer section this is possible because of the media screen section in CSS code. Let us see the final output of the project.

Final Output

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

In this article, We’ll provide you with Flashcards Using HTML, CSS, & JavaScript with complete source code ready to implement with your project made with your own ideas.

If you find out this Blog helpful, then make sure to search code random 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

Leave a Reply