ADVERTISEMENT

Flashcards Using HTML, CSS, and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Flashcards Using HTML, CSS, and 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 and JavaScript.

ADVERTISEMENT

ADVERTISEMENT

Hello Coder! 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 and JavaScript. I hope you have got an idea about this project.

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

ADVERTISEMENT

Code ByHarshh9
Project DownloadLink Available Below
Language UsedHTML, CSS and JavaScript
External Link / DependenciesYES
ResponsiveNO

HTML Code for Flashcards

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

ADVERTISEMENT

Read also: 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.

Read also: Price Range Slider Using HTML , CSS & JavaScript

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

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

How to create Flashcards Using HTML, CSS, and JavaScript?

We’ll Show You Flashcards Using HTML, CSS, And JavaScript With Complete Source Code Available For You So You Just Copy And Paste It Into Your Project.

ADVERTISEMENT

Flashcards Using HTML, CSS, and JavaScript source code

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

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT