pawan941394
4 years ago
parent
3b2d378630
commit
8e351be20b
@ -0,0 +1,11 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 30%;
|
||||||
|
margin-top: 10%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>JavaScript Background color changes</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="body">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-primary">Change Background</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
let arr = [
|
||||||
|
'black', 'orange', 'green', 'red', 'blue'
|
||||||
|
];
|
||||||
|
let button = document.querySelector("button");
|
||||||
|
let body = document.getElementById("body");
|
||||||
|
|
||||||
|
let a = 0;
|
||||||
|
button.addEventListener("click", changeBackground);
|
||||||
|
|
||||||
|
function changeBackground() {
|
||||||
|
const indexs = parseInt(Math.random() * arr.length)
|
||||||
|
let texts = arr[indexs];
|
||||||
|
body.style.background = texts;
|
||||||
|
button.innerHTML = texts;
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
body {
|
||||||
|
background-color: #000f42;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: inherit;
|
||||||
|
background-color: turquoise;
|
||||||
|
border: 0;
|
||||||
|
opacity: .25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: transparent;
|
||||||
|
border: 3px solid #0d6efd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 44%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notescontainer {
|
||||||
|
max-width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notecard {
|
||||||
|
margin: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 8vh;
|
||||||
|
margin-bottom: 8vh;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
color: aliceblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: aliceblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: #000f42;
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>To_Do_List!</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-expand-lg ">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="/">ToDo</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="searchTxt">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="container my-3">
|
||||||
|
<h1> Welcome To ToDo List</h1>
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Add A Note</h5>
|
||||||
|
|
||||||
|
<div class="form-floating">
|
||||||
|
<textarea class="form-control" placeholder="Leave a comment here" id="addText"></textarea>
|
||||||
|
<label for="floatingTextarea">Add notes</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary mt-3" id="addBtn">Add Note</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<div class="notescontainer">
|
||||||
|
<h1>Your Notes</h1>
|
||||||
|
<hr>
|
||||||
|
<div class="row container-fluid" id="notes">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
showNotes();
|
||||||
|
|
||||||
|
|
||||||
|
let addBtn = document.getElementById("addBtn");
|
||||||
|
var JSON;
|
||||||
|
addBtn.addEventListener("click", function(e) {
|
||||||
|
let addText = document.getElementById("addText");
|
||||||
|
let notes = localStorage.getItem("notes");
|
||||||
|
if (notes == null) {
|
||||||
|
notesObj = [];
|
||||||
|
} else {
|
||||||
|
notesObj = JSON.parse(notes);
|
||||||
|
}
|
||||||
|
notesObj.push(addText.value);
|
||||||
|
|
||||||
|
localStorage.setItem("notes", JSON.stringify(notesObj));
|
||||||
|
addText.value = "";
|
||||||
|
|
||||||
|
showNotes();
|
||||||
|
})
|
||||||
|
|
||||||
|
showNotes();
|
||||||
|
|
||||||
|
function showNotes() {
|
||||||
|
let notes = localStorage.getItem("notes");
|
||||||
|
if (notes == null) {
|
||||||
|
notesObj = [];
|
||||||
|
} else {
|
||||||
|
notesObj = JSON.parse(notes);
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = "";
|
||||||
|
notesObj.forEach(function(element, index) {
|
||||||
|
html += ` <div class="notecard card my-2" style="width: 18rem;">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="card-text">${element}</p>
|
||||||
|
<button onclick ="deleteNotes(this.id)" class="btn btn-primary mt-3" id="${index}">Delete Note</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
});
|
||||||
|
let notesElm = document.getElementById('notes');
|
||||||
|
if (notesObj.length != 0) {
|
||||||
|
notesElm.innerHTML = html;
|
||||||
|
} else {
|
||||||
|
notesElm.innerHTML = `Nothing is here Please add notes`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteNotes(index) {
|
||||||
|
let notes = localStorage.getItem("notes");
|
||||||
|
if (notes == null) {
|
||||||
|
notesObj = [];
|
||||||
|
} else {
|
||||||
|
notesObj = JSON.parse(notes);
|
||||||
|
}
|
||||||
|
notesObj.splice(index, 1);
|
||||||
|
localStorage.setItem("notes", JSON.stringify(notesObj));
|
||||||
|
|
||||||
|
|
||||||
|
showNotes()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let search = document.getElementById("searchTxt");
|
||||||
|
search.addEventListener("input", function() {
|
||||||
|
let inputVal = search.value.toLowerCase();
|
||||||
|
let noteCard = document.getElementsByClassName("notecard");
|
||||||
|
Array.from(noteCard).forEach(function(element) {
|
||||||
|
let cardText = element.getElementsByTagName("p")[0].innerText;
|
||||||
|
if (cardText.includes(inputVal)) {
|
||||||
|
element.style.display = "block";
|
||||||
|
} else {
|
||||||
|
element.style.display = "none";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
After Width: | Height: | Size: 547 KiB |
|
After Width: | Height: | Size: 186 KiB |
@ -0,0 +1,42 @@
|
|||||||
|
body {
|
||||||
|
background-image: url(./img/back.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.butt {
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Modal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 30%;
|
||||||
|
margin-top: -12%;
|
||||||
|
background-image: url(./img/modal.png);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 11vh;
|
||||||
|
color: antiquewhite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Modal button {
|
||||||
|
max-width: 8%;
|
||||||
|
margin-left: 92%;
|
||||||
|
border-radius: 11px;
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>Hello, world!</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="butt">
|
||||||
|
<button class="btn btn-primary" id="open">
|
||||||
|
Modal
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="Modal" id="Modal">
|
||||||
|
|
||||||
|
<button class="btn btn-primary" id="xbtn">
|
||||||
|
X
|
||||||
|
</button>
|
||||||
|
<div class="content">
|
||||||
|
<h2>This is modal</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
let Btn = document.getElementById("open");
|
||||||
|
let mBtn = document.getElementById("Modal");
|
||||||
|
let closeBtn = document.getElementById("xbtn");
|
||||||
|
closeBtn.addEventListener("click", function(e) {
|
||||||
|
mBtn.style.display = "none";
|
||||||
|
Btn.style.display = "block";
|
||||||
|
|
||||||
|
})
|
||||||
|
Btn.addEventListener("click", function(e) {
|
||||||
|
mBtn.style.display = "block";
|
||||||
|
Btn.style.display = "none";
|
||||||
|
})
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 12%;
|
||||||
|
background: black;
|
||||||
|
max-width: 25%;
|
||||||
|
padding: 54px;
|
||||||
|
border-radius: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 12px 12px 1px -7px darkgrey;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title> Counter Project!</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Counter
|
||||||
|
</h2>
|
||||||
|
<h1 id="number"></h1>
|
||||||
|
<button class="btn btn-dark" id="button-l">Lower</button>
|
||||||
|
<button class="btn btn-primary" id="button-2">Add</button>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js " integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4 " crossorigin="anonymous "></script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
let low = document.getElementById("button-l");
|
||||||
|
let add = document.getElementById("button-2");
|
||||||
|
let num = document.getElementById("number");
|
||||||
|
let val = num.innerText;
|
||||||
|
console.log(val);
|
||||||
|
low.addEventListener("click", function(e) {
|
||||||
|
val = val - 1;
|
||||||
|
|
||||||
|
num.innerText = val;
|
||||||
|
|
||||||
|
});
|
||||||
|
add.addEventListener("click", function(e) {
|
||||||
|
val = val + 1;
|
||||||
|
|
||||||
|
num.innerText = val;
|
||||||
|
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 53 KiB |
@ -0,0 +1,146 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<title>Filters!</title>
|
||||||
|
<style>
|
||||||
|
.btn {
|
||||||
|
border: 2px solid;
|
||||||
|
background: azure;
|
||||||
|
border-radius: 11px;
|
||||||
|
margin: 56px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img {
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 1px;
|
||||||
|
background: burlywood;
|
||||||
|
border-top-right-radius: 14px;
|
||||||
|
border-top-left-radius: 14px;
|
||||||
|
max-width: 134%;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterDiv {
|
||||||
|
border: none;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 20%;
|
||||||
|
margin: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterDiv-con {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: stretch;
|
||||||
|
width: 66%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000f42;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container mt-5 a-auto mb-2">
|
||||||
|
<button type="button" class="btn" data-filter="all" active>All</button>
|
||||||
|
<button type="button" class="btn" data-filter="blackCat">Black Cat</button>
|
||||||
|
<button type="button" class="btn" data-filter="whiteCat">White Cat</button>
|
||||||
|
<button type="button" class="btn" data-filter="lion">Lion</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-group" id="card-group">
|
||||||
|
<div class="filterDiv-con">
|
||||||
|
<div class="filterDiv blackCat">
|
||||||
|
<img src="./img/b1.jpg" class="card-img" alt="...">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv blackCat">
|
||||||
|
<img src="./img/b2.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv blackCat">
|
||||||
|
<img src="./img/b3.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv whiteCat">
|
||||||
|
<img src="./img/w1.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv whiteCat">
|
||||||
|
<img src="./img/w2.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv whiteCat">
|
||||||
|
<img src="./img/w3.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filterDiv lion">
|
||||||
|
<img src="./img/l1.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filterDiv lion">
|
||||||
|
<img src="./img/l2.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filterDiv lion">
|
||||||
|
<img src="./img/l3.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('.btn').click(function() {
|
||||||
|
const value = $(this).attr('data-filter');
|
||||||
|
if (value == 'all') {
|
||||||
|
$('.filterDiv').show('1000');
|
||||||
|
} else {
|
||||||
|
$('.filterDiv').not('.' + value).hide('1000');
|
||||||
|
$('.filterDiv').filter('.' + value).show('1000');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 53 KiB |
@ -0,0 +1,76 @@
|
|||||||
|
.btn {
|
||||||
|
border: 2px solid;
|
||||||
|
background: azure;
|
||||||
|
border-radius: 11px;
|
||||||
|
margin: 56px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img {
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 1px;
|
||||||
|
background: burlywood;
|
||||||
|
border-top-right-radius: 14px;
|
||||||
|
border-top-left-radius: 14px;
|
||||||
|
max-width: 134%;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterDiv {
|
||||||
|
border: none;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 20%;
|
||||||
|
display: none;
|
||||||
|
margin: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterDiv-con {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: stretch;
|
||||||
|
width: 66%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000f42;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.active {
|
||||||
|
background-color: #666;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
filterSelection("all")
|
||||||
|
|
||||||
|
function filterSelection(c) {
|
||||||
|
var x, i;
|
||||||
|
x = document.getElementsByClassName("filterDiv");
|
||||||
|
if (c == "all") c = "";
|
||||||
|
for (i = 0; i < x.length; i++) {
|
||||||
|
w3RemoveClass(x[i], "show");
|
||||||
|
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function w3AddClass(element, name) {
|
||||||
|
var i, arr1, arr2;
|
||||||
|
arr1 = element.className.split(" ");
|
||||||
|
arr2 = name.split(" ");
|
||||||
|
for (i = 0; i < arr2.length; i++) {
|
||||||
|
if (arr1.indexOf(arr2[i]) == -1) {
|
||||||
|
element.className += " " + arr2[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function w3RemoveClass(element, name) {
|
||||||
|
var i, arr1, arr2;
|
||||||
|
arr1 = element.className.split(" ");
|
||||||
|
arr2 = name.split(" ");
|
||||||
|
for (i = 0; i < arr2.length; i++) {
|
||||||
|
while (arr1.indexOf(arr2[i]) > -1) {
|
||||||
|
arr1.splice(arr1.indexOf(arr2[i]), 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
element.className = arr1.join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add active class to the current button (highlight it)
|
||||||
|
var btnContainer = document.getElementById("container");
|
||||||
|
var btns = btnContainer.getElementsByClassName("btn");
|
||||||
|
for (var i = 0; i < btns.length; i++) {
|
||||||
|
btns[i].addEventListener("click", function() {
|
||||||
|
var current = document.getElementsByClassName("active");
|
||||||
|
current[0].className = current[0].className.replace(" active", "");
|
||||||
|
this.className += " active";
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>Filters!</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container mt-5 a-auto mb-2" id="container">
|
||||||
|
<button type="button" class="btn active" onclick="filterSelection('all')">All</button>
|
||||||
|
<button type="button" class="btn" onclick="filterSelection('blackCat')">Black Cat</button>
|
||||||
|
<button type="button" class="btn" onclick="filterSelection('whiteCat')">White Cat</button>
|
||||||
|
<button type="button" class="btn" onclick="filterSelection('lion')">Lion</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-group" id="card-group">
|
||||||
|
<div class="filterDiv-con">
|
||||||
|
<div class="filterDiv blackCat">
|
||||||
|
<img src="./img/b1.jpg" class="card-img" alt="...">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv blackCat">
|
||||||
|
<img src="./img/b2.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv blackCat">
|
||||||
|
<img src="./img/b3.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv whiteCat">
|
||||||
|
<img src="./img/w1.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv whiteCat">
|
||||||
|
<img src="./img/w2.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
<div class="filterDiv whiteCat">
|
||||||
|
<img src="./img/w3.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filterDiv lion">
|
||||||
|
<img src="./img/l1.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filterDiv lion">
|
||||||
|
<img src="./img/l2.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filterDiv lion">
|
||||||
|
<img src="./img/l3.jpg" class="card-img" alt="...">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="./index.js">
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 722 KiB |
@ -0,0 +1,67 @@
|
|||||||
|
body {
|
||||||
|
background-image: url(./img/back.jpg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 50%;
|
||||||
|
background: black;
|
||||||
|
padding: 56px;
|
||||||
|
margin-top: 8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 124px;
|
||||||
|
border-radius: 62px;
|
||||||
|
height: 109px;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: antiquewhite;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
user-select: none;
|
||||||
|
color: antiquewhite;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides {
|
||||||
|
margin-top: 47px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: aquamarine;
|
||||||
|
font-weight: 700;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 84px;
|
||||||
|
height: 39px;
|
||||||
|
position: absolute;
|
||||||
|
margin: 170px -58px;
|
||||||
|
color: floralwhite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second {
|
||||||
|
width: 84px;
|
||||||
|
height: 39px;
|
||||||
|
position: absolute;
|
||||||
|
margin: -204px 41%;
|
||||||
|
color: floralwhite;
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>Hello, world!</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" id="prev" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
|
||||||
|
</svg>
|
||||||
|
<div class="texts">
|
||||||
|
<h2>Client</h2>
|
||||||
|
<h2>Testimonials</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slides">
|
||||||
|
<div id="img">
|
||||||
|
<img src="./img/1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div id="name">
|
||||||
|
<h4>nishu</h4>
|
||||||
|
</div>
|
||||||
|
<div id="about">
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill second" viewBox="0 0 16 16" id="next">
|
||||||
|
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
const reviews = [{
|
||||||
|
id: 1,
|
||||||
|
name: "Nishu",
|
||||||
|
img: "./img/1.jpg",
|
||||||
|
text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Pawan",
|
||||||
|
img: "./img/3.jpg",
|
||||||
|
text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Bro",
|
||||||
|
img: "./img/4.jpg",
|
||||||
|
text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Jyoti",
|
||||||
|
img: "./img/2.jpg",
|
||||||
|
text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio ",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let nameSeen = document.querySelector("h4");
|
||||||
|
let para = document.querySelector("p");
|
||||||
|
let prev = document.getElementById("prev");
|
||||||
|
let img = document.querySelector("img")
|
||||||
|
|
||||||
|
let next = document.getElementById("next");
|
||||||
|
window.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const item = reviews[currentItem];
|
||||||
|
|
||||||
|
nameSeen.textContent = item.name;
|
||||||
|
para.textContent = item.text;
|
||||||
|
img.src = item.img;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let currentItem = 0;
|
||||||
|
|
||||||
|
function showPerson(person) {
|
||||||
|
const item = reviews[person];
|
||||||
|
img.src = item.img;
|
||||||
|
nameSeen.textContent = item.name;
|
||||||
|
para.textContent = item.text;
|
||||||
|
|
||||||
|
}
|
||||||
|
next.addEventListener("click", function() {
|
||||||
|
currentItem++;
|
||||||
|
if (currentItem > reviews.length - 1) {
|
||||||
|
currentItem = 0;
|
||||||
|
}
|
||||||
|
showPerson(currentItem);
|
||||||
|
});
|
||||||
|
prev.addEventListener("click", function() {
|
||||||
|
currentItem--;
|
||||||
|
if (currentItem < 0) {
|
||||||
|
currentItem = reviews.length - 1;
|
||||||
|
}
|
||||||
|
showPerson(currentItem);
|
||||||
|
});
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 34%;
|
||||||
|
margin-top: 10%;
|
||||||
|
border: 2px solid;
|
||||||
|
padding: 48px;
|
||||||
|
border-radius: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content div {
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
color: #fff;
|
||||||
|
background-color: green;
|
||||||
|
border-color: #0d6efd;
|
||||||
|
border-radius: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
border-radius: 11px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-bottom: -29px;
|
||||||
|
margin-top: 1px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
color: aqua;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
color: aqua;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menChoice {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#boatGuess {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#al-message strong {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 900;
|
||||||
|
color: teal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading h2 {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
color: aquamarine;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000f;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:900px) {
|
||||||
|
.container {
|
||||||
|
max-width: 47%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 700px) {
|
||||||
|
.container {
|
||||||
|
max-width: 65%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
.container {
|
||||||
|
max-width: 81%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
.container {
|
||||||
|
max-width: 96%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>Hello, world!</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="heading">
|
||||||
|
<h2>Play With Boat</h2>
|
||||||
|
<p>Select Any number from 1-5</p>
|
||||||
|
</div>
|
||||||
|
<div id="aleartdiv">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div> <input type="number" class="form-control input" placeholder="Server" aria-label="Server" id="input">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-primary" id="submit-guess">Submit Guess</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 id="menChoice"></h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<strong id="boatGuess"></strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
let boat = Math.floor(Math.random() * 5);
|
||||||
|
let input = document.getElementById("input");
|
||||||
|
let submitGuess = document.getElementById("submit-guess");
|
||||||
|
let menChoice = document.getElementById("menChoice");
|
||||||
|
|
||||||
|
|
||||||
|
let boatGuess = document.getElementById("boatGuess");
|
||||||
|
let AlertDiv = document.getElementById("aleartdiv");
|
||||||
|
submitGuess.addEventListener("click", function() {
|
||||||
|
|
||||||
|
|
||||||
|
boatGuess.style.display = "block";
|
||||||
|
menChoice.style.display = "block";
|
||||||
|
menChoice.innerHTML = "You Choses = " + input.value;
|
||||||
|
boatGuess.innerHTML = "Boat Choose = " + boat;
|
||||||
|
console.log(boat);
|
||||||
|
|
||||||
|
if (boat == input.value) {
|
||||||
|
|
||||||
|
AlertDiv.innerHTML = ` <div class="alert alert-success alert-dismissible fade show" role="alert" id="al-message">
|
||||||
|
<strong id="final_message">Congrats You Won !!</strong>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>`;
|
||||||
|
} else {
|
||||||
|
|
||||||
|
AlertDiv.innerHTML = ` <div class="alert alert-danger alert-dismissible fade show" role="alert" id="al-message">
|
||||||
|
<strong id="final_message">Sorry You Lose !!</strong>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
boat = Math.floor(Math.random() * 5)
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,21 @@
|
|||||||
|
.flex-box-container-2 img {
|
||||||
|
border: 1px solid green;
|
||||||
|
width: 30%;
|
||||||
|
margin: 10px;
|
||||||
|
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-box-rps img:hover {
|
||||||
|
box-shadow: 0px 10px 50px rgba(37, 58, 223, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-3 {
|
||||||
|
border: 1px solid black;
|
||||||
|
max-width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10%;
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>JS games</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container-3">
|
||||||
|
<h2>Challenge 3 : Rock, Paper , Scissors
|
||||||
|
</h2>
|
||||||
|
<hr>
|
||||||
|
<div class="flex-box-rps" id="flex-box-rps-div">
|
||||||
|
<img id="rock" src="./rock.png" height="150" , width="150" onclick="rpsGame(this)">
|
||||||
|
<img id="paper" src="./Red Book Playful Pop of Color Education Logo (3).png" height="150" , width="150" onclick="rpsGame(this)">
|
||||||
|
<img id="scissors" src="./Red Book Playful Pop of Color Education Logo (2).png" height="150" , width="150" onclick="rpsGame(this)">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
// rock paper scissors
|
||||||
|
function rpsGame(yourChoice) {
|
||||||
|
console.log(yourChoice);
|
||||||
|
var humanChoice, botChoice;
|
||||||
|
humanChoice = yourChoice.id;
|
||||||
|
|
||||||
|
|
||||||
|
botChoice = numberToChoice(randToRpsInt());
|
||||||
|
console.log('computerChoice', botChoice);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
result = decideWinner(humanChoice, botChoice);
|
||||||
|
console.log(result);
|
||||||
|
|
||||||
|
message = finalMessage(result);
|
||||||
|
console.log(message);
|
||||||
|
rpsFrontEnd(yourChoice.id, botChoice, message);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function randToRpsInt() {
|
||||||
|
return Math.floor(Math.random() * 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
function numberToChoice(number) {
|
||||||
|
return ['rock', 'paper', 'scissors'][number];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function decideWinner(yourChoice, computerChoice) {
|
||||||
|
var rpsDatabase = {
|
||||||
|
'rock': { 'scissors': 1, 'rock': 0.5, 'paper': 0 },
|
||||||
|
'paper': { 'rock': 1, 'paper': 0.5, 'scissors': 0 },
|
||||||
|
'scissors': { 'paper': 1, 'scissors': 0.5, 'rock': 0 }
|
||||||
|
};
|
||||||
|
|
||||||
|
var yourScore = rpsDatabase[yourChoice][computerChoice];
|
||||||
|
var computerScore = rpsDatabase[computerChoice][yourChoice];
|
||||||
|
|
||||||
|
return [yourScore, computerScore];
|
||||||
|
}
|
||||||
|
|
||||||
|
function finalMessage([yourScore, computerScore]) {
|
||||||
|
if (yourScore === 0) {
|
||||||
|
return { 'message': 'You lost !!', 'color': 'red' };
|
||||||
|
|
||||||
|
} else if (yourScore === 0.5) {
|
||||||
|
return { 'message': 'This is tied !!', 'color': 'yellow' };
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return { 'message': "You won !!", 'color': 'green' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
|
||||||
|
|
||||||
|
var imageDatabase = {
|
||||||
|
'rock': document.getElementById('rock').src,
|
||||||
|
'paper': document.getElementById('paper').src,
|
||||||
|
'scissors': document.getElementById('scissors').src
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('rock').remove();
|
||||||
|
document.getElementById('paper').remove();
|
||||||
|
document.getElementById('scissors').remove();
|
||||||
|
var humanDiv = document.createElement('div');
|
||||||
|
var botDiv = document.createElement('div');
|
||||||
|
var messageDiv = document.createElement('div');
|
||||||
|
|
||||||
|
humanDiv.innerHTML = "<img src=' " + imageDatabase[humanImageChoice] + "' height=150 width = 150 style='box-shadow:0px 10px 50px rgba(37,50,223,1)'>";
|
||||||
|
|
||||||
|
botDiv.innerHTML = "<img src=' " + imageDatabase[botImageChoice] + "' height=150 width = 150 style='box-shadow:0px 10px 50px rgba(243,38,223,1)'>";
|
||||||
|
document.getElementById('flex-box-rps-div').appendChild(humanDiv);
|
||||||
|
messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size:60px; padding:30px;'> " + finalMessage['message'] + "</h1>";
|
||||||
|
document.getElementById('flex-box-rps-div').appendChild(messageDiv);
|
||||||
|
document.getElementById('flex-box-rps-div').appendChild(botDiv);
|
||||||
|
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 48 KiB |
@ -0,0 +1,62 @@
|
|||||||
|
.continer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 31%;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 12vh;
|
||||||
|
background: black;
|
||||||
|
padding: 11vh;
|
||||||
|
color: aquamarine;
|
||||||
|
border-radius: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: tomato;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h4 {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
font-weight: 900;
|
||||||
|
color: crimson;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tip,
|
||||||
|
#amount,
|
||||||
|
#each {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:1150px) {
|
||||||
|
.confiner {
|
||||||
|
max-width: 51%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 794px) {
|
||||||
|
.continer {
|
||||||
|
max-width: 66%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 610px) {
|
||||||
|
.continer {
|
||||||
|
max-width: 81%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
.continer {
|
||||||
|
max-width: 95%;
|
||||||
|
padding: 6vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>Tip Calculator!</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="continer">
|
||||||
|
<h2>Tip Calculator</h2>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="number" class="form-label">How Much Was Your Bill ? (in $ )</label>
|
||||||
|
<input type="number" class="form-control" id="number">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="person" class="form-label">How Many People Sharing The Bill ?</label>
|
||||||
|
<input type="number" class="form-control" id="person">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="Select" class="form-label">How Was Your Service</label>
|
||||||
|
<select id="Select" class="form-select">
|
||||||
|
<option>Choose.....</option>
|
||||||
|
<option value="20">20%</option>
|
||||||
|
<option value="10">10%</option>
|
||||||
|
<option value="2">2%</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary" id="calc">Calculate</button>
|
||||||
|
|
||||||
|
<div class="result mt-5">
|
||||||
|
<h4 id="tip"></h4>
|
||||||
|
<h4 id="amount"> </h4>
|
||||||
|
<h4 id="each"> </h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
window.onload = () => {
|
||||||
|
document.getElementById("calc").onclick = calculate;
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculate() {
|
||||||
|
let amount = document.getElementById("number").value;
|
||||||
|
let person = document.getElementById("person").value;
|
||||||
|
let tip = document.querySelector("#Select").value;
|
||||||
|
|
||||||
|
if (amount == '') {
|
||||||
|
alert("Please enter the valid values");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (person == '1') {
|
||||||
|
document.getElementById("each").style.display = "none";
|
||||||
|
} else {
|
||||||
|
document.getElementById("each").style.display = "block";
|
||||||
|
|
||||||
|
}
|
||||||
|
let totalTip = parseFloat(amount) * parseFloat(tip) / 100;
|
||||||
|
let totalBill = parseFloat(totalTip) + parseFloat(amount);
|
||||||
|
let eachBill = totalBill / parseFloat(person);
|
||||||
|
|
||||||
|
document.getElementById("amount").style.display = "block";
|
||||||
|
document.getElementById("amount").innerHTML = " Total bill = $" + totalBill;
|
||||||
|
document.getElementById("tip").style.display = "block";
|
||||||
|
document.getElementById("tip").innerHTML = " Tip for bill = $" + totalTip;
|
||||||
|
|
||||||
|
document.getElementById("each").innerHTML = " Each will pay = $" + eachBill;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
Subproject commit 472a3d7f472c4bf06faf9789eb9f55826c9a0cc2
|
||||||
Binary file not shown.
@ -0,0 +1,48 @@
|
|||||||
|
canvas {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000f42;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: bold;
|
||||||
|
color: cadetblue;
|
||||||
|
font-size: -webkit-xxx-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
color: aqua;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
max-width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid whitesmoke;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 9px;
|
||||||
|
color: antiquewhite;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 12px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
padding: 6px;
|
||||||
|
border-radius: 11px;
|
||||||
|
background: cornsilk;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./index.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Set Alarm</h1>
|
||||||
|
<form action="">
|
||||||
|
<div class="time"> <input type="number" id="h" placeholder="Hours (1-12)"></div>
|
||||||
|
<div class="time"> <input type="number" id="m" placeholder="minute(0-60)"></div>
|
||||||
|
<button type="submit" id="submit">Set</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="400" height="400">
|
||||||
|
</canvas>
|
||||||
|
|
||||||
|
<script src="./index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
var radius = canvas.height / 2;
|
||||||
|
ctx.translate(radius, radius);
|
||||||
|
radius = radius * 0.90
|
||||||
|
setInterval(drawClock, 1000);
|
||||||
|
|
||||||
|
function drawClock() {
|
||||||
|
drawFace(ctx, radius);
|
||||||
|
drawNumbers(ctx, radius);
|
||||||
|
drawTime(ctx, radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawFace(ctx, radius) {
|
||||||
|
var grad;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||||
|
ctx.fillStyle = 'white';
|
||||||
|
ctx.fill();
|
||||||
|
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
|
||||||
|
grad.addColorStop(0, '#333');
|
||||||
|
grad.addColorStop(0.5, 'white');
|
||||||
|
grad.addColorStop(1, '#333');
|
||||||
|
ctx.strokeStyle = grad;
|
||||||
|
ctx.lineWidth = radius * 0.1;
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
|
||||||
|
ctx.fillStyle = '#333';
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawNumbers(ctx, radius) {
|
||||||
|
var ang;
|
||||||
|
var num;
|
||||||
|
ctx.font = radius * 0.15 + "px arial";
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
for (num = 1; num < 13; num++) {
|
||||||
|
ang = num * Math.PI / 6;
|
||||||
|
ctx.rotate(ang);
|
||||||
|
ctx.translate(0, -radius * 0.85);
|
||||||
|
ctx.rotate(-ang);
|
||||||
|
ctx.fillText(num.toString(), 0, 0);
|
||||||
|
ctx.rotate(ang);
|
||||||
|
ctx.translate(0, radius * 0.85);
|
||||||
|
ctx.rotate(-ang);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawTime(ctx, radius) {
|
||||||
|
var now = new Date();
|
||||||
|
var hour = now.getHours();
|
||||||
|
var minute = now.getMinutes();
|
||||||
|
var second = now.getSeconds();
|
||||||
|
//hour
|
||||||
|
hour = hour % 12;
|
||||||
|
hour = (hour * Math.PI / 6) +
|
||||||
|
(minute * Math.PI / (6 * 60)) +
|
||||||
|
(second * Math.PI / (360 * 60));
|
||||||
|
drawHand(ctx, hour, radius * 0.5, radius * 0.07);
|
||||||
|
//minute
|
||||||
|
minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
|
||||||
|
drawHand(ctx, minute, radius * 0.8, radius * 0.07);
|
||||||
|
// second
|
||||||
|
second = (second * Math.PI / 30);
|
||||||
|
drawHand(ctx, second, radius * 0.9, radius * 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawHand(ctx, pos, length, width) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.lineWidth = width;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.moveTo(0, 0);
|
||||||
|
ctx.rotate(pos);
|
||||||
|
ctx.lineTo(0, -length);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.rotate(-pos);
|
||||||
|
}
|
||||||
|
|
||||||
|
var now = new Date();
|
||||||
|
var hour = now.getHours();
|
||||||
|
var minute = now.getMinutes();
|
||||||
|
var second = now.getSeconds();
|
||||||
|
|
||||||
|
|
||||||
|
const h = document.getElementById("h");
|
||||||
|
const m = document.getElementById("m");
|
||||||
|
const submit = document.getElementById("submit");
|
||||||
|
submit.addEventListener("click", setAlarm);
|
||||||
|
|
||||||
|
var audio = new Audio('./Charas Ganja Mereko Pyara__Set Addicted (320 kbps).mp3');
|
||||||
|
|
||||||
|
function ringBell() {
|
||||||
|
audio.play();
|
||||||
|
};
|
||||||
|
|
||||||
|
function setAlarm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let AlarmHour = h.value - hour;
|
||||||
|
let AlarmMinute = m.value - minute;
|
||||||
|
|
||||||
|
|
||||||
|
let setHour = AlarmHour * 3600000;
|
||||||
|
let setMinute = AlarmMinute * 60000;
|
||||||
|
let setInt = setHour + setMinute;
|
||||||
|
let secondInt = second * 1000
|
||||||
|
let finalSet = setInt - secondInt;
|
||||||
|
var current = new Date();
|
||||||
|
console.log(AlarmHour);
|
||||||
|
console.log(current.toLocaleTimeString());
|
||||||
|
|
||||||
|
if (finalSet >= 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log("Ringing now")
|
||||||
|
ringBell();
|
||||||
|
}, finalSet);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||||
|
<style>
|
||||||
|
#image {
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 61%;
|
||||||
|
padding: 65px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>Hello, world!</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 mx-auto">
|
||||||
|
<h4>
|
||||||
|
Browser through Cv profiles
|
||||||
|
</h4>
|
||||||
|
<hr>
|
||||||
|
<div id="image">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div id="profile">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<button class="btn btn-primary btn-block" id="next">Next</button> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||||
|
<script>
|
||||||
|
console.log("hello");
|
||||||
|
const data = [{
|
||||||
|
name: 'Pawan kumar',
|
||||||
|
age: 20,
|
||||||
|
city: 'kolkata',
|
||||||
|
language: 'all',
|
||||||
|
framework: 'django',
|
||||||
|
image: 'https://randomuser.me/api/portraits/men/75.jpg',
|
||||||
|
|
||||||
|
|
||||||
|
}, {
|
||||||
|
name: 'Nishu',
|
||||||
|
age: 19,
|
||||||
|
city: 'kolkata',
|
||||||
|
language: 'all',
|
||||||
|
framework: 'dangular',
|
||||||
|
image: 'https://randomuser.me/api/portraits/women/75.jpg',
|
||||||
|
|
||||||
|
|
||||||
|
}, {
|
||||||
|
name: 'bro',
|
||||||
|
age: 21,
|
||||||
|
city: 'kolkata',
|
||||||
|
language: 'all',
|
||||||
|
framework: 'java',
|
||||||
|
image: 'https://randomuser.me/api/portraits/women/70.jpg',
|
||||||
|
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
function cvIterator(profile) {
|
||||||
|
let nextIndex = 0;
|
||||||
|
return {
|
||||||
|
next: function() {
|
||||||
|
return nextIndex < profile.length ? {
|
||||||
|
value: profile[nextIndex++],
|
||||||
|
done: false
|
||||||
|
} : {
|
||||||
|
done: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const next = document.getElementById("next");
|
||||||
|
next.addEventListener("click", nextCv);
|
||||||
|
|
||||||
|
const candidate = cvIterator(data);
|
||||||
|
|
||||||
|
nextCv();
|
||||||
|
|
||||||
|
function nextCv() {
|
||||||
|
|
||||||
|
const currentCandidate = candidate.next().value;
|
||||||
|
let profile = document.getElementById("profile");
|
||||||
|
let image = document.getElementById('image');
|
||||||
|
if (currentCandidate != undefined) {
|
||||||
|
|
||||||
|
image.innerHTML = `<img src='${currentCandidate.image}'>`;
|
||||||
|
profile.innerHTML = `<ul class="list-group">
|
||||||
|
<li class="list-group-item">${currentCandidate.name}</li>
|
||||||
|
<li class="list-group-item">${currentCandidate.age}</li>
|
||||||
|
<li class="list-group-item">${currentCandidate.city}</li>
|
||||||
|
<li class="list-group-item">${currentCandidate.language}</li>
|
||||||
|
<li class="list-group-item">${currentCandidate.framework}</li>
|
||||||
|
</ul>`;
|
||||||
|
} else {
|
||||||
|
alert("End of the candidate applications");
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #000f42;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 23vh;
|
||||||
|
display: flex;
|
||||||
|
margin: auto;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 16%;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 87vh;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#im1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="img">
|
||||||
|
<h1 id="im1">🐵</h1>
|
||||||
|
<h1 id="im2">🙊</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let one = document.getElementById("im1");
|
||||||
|
let two = document.getElementById("im2");
|
||||||
|
|
||||||
|
one.addEventListener("click", function() {
|
||||||
|
two.style.display = "block";
|
||||||
|
one.style.display = "none";
|
||||||
|
})
|
||||||
|
two.addEventListener("click", function() {
|
||||||
|
one.style.display = "block";
|
||||||
|
two.style.display = "none";
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue