flash cards
JS
<header>
<div>
<div class="container">
<div class="nav">
<h1>flash-cards</h1>
<button>New card</button>
<button>del cards</button>
<h1>delcards</h1>
</div>
</div>
</div>
</header>
htmll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="container">
<div class="nav">
<h1>flashcards</h1>
<button>
<h1>New Card button</h1>
</button>
<h1>Del card button</h1>
</div>
<header>
<div class="container">
<div class="nav">
<h1>flashcards</h1>
</div>
<div>
<div>
<button>
new card button
</button>
<button>del card</button>
<div>
<button onclick="showCreateCard">New Card</button>
<button>Del Card</button>
<button onclick="showCreateCardBox">
<button onclick="delFlashcard">Del Cards</button>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="createBox">
<h2 style="text-align: center;color: black;">Create flashcards</h2>
<label for="question">Question</label>
<textarea id="question" cols="30" rows="10"></textarea>
<br>
<label for="answer">Answer</label>
<textarea id="answer" cols="30" rows="10"></textarea>
<textarea id="answer" cols="30" rows="10"></textarea>
</div>
<button onclick="addFlashCard()">Save</button>
<button onclick="hideCreateBox()">Close</button>
</div>
<div class="flashcards">FlashCards</div>
</div>
<script src="script.js"></script>
</div>
</header>
</body>
</html>
css
body{
font-family: '';
background-color: rgb(193, 114, 114);
}
.container{
border: 1px solid black;
width: 95%;
height: 100vh;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.digitalclock{
border: 1px solid black;
width: fit-content;
margin: auto;
padding: 10px;
border-radius: 2px;
color: rgb(242, 235, 235);
background: rgb(29, 28, 26);
}
.digitalclock h1{
display: inline-block;
margin: 0 10px;
font-weight: bold;
font-size: 5rem;
}
/* @media(max-width: 768px;){
#bar1,#bar2{
display: none;}
.digitalClock{
text-align: center;
width: 100%;
}
.digitalClock h1{
display: block;
}
@media(max-width: 480px;){
#bar1,#bar2{
display: none;
}
} */
/* #day h1{
display: flex;
justify-content: center;
} */
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="container">
<div class="nav">
<h1>flashcards</h1>
<button>
<h1>New Card button</h1>
</button>
<h1>Del card button</h1>
</div>
<header>
<div class="container">
<div class="nav">
<h1>flashcards</h1>
</div>
<div>
<div>
<button>
new card button
</button>
<button>del card</button>
<div>
<button onclick="showCreateCard">New Card</button>
<button>Del Card</button>
<button onclick="showCreateCardBox">
<button onclick="delFlashcard">Del Cards</button>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="createBox">
<h2 style="text-align: center;color: black;">Create flashcards</h2>
<label for="question">Question</label>
<textarea id="question" cols="30" rows="10"></textarea>
<br>
<label for="answer">Answer</label>
<textarea id="answer" cols="30" rows="10"></textarea>
<textarea id="answer" cols="30" rows="10"></textarea>
</div>
<button onclick="addFlashCard()">Save</button>
<button onclick="hideCreateBox()">Close</button>
</div>
<div class="flashcards">FlashCards</div>
</div>
<script src="script.js"></script>
</div>
</header>
</body>
</html>
Comments
Post a Comment